/* THÀNH PHẦN DÙNG CHUNG */
.avatar {
  width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--mau, var(--mist-300)); color: #0a0e14; font-weight: 800; font-size: 16px;
  box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .12), 0 0 0 1px rgba(255, 255, 255, .08);
}
.avatar.to { width: 56px; height: 56px; border-radius: 16px; font-size: 24px; }
.avatar.nho { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }

.bieu-tuong { width: 16px; height: 16px; flex: none; }
.huy-hieu {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; flex: none;
  color: var(--mau-tt); background: color-mix(in srgb, var(--mau-tt) 14%, transparent);
}
.huy-hieu .bieu-tuong { width: 15px; height: 15px; }

.cham { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-600); flex: none; }
.cham.song { background: var(--ok); animation: nhip 1.8s infinite; }
@keyframes nhip { 0% { box-shadow: 0 0 0 0 rgba(111, 227, 164, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(111, 227, 164, 0); } }

.diem { font-weight: 800; font-size: 15px; min-width: 2ch; text-align: right; }
.diem.dat { color: var(--ok); } .diem.khong { color: var(--warn); } .diem.chua { color: var(--mist-500); font-weight: 600; }
.thanh-diem { position: relative; display: block; height: 6px; border-radius: 6px; background: var(--ink-700); min-width: 0; }
.thanh-diem i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--ok); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.thanh-diem.khong i { background: var(--warn); }
.thanh-diem b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--mist-300); opacity: .55; border-radius: 1px; }
.dat-khong { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; }
.dat-khong.dat { color: var(--ok); background: rgba(111, 227, 164, .14); }
.dat-khong.khong { color: var(--warn); background: rgba(242, 180, 106, .16); }

/* Thẻ, chip, nút */
.the {
  background: linear-gradient(180deg, rgba(18, 24, 35, .85), rgba(14, 19, 27, .9)); border: 1px solid var(--vien);
  border-radius: var(--bk); padding: 12px 14px; min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
a.the, button.the { display: block; width: 100%; text-align: left; transition: border-color .15s, transform .15s, background-color .15s; }
a.the:hover, button.the:hover { border-color: rgba(124, 196, 214, .45); background-color: rgba(124, 196, 214, .03); }
a.the:active, button.the:active { transform: scale(.992); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 11px; border-radius: 999px; min-width: 0; max-width: 100%;
  border: 1px solid var(--vien); background: var(--ink-800); font-size: 12.5px; color: var(--mist-300);
}
.chip .bieu-tuong { width: 15px; height: 15px; }
.chip b { color: var(--mist-100); font-variant-numeric: tabular-nums; }
.chip.nhan { color: var(--warn); border-color: rgba(242, 180, 106, .4); background: rgba(242, 180, 106, .08); font-weight: 600; }
.chip.song { color: var(--ok); } .chip.cho { color: var(--warn); } .chip.dang { color: var(--signal-strong); }
button.chip { cursor: pointer; min-height: 44px; padding: 6px 14px; }
button.chip[aria-pressed="true"] { border-color: var(--signal); color: var(--signal-strong); background: rgba(124, 196, 214, .1); }
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 12px;
  border: 1px solid var(--vien); background: var(--ink-800); font-weight: 700; transition: filter .15s, transform .1s;
}
.nut:hover { filter: brightness(1.15); } .nut:active { transform: scale(.98); }
.nut.chinh { background: var(--signal); color: #04121a; border-color: transparent; }
.nut[disabled] { opacity: .55; cursor: not-allowed; }
.nut.lang { background: transparent; }
.luoi { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.dong-chip { display: flex; flex-wrap: wrap; gap: 8px; }
.cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hai-dong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }