/* TFT Little Legends Ranking - frontend & admin */
.tft-rank{--bar:#f59e0b;--bar-bg:#fde68a;--text:#111827;--muted:#6b7280;--card:#fff;--ring:#e5e7eb;--crown:#fbbf24;--shadow:0 10px 20px rgba(0,0,0,.08)}
.tft-rank{max-width:960px;margin:16px auto;padding:8px}
.tft-rank__head{display:flex;align-items:center;gap:8px;margin:6px 0 14px}
.tft-rank__title{font-weight:800;font-size:22px;color:var(--text)}
.tft-rank__unit{font-size:12px;color:var(--muted);margin-left:auto}
.tft-item{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;background:var(--card);border:1px solid var(--ring);border-radius:14px;padding:12px;margin-bottom:12px;transition:transform .2s ease, box-shadow .2s ease}
.tft-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.tft-item__rank{width:56px;height:56px;border-radius:12px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;position:relative}
.tft-item__rank--1:before{content:'';position:absolute;top:-10px;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid var(--crown)}
.tft-item__body{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:center}
.tft-item__imgwrap{position:relative;border-radius:12px;border:1px solid var(--ring);overflow:hidden;background:#fff}
.tft-item__img{width:112px;height:72px;object-fit:contain;display:block;transition:transform .25s ease}
.tft-item:hover .tft-item__img{transform:scale(1.05)}
.tft-item__meta{display:flex;flex-direction:column;gap:6px}
.tft-item__name{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.tft-item__title{font-weight:800;color:var(--text);font-size:16px;line-height:1.2}
.tft-item__subtitle{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.tft-progress{position:relative;height:16px;background:var(--bar-bg);border-radius:999px;overflow:hidden}
.tft-progress__bar{position:absolute;inset:0;width:0;background:var(--bar);transition:width 1.2s cubic-bezier(.22,.61,.36,1)}
.tft-progress__value{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-weight:700;font-size:12px}
.tft-item[data-hover='glow']:hover{box-shadow:0 0 0 3px var(--ring), 0 12px 30px rgba(245,158,11,.25)}
@media (max-width:640px){
  .tft-item__body{grid-template-columns:88px 1fr}
  .tft-item__img{width:88px;height:64px}
}
/* Cho ảnh fill hết khung 112×72 hiện tại */
.tft-rank .tft-item__img{ object-fit: cover; }