/*==================================================
TIER LIST - TheGioiGameViet
==================================================*/

/* ===== CONTAINER ===== */

.tier-section{
    margin:24px 0;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
}

/* ===== HEADER ===== */

.tier-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 18px;
}

.tier-title{
    margin:0;
    font-size:22px;
    font-weight:700;
    line-height:1.4;
}

.tier-desc{
    margin-top:4px;
    font-size:13px;
    opacity:.8;
}

.tier-rank{
    display:flex;
    align-items:center;
    justify-content:center;

    width:64px;
    height:64px;

    flex-shrink:0;

    border-radius:12px;

    font-size:28px;
    font-weight:800;
    color:#fff;
}

/* ===== CONTENT ===== */

.tier-content{
    padding:16px;
}

/*==================================================
S+
==================================================*/

.tier-splus{
    border:3px solid #f5c542;
}

.tier-splus .tier-header{
    background:#fff8db;
}

.tier-splus .tier-rank{
    background:#f5c542;
}

/*==================================================
S
==================================================*/

.tier-s{
    border:3px solid #ff8c42;
}

.tier-s .tier-header{
    background:#ffe8da;
}

.tier-s .tier-rank{
    background:#ff8c42;
}

/*==================================================
A
==================================================*/

.tier-a{
    border:3px solid #2d7ef7;
}

.tier-a .tier-header{
    background:#eef5ff;
}

.tier-a .tier-rank{
    background:#2d7ef7;
}

/*==================================================
B
==================================================*/

.tier-b{
    border:3px solid #2ecc71;
}

.tier-b .tier-header{
    background:#edfdf4;
}

.tier-b .tier-rank{
    background:#2ecc71;
}

/*==================================================
C
==================================================*/

.tier-c{
    border:3px solid #9b59b6;
}

.tier-c .tier-header{
    background:#f7effc;
}

.tier-c .tier-rank{
    background:#9b59b6;
}

/*==================================================
D
==================================================*/

.tier-d{
    border:3px solid #7f8c8d;
}

.tier-d .tier-header{
    background:#f2f4f5;
}

.tier-d .tier-rank{
    background:#7f8c8d;
}

/*==================================================
MOBILE
==================================================*/

@media (max-width:768px){

    .tier-header{
        padding:12px;
    }

    .tier-title{
        font-size:18px;
    }

    .tier-rank{
        width:52px;
        height:52px;
        font-size:22px;
    }

    .tier-content{
        padding:12px;
    }

}