/* =========================
   TFT Items & Emblems (tfti-*)
   ========================= */

/* --- Controls: Search + Filters --- */
.tfti-wrap .tfti-controls{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px;align-items:center}
.tfti-wrap .tfti-search{flex:1 1 260px;max-width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,.15);outline:none}
.tfti-wrap .tfti-filters{display:flex;gap:8px;flex-wrap:wrap}
.tfti-wrap .tfti-filter{background:#0f2440;color:#e8f1ff;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:8px 12px;cursor:pointer}
.tfti-wrap .tfti-filter.is-active{background:#fbbf24;color:#111827;border-color:#fbbf24}

/* --- Grid layout --- */
.tfti-wrap .tfti-grid{display:grid;gap:18px}
.tfti-wrap .tfti-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tfti-wrap .tfti-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tfti-wrap .tfti-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* --- Card container --- */
.tfti-wrap .tfti-card{
  background:#0b1330; /* gần giống thẻ mẫu */
  color:#e8f1ff;
  border:1px solid rgba(255,255,255,.05);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

/* --- Header (icon trái + tiêu đề + icon phải) --- */
.tfti-wrap .tfti-card-head{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start
}
.tfti-wrap .tfti-left{
  display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start
}
.tfti-wrap .tfti-item-icon{
  width:56px;height:56px;border-radius:10px;object-fit:cover;
  border:1px solid rgba(255,255,255,.12)
}
.tfti-wrap .tfti-title{
  margin:4px 0 6px 0;font-size:18px;line-height:1.25;
  color:#ffffff;font-weight:800;letter-spacing:.2px
}

/* --- Icon phải (2 ảnh + dấu +) --- */
.tfti-wrap .tfti-right{display:flex;gap:6px;align-items:center;position:relative}
.tfti-wrap .tfti-right::before{
  content:"+";display:inline-flex;justify-content:center;align-items:center;
  width:18px;height:18px;border-radius:999px;background:#0e3a67;
  border:1px solid rgba(255,255,255,.15);font-size:12px;font-weight:900;color:#cfe3ff;margin-right:4px
}
.tfti-wrap .tfti-right-img{
  width:28px;height:28px;border-radius:6px;object-fit:cover;
  border:1px solid #2a537e;box-shadow:0 2px 8px rgba(0,0,0,.35)
}

/* --- Stat pills dưới tiêu đề --- */
.tfti-wrap .tfti-stats{list-style:none;padding:0;margin:6px 0 0 0;display:flex;flex-wrap:wrap;gap:10px}
.tfti-wrap .tfti-stats li{
  display:flex;align-items:center;gap:6px;background:#183b5f;
  border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  border-radius:12px;padding:6px 10px;font-size:13.5px;color:#d7e9ff;font-weight:700
}
.tfti-wrap .tfti-stats img{width:14px;height:14px;object-fit:cover}

/* --- Description (nội dung bài) --- */
.tfti-wrap .tfti-desc{margin-top:10px;font-size:15px;line-height:1.65;color:#d7e9ff}

/* --- Champions row (tướng tối ưu) --- */
.tfti-wrap .tfti-champs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tfti-wrap .tfti-champ-item{position:relative}
.tfti-wrap .tfti-champ-item img{
  width:74px;height:74px;border-radius:10px;object-fit:cover;border:2px solid #244f7a
}
/* Chỉ còn badge vàng (đã bỏ bậc & post id ở plugin) */
.tfti-wrap .tfti-badge{position:absolute;left:4px;top:4px;background:#ff4e4e;color:#fff;padding:2px 6px;border-radius:6px;font-weight:700;font-size:11px}
.tfti-wrap .tfti-badge.gold{left:auto;right:4px;top:4px;background:#f2c94c;color:#1c1600}

/* --- Responsive tweaks --- */
@media (max-width:1024px){
  .tfti-wrap .tfti-card{padding:12px}
  .tfti-wrap .tfti-title{font-size:17px}
}
@media (max-width:768px){
  .tfti-wrap .tfti-controls{gap:10px}
  .tfti-wrap .tfti-search{flex-basis:100%}
  .tfti-wrap .tfti-filters{overflow-x:auto;white-space:nowrap;padding-bottom:4px}
  .tfti-wrap .tfti-filter{display:inline-block}
  .tfti-wrap .tfti-left{grid-template-columns:48px 1fr}
  .tfti-wrap .tfti-item-icon{width:48px;height:48px}
  .tfti-wrap .tfti-right-img{width:24px;height:24px}
  .tfti-wrap .tfti-stats{gap:6px}
  .tfti-wrap .tfti-stats li{padding:4px 6px;font-size:12.5px}
  .tfti-wrap .tfti-desc{font-size:13.5px}
  .tfti-wrap .tfti-champ-item img{width:64px;height:64px}
}
@media (max-width:480px){
  .tfti-wrap .tfti-card-head{grid-template-columns:1fr auto}
  .tfti-wrap .tfti-title{font-size:16px}
  .tfti-wrap .tfti-right{gap:4px}
  .tfti-wrap .tfti-champ-item img{width:58px;height:58px}
  .tfti-wrap .tfti-badge{font-size:10px;padding:2px 5px;border-radius:5px}
}

/* --- Grid fallback cho màn nhỏ --- */
@media (max-width:900px){ .tfti-wrap .tfti-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .tfti-wrap .tfti-grid{grid-template-columns:repeat(1,minmax(0,1fr))} }


/* Mobile: 1 hàng 1 trang bị */
@media (max-width: 768px){
  .tfti-wrap .tfti-grid{
    grid-template-columns: 1fr !important; /* 1 cột */
  }
  /* (tuỳ chọn) nới card cho dễ đọc */
  .tfti-wrap .tfti-card{padding:14px}
}

/* Thu gọn stat pills + sát lên trên, canh trái */
.tfti-wrap .tfti-title{ margin-bottom: 6px !important; }

.tfti-wrap .tfti-stats{
  margin-top: 2px !important;
  margin-left: 0 !important;
  gap: 6px !important;                /* thu khoảng cách giữa các pill */
  justify-content: flex-start !important; /* chắc chắn canh trái */
}

.tfti-wrap .tfti-stats li{
  padding: 4px 8px !important;       /* pill nhỏ hơn */
  border-radius: 10px !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
}

.tfti-wrap .tfti-stats img{
  width: 12px !important;
  height: 12px !important;
}
.bloghash-entry .tfti-wrap ul.tfti-stats{
  margin-bottom: 0 !important;       /* bỏ khoảng trống 2rem */
  margin-top: 2px !important;         /* sát tiêu đề hơn */
}

/* ====== Align stats giống layout tiếng Anh ====== */

/* Giữ bố cục icon trái + nội dung phải */
.tfti-wrap .tfti-left{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:10px;
  align-items:start;
}

/* Tiêu đề sát phía trên */
.tfti-wrap .tfti-title{
  margin:2px 0 4px 0 !important;
  font-weight:800;
}

/* Dòng stat: bỏ pill, canh trái, xếp dọc */
.tfti-wrap .tfti-stats{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;   /* 2 dòng xếp dọc */
  gap:2px !important;                 /* sát như ảnh */
  justify-content:flex-start !important;
  align-items:flex-start !important;
}

/* Từng dòng stat: không nền, không viền, chữ nhạt hơn tiêu đề */
.tfti-wrap .tfti-stats li{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
  font-size:10px !important;
  font-weight:700 !important;
  color:#b9d5ff !important;           /* màu chữ giống ảnh ENG */
  line-height:1.3 !important;
  display:flex; align-items:center; gap:6px;
}

/* Icon nhỏ bên trái mỗi stat */
.tfti-wrap .tfti-stats img{
  width:14px !important;
  height:14px !important;
  object-fit:cover;
  filter:none; opacity:1;
}

/* (Tùy chọn) làm 2 icon phải gọn như ảnh ENG */
.tfti-wrap .tfti-right{
  display:flex; align-items:center; gap:6px; position:relative;
}
.tfti-wrap .tfti-right::before{
  content:"+"; display:inline-flex; justify-content:center; align-items:center;
  width:16px; height:16px; border-radius:999px;
  background:#0e3a67; border:1px solid rgba(255,255,255,.15);
  font-size:12px; font-weight:900; color:#cfe3ff; margin-right:2px;
}
.tfti-wrap .tfti-right-img{
  width:26px; height:26px; border-radius:6px; object-fit:cover;
  border:1px solid #2a537e;
}

/* Stat rows: bo tròn nhẹ, nền mờ */
.tfti-wrap .tfti-stats{
  gap: 4px !important;                 /* các dòng sát nhau hơn */
}

.tfti-wrap .tfti-stats li{
  background: rgba(255,255,255,.06) !important;  /* nền mờ nhẹ */
  border: 1px solid rgba(255,255,255,.10) !important;
  padding: 4px 8px !important;
  border-radius: 10px !important;      /* bo tròn mềm */
  color: #cfe3ff !important;           /* chữ nhạt hơn tiêu đề */
  line-height: 1.25 !important;
  gap: 6px !important;
}

.tfti-wrap .tfti-stats img{
  width: 13px !important;
  height: 13px !important;
}

/* Icon trang bị to hơn + căn đều với nội dung bên phải */
.tfti-wrap .tfti-left{
  grid-template-columns: 72px 1fr !important;  /* tăng cột icon */
  align-items: center !important;              /* căn giữa theo chiều dọc */
}
.tfti-wrap .tfti-item-icon{
  width: 72px !important;
  height: 72px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
}

/* Nếu muốn 2 icon ở góc phải nhích xuống giữa theo icon lớn hơn */
.tfti-wrap .tfti-right{ align-items: center !important; }
/* Tắt dấu + trước 2 icon phải */
.tfti-wrap .tfti-right::before{
  content: none !important;
  display: none !important;
}

/* (tuỳ chọn) khi bỏ dấu + thì bỏ luôn khoảng cách thừa */
.tfti-wrap .tfti-right{ gap: 6px !important; }     /* chỉnh gap theo ý */