/* === BASE === */
.bt-toplist,.bt-sidebar{display:flex;flex-direction:column;gap:18px;font-family:inherit}

/* --------------------------------------------------
   TOPLIST CORE
--------------------------------------------------*/
.bt-item{display:flex;align-items:flex-start;border:1px solid #e5e5e5;border-radius:6px;padding:16px 20px;position:relative}
.bt-logo img{object-fit:contain}
.style-2 .bt-content {
    padding: 30px 36px 0 36px;
}
.style-1 .bt-content {
    padding: 0px 26px 0 30px;
}
.bt-content {
    flex: 1;
    line-height: 1.4em;
}
.bt-title{margin:0;font-size:18px;font-weight:700}
.bt-tagline{font-weight:600;margin:2px 0}
.bt-promo{color:#000;font-weight:700;margin:2px 0 4px}
.bt-rating{margin-bottom:4px}
.bt-rating .star{font-size:24px;color:#ccc}
.bt-rating .full{color:#ffb400}
.bt-promo strong {
    color: #ff8420;
}
/* features: block list */
.bt-features{display:inline-block;margin:4px 0 0;padding:0;list-style:none;font-size:14px;line-height:20px}
.bt-features li{position:relative;padding-left:0;margin:0;margin-left: 0.5em !important;}

/* payments – cùng hàng với bullet cuối */
.bt-payments{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 0 8px}
.bt-payments img{height:20px;width:auto}

/* CTA buttons */
.bt-cta{display:flex;flex-direction:column;gap:20px;align-items:flex-end}
.bt-btn{padding:8px 22px;border-radius:4px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-size:14px}
.bt-btn.play-now{background:#ff7f1a;color:#fff}
.bt-btn.review{background:#fff;color:#ff7f1a;border:1px solid #ff7f1a}

/* STYLE-1 (2 nút) */
.bt-toplist.style-1 .bt-item{justify-content:space-between}

/* STYLE-2 (rank + 1 nút) */
.bt-toplist.style-2 .bt-item{justify-content:flex-start}
.bt-toplist.style-2 .bt-rank {
    width: 62px;
    font-size: 64px;
    font-weight: 700;
    color: #ff7f1a;
    text-align: center;
    margin-top: 5px;
    margin-right: 20px;
}
.style-2 .bt-cta {
    padding-top: 30px;
}

/* --------------------------------------------------
   SIDEBAR
--------------------------------------------------*/
.bt-sidebar{gap:12px}
.bt-sb-item{display:flex;align-items:center;justify-content:space-between;background:#f4f4f4;border-radius:6px;padding:14px 18px}
.bt-sb-logo img{width:60px;height:60px;object-fit:contain}
.bt-sb-name{font-size:18px;font-weight:700}
.bt-sb-btn{padding:6px 20px;border-radius:4px;background:#ff7f1a;color:#fff;font-weight:700;text-decoration:none}
/* --------------------------------------------------
   Responsive (<= 600px)
--------------------------------------------------*/
@media (max-width:600px){
.bt-cta{gap:8px}
.bt-content{padding:0 6px!important}
  .bt-item{
    flex-direction:column;
    align-items:flex-start;
    padding:12px 14px;
  }
  .bt-logo img{width:110px;height:110px;margin-bottom:10px}
  .bt-toplist.style-2 .bt-rank{
    font-size:48px;width:auto;margin:0 0 8px 0;
  }
  .bt-cta{align-items:flex-start;width:100%;margin-top:10px}
  .bt-cta .bt-btn{width:100%;justify-content:center}
  .bt-sidebar .bt-sb-item{
 gap:10px;text-align:center;
  }
      .bt-toplist.style-2 .bt-item{
        flex-direction:row;       /* giữ bố cục ngang trên mobile */
        align-items:center;       /* rank & logo canh giữa theo trục dọc */
    }

    .bt-toplist.style-2 .bt-rank{
        width:62px;               /* giữ kích thước cũ */
        margin:0 12px 0 0;        /* khoảng cách sang logo */
        display:flex;
        align-items:center;
        justify-content:center;   /* số ở giữa khung */
    }

    /* thu nhỏ logo nếu cần */
    .bt-toplist.style-2 .bt-logo img{
        width:100px;
        height:100px;
    }
    /* ----- Rank + Logo chung 1 hàng, phần còn lại xuống dòng ----- */
.bt-toplist.style-2 .bt-item{        /* đã row sẵn */
    flex-wrap:wrap;                  /* cho phép xuống dòng */
}
.bt-toplist.style-2 .bt-content,
.bt-toplist.style-2 .bt-cta{
    flex:1 1 100%;                   /* chiếm trọn 100% hàng kế tiếp */
}
}