.km-rank-wrapper *{box-sizing:border-box}
 
/* TAB */
.tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}

.tab{
  padding:0px 5px;
  border-radius:6px;
  background:#f5f5f5;
  border:1px solid #ddd;
  cursor:pointer;
  font-size:13px;
    margin-top: 15px;
}

.tab.active{
  background:#c62828;
  color:#fff;
  border-color:#c62828;
}

/* LIST */
.list{display:grid;gap:10px}

.card{
  display:grid;
  grid-template-columns:70px 1fr 60px;
  gap:10px;
  padding:12px;
  border:1px solid #e3e3e3;
  border-radius:8px;
  background:#fff;
  position:relative;
}

.card:hover{border-color:#c62828}

/* RANK */
.num{
  display:grid;
  place-items:center;
  background:#2fa04f;
  color:#fff;
  border-radius:6px;
  font-weight:bold;
}

.card.rank-1 .num{background:#c62828}
.card.rank-2 .num{background:#2b7fba}
.card.rank-3 .num{background:#2fa04f}

/* TEXT */
 
.desc{font-size:12px;color:#555}

/* BAR */
.bar{height:5px;background:#eee;border-radius:6px;overflow:hidden}
.bar span{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#2fa04f,#c62828);

   box-shadow:0 0 6px rgba(198,40,40,.3);
  transition: width 1s cubic-bezier(.22,1,.36,1);
}

.percent{text-align:right;font-weight:bold;color:#c62828}

/* HOVER BOX - UX CLEAN */
.hover{
  position:absolute;
  top:50%;
  right:84px;
  width:292px;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:12px;
  box-shadow:0 18px 45px rgba(0,0,0,.14);
  opacity:0;
  transform:translateY(-50%) translateX(14px) scale(.97);
  pointer-events:none;
  transition:.22s ease;
  z-index:9999;
  overflow:hidden;
}

.card:hover .hover{
  opacity:1;
  transform:translateY(-50%) translateX(0) scale(1);
  pointer-events:auto;
}

.hover img{
  width:100%;
  height:180px;
  display:block;
  object-fit:cover;
}

.hover-content{
  padding:14px;
}

.hover h4{
  margin:0 0 8px;
  font-size:15px;
  line-height:1.35;
  color:#c62828;
  font-weight:800;
}

.hover p{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.65;
  color:#3f4752;
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:12px;
}

.tags span{
    padding: 0px 6px;
    border-radius: 999px;
    background: #fff1f1;
    color: #c62828;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    line-height: 23px;
}

/* NÚT ĐIỀU HƯỚNG */
.km-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:40px;
  border-radius:8px;
  background:#c62828;
  color:#fff !important;
  text-decoration:none !important;
  font-size:13px;
  font-weight:800;
  transition:.22s ease;
}

.km-btn:hover{
  background:#a91f1f;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(198,40,40,.24);
}

/* tránh chữ trong bài bị hover box đè khó chịu */
.card:hover .percent{
  opacity:.2;
}

/* MOBILE */
@media(max-width:760px){
  .hover{
    left:12px;
    right:12px;
    top:calc(100% + 10px);
    width:auto;
    transform:translateY(8px) scale(.97);
  }

  .card:hover .hover,
  .card.show-info .hover{
    transform:translateY(0) scale(1);
  }

  .card:hover .percent{
    opacity:1;
  }
}
.num{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  width:58px;
  height:48px;

  border-radius:10px;
  background:#2fa04f;
  color:#fff;
  font-weight:700;

  line-height:1;
}

/* TOP nhỏ phía trên */
.num span:first-child{
  font-size:10px;
  opacity:.8;
  letter-spacing:.5px;
}

/* #1 nổi bật phía dưới */
.num span:last-child{
  font-size:18px;
  font-weight:900;
  margin-top:2px;
}

/* TOP 1 nổi bật hơn */
.card.rank-1 .num{
  background:#c62828;
  box-shadow:0 4px 12px rgba(198,40,40,.35);
}

/* TOP 2,3 nhẹ hơn */
.card.rank-2 .num{background:#2b7fba;}
.card.rank-3 .num{background:#2fa04f;}






.card{
  padding:8px 12px; /* giảm từ ~14px xuống */
  grid-template-columns:50px 1fr 60px;
  align-items:center;
}

/* khối number */
.num{
  width:48px;
  height:40px;
  border-radius:8px;
}

/* text */
.title{
  font-size:14px;
  line-height:1.2;
}

.desc{
  font-size:11px;
  margin:2px 0;
  line-height:1.2;
}

/* % */
.percent{
  font-size:14px;
}

/* bar */
.bar{
  height:4px; /* giảm từ 6px */
  margin-top:4px;
}
/* TOP 1 - đỏ */
.card.rank-1 .num{
  background:#d32f2f;
  box-shadow:0 4px 12px rgba(211,47,47,.35);
}

/* TOP 2 - xanh dương */
.card.rank-2 .num{
  background:#1976d2;
}

/* TOP 3 - cam */
.card.rank-3 .num{
  background:#f57c00;
}

/* TOP 4 - xanh lá đậm */
.card.rank-4 .num{
  background:#2e7d32;
}

/* từ top 5 trở xuống */
.num{
  background:#43a047; /* xanh lá nhẹ */
}
.km-rank-desc{
  font-size:14px;
  color:#555;
  line-height:1.6;
  margin:6px 0 14px;
}