/* NDN Timeline — Popup Cấp bậc thành viên (tier progression)
   UI/UX hiện đại, đồng bộ hệ màu với ndn-timeline-frontend.css */

/* Cho biết huy hiệu cấp bậc có thể bấm được */
.ndn-pcw-role.ndn-role-clickable{cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:#f0f2f5;transition:background .15s,transform .12s;font-weight:600}
.ndn-pcw-role.ndn-role-clickable:hover{background:#e7f0fd;transform:translateY(-1px)}
.ndn-pcw-role.ndn-role-clickable:focus-visible{outline:2px solid rgba(29,78,216,.4);outline-offset:2px}
.ndn-role-caret{width:12px;height:12px;opacity:.7;flex-shrink:0}

/* KYC tắt: ẩn toàn bộ huy hiệu ✓ xác thực ở mọi nơi (feed, hồ sơ, nhắc tên, tìm kiếm...) */
body.ndn-kyc-off .ndn-kyc-badge,
body.ndn-kyc-off .ndn-mention-kyc,
body.ndn-kyc-off .ndn-ss-kyc{display:none!important}

body.ndn-tier-open{overflow:hidden}

.ndn-tier-modal{position:fixed;inset:0;z-index:2000000070;display:flex;align-items:center;justify-content:center;padding:16px}
@media(max-width:640px){.ndn-tier-modal{padding:0;align-items:flex-end}}
.ndn-tier-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .22s ease}
.ndn-tier-modal.ndn-tier-in .ndn-tier-backdrop{opacity:1}

.ndn-tier-box{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;max-width:560px;max-height:90vh;background:#fff;border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.32);overflow:hidden;transform:translateY(22px) scale(.97);opacity:0;transition:transform .24s cubic-bezier(.32,.72,0,1),opacity .24s ease}
.ndn-tier-modal.ndn-tier-in .ndn-tier-box{transform:translateY(0) scale(1);opacity:1}
@media(max-width:640px){.ndn-tier-box{max-width:none;max-height:92vh;border-radius:20px 20px 0 0;transform:translateY(26px)}}

/* ---------- Header ---------- */
.ndn-tier-hd{position:relative;padding:22px 20px 20px;color:#fff;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#1d4ed8 0,#6d28d9 55%,#7c3aed 100%)}
.ndn-tier-hd::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 18%,rgba(255,255,255,.22),transparent 45%),radial-gradient(circle at 90% 90%,rgba(255,255,255,.14),transparent 45%);pointer-events:none}
.ndn-tier-hd-tier--expert{background:linear-gradient(135deg,#b45309 0,#d97706 45%,#f59e0b 100%)}
.ndn-tier-hd-tier--verified{background:linear-gradient(135deg,#047857 0,#059669 55%,#10b981 100%)}
.ndn-tier-hd-tier--trusted{background:linear-gradient(135deg,#1e40af 0,#1d4ed8 55%,#3b82f6 100%)}
.ndn-tier-hd-tier--new{background:linear-gradient(135deg,#475569 0,#64748b 55%,#94a3b8 100%)}
.ndn-tier-hd-tier--restricted,.ndn-tier-hd-tier--banned{background:linear-gradient(135deg,#b91c1c 0,#dc2626 55%,#ef4444 100%)}
.ndn-tier-close{position:absolute;top:14px;right:14px;z-index:2;background:rgba(255,255,255,.2);border:none;border-radius:50%;width:34px;height:34px;font-size:20px;line-height:1;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.ndn-tier-close:hover{background:rgba(255,255,255,.34)}
.ndn-tier-hd-top{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.ndn-tier-badge{width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.ndn-tier-hd-meta{min-width:0;flex:1}
.ndn-tier-hd-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;opacity:.85;margin:0 0 2px}
.ndn-tier-hd-name{font-size:22px;font-weight:800;margin:0;line-height:1.2;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ndn-tier-hd-reach{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;background:rgba(255,255,255,.22);padding:3px 9px;border-radius:999px}
.ndn-tier-hd-sub{font-size:12.5px;opacity:.9;margin:6px 0 0;line-height:1.45}

/* Vòng điểm tổng hợp trong header */
.ndn-tier-points{position:relative;z-index:1;margin-top:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px}
.ndn-tier-points-txt{flex:1;min-width:0}
.ndn-tier-points-lbl{font-size:12px;font-weight:600;opacity:.9;display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}
.ndn-tier-points-lbl b{font-weight:800}
.ndn-tier-pbar{height:8px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden}
.ndn-tier-pbar>span{display:block;height:100%;border-radius:999px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.6);transition:width .6s cubic-bezier(.22,1,.36,1)}

/* ---------- Body ---------- */
.ndn-tier-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 22px;background:#f7f8fb}
.ndn-tier-loading{display:flex;justify-content:center;align-items:center;padding:60px 0}
.ndn-tier-spin{width:32px;height:32px;border:3px solid #dbe2ef;border-top-color:#1d4ed8;border-radius:50%;animation:ndn-spin .7s linear infinite}
.ndn-tier-error{text-align:center;color:#64748b;font-size:14px;padding:40px 20px}

.ndn-tier-sec{margin-bottom:18px}
.ndn-tier-sec:last-child{margin-bottom:0}
.ndn-tier-sec-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#8a93a6;margin:0 0 10px;display:flex;align-items:center;gap:7px}

/* Card “còn thiếu gì để lên cấp” */
.ndn-tier-next{background:#fff;border:1px solid #eaeef5;border-radius:16px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.ndn-tier-next-top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.ndn-tier-next-ic{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#f5f0ff);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.ndn-tier-next-ttl{font-size:15px;font-weight:800;color:#1c1e21;line-height:1.3}
.ndn-tier-next-ttl b{color:#6d28d9}
.ndn-tier-next-sub{font-size:12.5px;color:#65676b;margin:2px 0 0}
.ndn-tier-checklist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ndn-tier-check{display:flex;gap:11px;align-items:flex-start}
.ndn-tier-check-ic{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-top:1px}
.ndn-tier-check.done .ndn-tier-check-ic{background:#d1fae5;color:#059669}
.ndn-tier-check.todo .ndn-tier-check-ic{background:#fee2e2;color:#dc2626}
.ndn-tier-check-main{flex:1;min-width:0}
.ndn-tier-check-lbl{font-size:13.5px;font-weight:600;color:#1c1e21;display:flex;justify-content:space-between;gap:8px}
.ndn-tier-check-val{font-size:12px;font-weight:700;color:#6d28d9;white-space:nowrap}
.ndn-tier-check.done .ndn-tier-check-val{color:#059669}
.ndn-tier-mini-bar{height:6px;border-radius:999px;background:#eef1f6;overflow:hidden;margin-top:6px}
.ndn-tier-mini-bar>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1d4ed8,#7c3aed);transition:width .6s cubic-bezier(.22,1,.36,1)}
.ndn-tier-check-note{font-size:11.5px;color:#8a93a6;margin-top:3px}

/* Top-tier (đã đạt cao nhất) */
.ndn-tier-maxed{background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1px solid #fde68a;border-radius:16px;padding:18px;text-align:center}
.ndn-tier-maxed-ic{font-size:34px;line-height:1}
.ndn-tier-maxed-ttl{font-size:15px;font-weight:800;color:#92400e;margin:8px 0 2px}
.ndn-tier-maxed-sub{font-size:12.5px;color:#a16207}

/* Breakdown điểm uy tín */
.ndn-tier-bd{background:#fff;border:1px solid #eaeef5;border-radius:16px;padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.ndn-tier-bd-row{padding:9px 0;border-bottom:1px solid #f2f4f8}
.ndn-tier-bd-row:last-child{border-bottom:none}
.ndn-tier-bd-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.ndn-tier-bd-lbl{font-size:13px;font-weight:600;color:#1c1e21}
.ndn-tier-bd-detail{font-size:11.5px;color:#8a93a6;font-weight:500;margin-left:6px}
.ndn-tier-bd-val{font-size:12px;font-weight:800;color:#1d4ed8;white-space:nowrap}
.ndn-tier-bd-bar{height:6px;border-radius:999px;background:#eef1f6;overflow:hidden}
.ndn-tier-bd-bar>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2563eb,#7c3aed);transition:width .6s cubic-bezier(.22,1,.36,1)}
.ndn-tier-penalty{margin-top:10px;font-size:12px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:9px;padding:8px 11px;display:flex;align-items:center;gap:7px}

/* Thang cấp bậc (ladder) */
.ndn-tier-ladder{display:flex;flex-direction:column;gap:10px}
.ndn-tier-lvl{position:relative;background:#fff;border:1.5px solid #eaeef5;border-radius:16px;padding:14px 15px 14px 16px;display:flex;gap:13px;align-items:flex-start;transition:border-color .15s,box-shadow .15s}
.ndn-tier-lvl.is-current{border-color:#7c3aed;box-shadow:0 6px 20px rgba(124,58,237,.16)}
.ndn-tier-lvl.is-done{background:#fbfcfe}
.ndn-tier-lvl.is-locked{opacity:.86}
.ndn-tier-lvl-badge{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;color:#fff}
.ndn-tier-lvl-badge--new{background:linear-gradient(135deg,#64748b,#94a3b8)}
.ndn-tier-lvl-badge--trusted{background:linear-gradient(135deg,#1d4ed8,#3b82f6)}
.ndn-tier-lvl-badge--verified{background:linear-gradient(135deg,#059669,#10b981)}
.ndn-tier-lvl-badge--expert{background:linear-gradient(135deg,#d97706,#f59e0b)}
.ndn-tier-lvl-main{flex:1;min-width:0}
.ndn-tier-lvl-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ndn-tier-lvl-name{font-size:15px;font-weight:800;color:#1c1e21}
.ndn-tier-lvl-tag{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:999px}
.ndn-tier-lvl-tag.cur{background:#ede9fe;color:#6d28d9}
.ndn-tier-lvl-tag.done{background:#d1fae5;color:#059669}
.ndn-tier-lvl-tag.lock{background:#f1f5f9;color:#64748b}
.ndn-tier-lvl-reach{margin-left:auto;font-size:12px;font-weight:800;color:#7c3aed;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.ndn-tier-lvl-desc{font-size:12.5px;color:#65676b;margin:5px 0 0;line-height:1.5}
.ndn-tier-lvl-reqs{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ndn-tier-req{font-size:11.5px;font-weight:600;color:#475569;background:#f1f5f9;border-radius:8px;padding:3px 9px;display:inline-flex;align-items:center;gap:4px}
.ndn-tier-req.ok{background:#ecfdf5;color:#059669}

.ndn-tier-foot{font-size:11.5px;color:#94a3b8;text-align:center;margin-top:16px;line-height:1.5}

@media(max-width:640px){.ndn-tier-hd-name{font-size:20px}.ndn-tier-badge{width:52px;height:52px;font-size:26px}}