/* KTDB Hub — style trang /ten-dep. Kế thừa biến theme, có fallback. */
.ktdb-hub{
  --h-acc: var(--acc,#e60023);
  --h-bg: var(--bg,#fff);
  --h-soft: var(--soft,#f9f9f9);
  --h-line: var(--line,#e5e5e5);
  --h-ink: var(--ink,#0f0f0f);
  --h-mut: var(--mut,#606060);
  margin:0 0 8px;
}
.ktdb-hub__loading{padding:28px 14px;text-align:center;color:var(--h-mut);font-size:15px}

/* ---- blocks tĩnh ---- */
.ktdb-block{margin:30px 0}
.ktdb-block__title{font-size:20px;font-weight:800;margin:0 0 4px;line-height:1.25}
.ktdb-block__sub{margin:0 0 14px;color:var(--h-mut);font-size:14px}

/* ---- chip tên ---- */
.ktdb-namechips{display:flex;flex-wrap:wrap;gap:8px}
.ktdb-namechip{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border:1px solid var(--h-line);
  border-radius:999px;background:var(--h-bg);color:var(--h-ink);text-decoration:none;font-size:14px;font-weight:600;
  transition:.15s}
.ktdb-namechip:hover{border-color:var(--h-acc);color:var(--h-acc);transform:translateY(-1px)}
.ktdb-namechip.is-article{background:var(--h-soft)}
.ktdb-namechip__badge{font-size:11px;font-weight:700;color:#fff;background:var(--h-acc);border-radius:999px;padding:1px 7px}

/* ---- nickname đẹp (tĩnh) ---- */
.ktdb-nicenicks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.ktdb-nicechip{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--h-line);
  border-radius:12px;background:var(--h-bg);cursor:pointer;text-align:left;transition:.15s;width:100%}
.ktdb-nicechip:hover{border-color:var(--h-acc);background:var(--h-soft)}
.ktdb-nicechip__rank{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:var(--h-soft);
  display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--h-mut)}
.ktdb-nicechip:nth-child(1) .ktdb-nicechip__rank,
.ktdb-nicechip:nth-child(2) .ktdb-nicechip__rank,
.ktdb-nicechip:nth-child(3) .ktdb-nicechip__rank{background:var(--h-acc);color:#fff}
.ktdb-nicechip__text{flex:1;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ktdb-nicechip__meta{flex:0 0 auto;font-size:12px;color:var(--h-mut);font-weight:700}

/* ===== dynamic view ===== */
.ktdb-hubview__head{margin:6px 0 18px}
.ktdb-hubview__back{display:inline-block;font-size:13px;color:var(--h-mut);text-decoration:none;margin-bottom:6px}
.ktdb-hubview__back:hover{color:var(--h-acc)}
.ktdb-hubview__title{font-size:24px;font-weight:800;margin:0;line-height:1.2}
.ktdb-hubview__sub{margin:4px 0 0;color:var(--h-mut);font-size:14px}

/* đánh giá bài */
.ktdb-rate{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;border:1px solid var(--h-line);
  border-radius:12px;background:var(--h-soft);margin:0 0 18px}
.ktdb-rate__q{font-weight:700;font-size:14px}
.ktdb-rate__btn{border:1px solid var(--h-line);background:var(--h-bg);border-radius:999px;padding:7px 14px;
  font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.ktdb-rate__btn:hover{border-color:var(--h-acc)}
.ktdb-rate__btn.is-on{background:var(--h-acc);color:#fff;border-color:var(--h-acc)}
.ktdb-rate__btn[disabled]{opacity:.6;cursor:default}
.ktdb-rate__cnt{font-size:13px;color:var(--h-mut);font-weight:700;margin-left:auto}

/* panel tạo */
.ktdb-create{border:1px solid var(--h-line);border-radius:14px;padding:16px;margin:0 0 20px;background:var(--h-bg)}
.ktdb-create__title{margin:0 0 10px;font-size:17px;font-weight:800}
.ktdb-create__input,.ktdb-share__input{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid var(--h-line);
  border-radius:10px;font-size:16px;outline:none}
.ktdb-create__input:focus,.ktdb-share__input:focus{border-color:var(--h-acc)}
.ktdb-create__out{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}
.ktdb-create__emojis{margin:6px 0 4px}
.ktdb-create__emlbl{font-size:12px;color:var(--h-mut);font-weight:700;display:block;margin-bottom:6px}
.ktdb-emoji-wrap{display:flex;flex-wrap:wrap;gap:6px;max-height:120px;overflow:auto}
.ktdb-emoji{border:1px solid var(--h-line);background:var(--h-bg);border-radius:8px;padding:5px 9px;cursor:pointer;
  font-size:15px;line-height:1.3}
.ktdb-emoji:hover{border-color:var(--h-acc);background:var(--h-soft)}
.ktdb-share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--h-line)}
.ktdb-share__input{flex:1;min-width:200px}
.ktdb-share__btn{border:0;background:var(--h-acc);color:#fff;border-radius:10px;padding:11px 18px;font-weight:800;cursor:pointer}
.ktdb-share__btn[disabled]{opacity:.6;cursor:default}
.ktdb-share__msg{font-size:13px;color:var(--h-mut);width:100%}

/* danh sách nickname động */
.ktdb-nicklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.ktdb-nick{border:1px solid var(--h-line);border-radius:12px;overflow:hidden;background:var(--h-bg);display:flex;flex-direction:column}
.ktdb-nick.is-top{border-color:var(--h-acc);box-shadow:0 0 0 1px var(--h-acc) inset}
.ktdb-nick__text{display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;background:transparent;
  padding:13px 12px;cursor:pointer;text-align:left;width:100%}
.ktdb-nick__text:hover{background:var(--h-soft)}
.ktdb-nick__val{font-size:18px;line-height:1.4;word-break:break-word}
.ktdb-nick__copies{flex:0 0 auto;font-size:12px;color:var(--h-mut);font-weight:700;white-space:nowrap}
.ktdb-nick__bar{display:flex;gap:0;border-top:1px solid var(--h-line)}
.ktdb-vote{flex:1;border:0;background:transparent;padding:8px 6px;font-size:13px;font-weight:700;color:var(--h-mut);
  cursor:pointer;transition:.15s}
.ktdb-vote--up:hover{color:#16a34a;background:var(--h-soft)}
.ktdb-vote--down{border-left:1px solid var(--h-line)}
.ktdb-vote--down:hover{color:var(--h-acc);background:var(--h-soft)}
.ktdb-vote.is-on{opacity:.7}

/* phân trang */
.ktdb-pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:22px 0 6px}
.ktdb-pager__btn{min-width:38px;border:1px solid var(--h-line);background:var(--h-bg);border-radius:8px;padding:7px 10px;
  font-weight:700;font-size:14px;cursor:pointer}
.ktdb-pager__btn:hover:not([disabled]){border-color:var(--h-acc);color:var(--h-acc)}
.ktdb-pager__btn.is-cur{background:var(--h-acc);color:#fff;border-color:var(--h-acc)}
.ktdb-pager__btn[disabled]{opacity:.45;cursor:default}
.ktdb-pager__dots{align-self:center;color:var(--h-mut);padding:0 2px}

@media (max-width:600px){
  .ktdb-nicenicks{grid-template-columns:1fr 1fr}
  .ktdb-nicklist{grid-template-columns:1fr}
  .ktdb-hubview__title{font-size:20px}
}