.review-section{background:#fff;border-radius:18px;padding:28px;box-shadow:0 10px 40px rgba(0,0,0,.06);margin-bottom:30px;font-family:Arial,Helvetica,sans-serif;}

/* ===== OVERVIEW ===== */
.review-overview{display:flex;gap:50px;align-items:center;}
.review-score{text-align:center;min-width:160px;}
.score-number{font-size:54px;font-weight:700;color:#111;line-height:1;}
.score-stars .star{font-size:20px;color:#ddd;}
.score-stars .active{color:#ffb400}
.score-total{margin-top:6px;font-size:14px;color:#777;}

/* ===== BARS ===== */
.review-bars{flex:1}
.bar-row{display:flex;align-items:center;gap:12px;margin:8px 0;font-size:14px;}
.bar-line{flex:1;height:8px;background:#eee;border-radius:20px;overflow:hidden;}
.bar-line div{height:100%;background:linear-gradient(90deg,#ffb400,#ff6a00);}
.bar-percent{width:40px;text-align:right;color:#666;}

/* ===== STAR SELECT ===== */
.rate-form{margin:20px 0;}
.star-input{font-size:32px;color:#ddd;cursor:pointer;transition:.2s;}
.star-input:hover,.star-input.active{color:#ffb400}
.rate-form{
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid #eee;
}

.rate-title{
    font-weight:600;
}

.rate-stars .star-input{
    font-size:34px;
    color:#ddd;
    cursor:pointer;
    transition:.2s;
}

.rate-stars .star-input.active{
    color:#ffb400;
}
/* ===== COMMENT ===== */
.comment-wrapper{background:#fff;padding:25px;border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.05);}
.comment-wrapper h3{margin-bottom:15px;}
.comment-input textarea{width:100%;height:90px;border-radius:14px;border:1px solid #ddd;padding:12px;resize:none;}
.comment-input button{background:linear-gradient(90deg,#ff512f,#dd2476);border:none;color:#fff;padding:10px 22px;border-radius:10px;margin-top:10px;cursor:pointer;font-weight:600;}
.comment{border-bottom:1px solid #eee;padding:14px 0;}
.c-head{font-size:14px;font-weight:600;}
.c-body{margin:6px 0;font-size:14px;color:#333;}
.reply{margin-left:45px;margin-top:10px;background:#f8f8f8;padding:10px 12px;border-radius:10px;}
.admin-badge{background:#e10600;color:#fff;font-size:11px;padding:2px 7px;border-radius:6px;margin-left:6px;}
.page-btn{display:inline-block;margin:6px 5px 0 0;padding:6px 11px;background:#eee;border-radius:8px;cursor:pointer;}
.page-btn:hover{background:#111;color:#fff;}


/* ===== COMMENT WRAPPER ===== */
#commentList{
    margin-top:25px;
    
}

.comment-item{
    display:flex;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid #f1f5f9;
}

.comment-avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    background:#e2e8f0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    color:#475569;
    flex-shrink:0;
}

.comment-body{ flex:1; }

.comment-header{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:4px;
}

.comment-name{
    font-weight:600;
    color:#111827;
}

.comment-time{
    font-size:13px;
    color:#9ca3af;
}

.badge-admin{
    background:#ef4444;
    color:#fff;
    font-size:11px;
    padding:2px 6px;
    border-radius:6px;
    font-weight:600;
}

.comment-text{
    font-size:15px;
    color:#374151;
    line-height:1.6;
    margin:6px 0;
}

.comment-action{
        font-size: 14px;
    color: red;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;

    margin-bottom: 10px;
}

/* ===== REPLY ===== */
.reply-list{
    margin-top:12px;
    margin-left:0px;
    border-left:2px solid #f1f5f9;
    padding-left:14px;
}

.reply-form textarea{
    width:100%;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:8px 10px;
    font-size:14px;
    resize:none;
}

.reply-form button{
    margin-top:6px;
    background:#e11d48;
    color:#fff;
    border:none;
    border-radius:6px;
    padding:6px 14px;
    font-size:13px;
    cursor:pointer;
}

/* ===== PAGINATION ===== */
#pagination{
    margin-top:18px;
    text-align:center;
}

.page-btn{
    display:inline-block;
    padding:6px 12px;
    border-radius:6px;
    border:1px solid #e5e7eb;
    margin:0 4px;
    cursor:pointer;
    font-size:14px;
}

.page-btn.active{
    background:#e11d48;
    color:#fff;
    border-color:#e11d48;
}
/* ================= MOBILE & TABLET ================= */
@media (max-width: 768px){

    #commentList{
        margin-top:18px;
    }

    .comment-item{
        gap:10px;
        padding:10px 0;
    }

    .comment-avatar{
        width:36px;
        height:36px;
        font-size:14px;
    }

    .comment-name{
        font-size:14px;
    }

    .comment-time{
        font-size:12px;
    }

    .badge-admin{
        font-size:10px;
        padding:2px 5px;
    }

    .comment-text{
        font-size:14px;
        line-height:1.5;
    }

    .comment-action{
        font-size:13px;
    }

    /* Reply thu nhỏ lại cho khỏi chiếm ngang */
    .reply-list{
        padding-left:10px;
        border-left:2px solid #f1f5f9;
    }

    .reply-form textarea{
        font-size:13px;
        padding:8px;
    }

    .reply-form button{
        width:100%;
        padding:8px;
        font-size:14px;
    }

    /* Pagination mobile */
    .page-btn{
        padding:6px 10px;
        font-size:13px;
        margin:3px;
    }
}