/*==================================================
 Character Grid v1.0
 TheGioiGameViet
==================================================*/

/* ===== GRID ===== */

.character-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
    margin:20px 0;
}

/* ===== CARD ===== */

.character-card{
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color:inherit;
    transition:.25s;
}

.character-card:hover{
    transform:translateY(-3px);
}

.character-card img{
    width:100%;
    height:auto;
    display:block;
    border-radius:14px;
}

/* ===== NAME ===== */

.character-card h3{
    margin:8px 0 6px;
    font-size:15px;
    font-weight:600;
    line-height:1.35;
    text-align:center;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* ===== TAGS ===== */

.character-tags{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
}

.character-tags span{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:4px 8px;

    border-radius:30px;

    font-size:11px;
    font-weight:600;
    line-height:1;
    color:#fff;
}
.character-link{
    display:block;
    color:inherit;
    text-decoration:none;
}

/* ===== TAG COLOR ===== */

.thetuong1{
    background:#e74c3c;
}

.thetuong2{
    background:#3498db;
}

.thetuong3{
    background:#2ecc71;
}

.thetuong4{
    background:#f39c12;
}

.thetuong5{
    background:#9b59b6;
}

.thetuong6{
    background:#7f8c8d;
}
.character-card.hidden{
    display:none;
}

.character-filter{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}

.character-filter input{

    flex:1;

    min-width:220px;

    padding:10px 14px;

    border:1px solid #ddd;

    border-radius:8px;

}

.character-filter button{

    padding:10px 14px;

    border:none;

    border-radius:8px;

    cursor:pointer;

}

.character-filter button.active{

    background:#2d7ef7;

    color:#fff;

}
/* ===== TABLET ===== */

@media(max-width:991px){

.character-grid{
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

}

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

@media(max-width:768px){

.character-grid{
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.character-card h3{
    font-size:14px;
}

.character-tags span{
    font-size:10px;
    padding:4px 7px;
}

}
.character-card.prime img{
    border:3px solid #f5c542;
    box-shadow:0 0 10px rgba(245,197,66,.35);
}
.character-badge{
    position:absolute;
    top:10px;
    left:10px;
    z-index:2;

    padding:4px 10px;

    border-radius:20px;

    font-size:11px;
    font-weight:700;
    color:#fff;

    text-transform:uppercase;
    letter-spacing:.4px;
}
.character-card{
    position:relative;
}
.character-badge.new{
    background:#2ecc71;
}
.character-badge.hot{
    background:#e74c3c;
}
.character-badge.coming{
    background:#7f8c8d;
}
.character-badge.prime{
    background:#f5c542;
    color:#222;
}
.character-card.hidden{
    display:none;
}

.character-card.tim img{

    border:3px solid #9b59b6;

    border-radius:14px;

    box-shadow:0 0 10px rgba(155,89,182,.35);

}
/* ===== 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;
    }

}