/* --- BinhluanViet Pro V8.0.0 (Layouts & ReadMore) --- */
.blv-launch-wrapper { font-family: 'Roboto', sans-serif; max-width: 100%; color: #333; }
.blv-launch-wrapper * { box-sizing: border-box; }

/* 1. CTA Box & Header */
.blv-cta-box { background: #dd3333; color: #fff; padding: 25px; border-radius: 8px; display: flex; align-items: center; gap: 20px; margin-bottom: 30px; box-shadow: 0 4px 10px rgba(221, 51, 51, 0.2); }
.blv-cta-icon { font-size: 28px; animation: blv-shake 2s infinite; }
@keyframes blv-shake { 0%,100%{transform:rotate(0deg);} 10%,30%{transform:rotate(10deg);} 20%,40%{transform:rotate(-10deg);} }

.blv-discussion-header { text-align: center; margin-bottom: 30px; }
.blv-main-question { font-size: 24px; font-weight: 800; color: #222; margin-bottom: 20px; }
.blv-rating-summary { display: flex; flex-direction: column; align-items: center; position: relative; }
.blv-rating-circle { width: 60px; height: 60px; border: 3px solid #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; z-index: 2; margin-bottom: 5px; }
.blv-count { font-size: 22px; font-weight: 800; color: #555; }
.blv-rating-stars { background: #fff; padding: 0 15px; z-index: 2; color: #f1c40f; }
.blv-dashed-line { position: absolute; top: 30px; width: 100%; border-top: 2px dashed #e0e0e0; z-index: 1; }

/* 2. Form & Input */
.blv-comment-section { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.blv-form-container { background: #f9f9f9; padding: 20px; border-radius: 6px; margin-bottom: 30px; border: 1px solid #eee; }
.blv-star-input-group { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.blv-stars-select { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.blv-stars-select input { display: none; }
.blv-stars-select label { font-size: 20px; color: #ddd; cursor: pointer; transition: color 0.2s; padding: 0 2px; }
.blv-stars-select label:hover, .blv-stars-select label:hover ~ label, .blv-stars-select input:checked ~ label { color: #f1c40f; }

.blv-row { display: flex; gap: 10px; margin-bottom: 10px; }
.blv-input-half { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
textarea#blv-textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; min-height: 80px; }
.blv-submit-btn { background: #0073aa; color: #fff; border: none; padding: 10px 25px; font-weight: 700; border-radius: 4px; cursor: pointer; text-transform: uppercase; }
.blv-submit-btn:hover { background: #005177; }
.blv-reply-indicator { background: #e8f0fe; color: #1967d2; padding: 8px 12px; margin-bottom: 10px; border-radius: 4px; font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; }
#blv-cancel-reply { background: none; border: none; color: #d93025; cursor: pointer; font-weight: 600; }

/* 3. COMMENT LIST BASE */
.blv-comment-list { list-style: none; padding: 0; margin: 0; }
.blv-comment-item { margin-bottom: 20px; }
.blv-cmt-body-wrap { display: flex; gap: 15px; }
.blv-cmt-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.blv-cmt-header { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
.blv-author-name { color: #2c3e50; font-size: 15px; }
.blv-time { font-size: 12px; color: #999; }
.blv-show-rating { color: #f1c40f; font-size: 12px; }
.blv-cmt-actions { display: flex; gap: 15px; font-size: 13px; margin-top: 5px; }
.blv-btn-like, .blv-btn-reply { background: none; border: none; padding: 0; cursor: pointer; color: #777; font-weight: 600; }
.blv-btn-like.liked { color: #e74c3c; }

/* 4. TÍNH NĂNG "READ MORE" (Nội dung dài) */
.blv-cmt-text { position: relative; line-height: 1.5; font-size: 14px; color: #333; }
.blv-cmt-text.truncated { max-height: 80px; overflow: hidden; } /* Giới hạn chiều cao */
.blv-cmt-text.truncated::after { 
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; 
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); 
}
/* Xử lý nền khác nhau cho từng style */
.blv-layout-style-default .blv-cmt-text.truncated::after { background: linear-gradient(to bottom, rgba(244,246,248,0), #f4f6f8); }
.blv-read-more-btn { display: none; color: #0073aa; cursor: pointer; font-size: 13px; font-weight: 600; margin-top: 5px; }

/* 5. CÁC KIỂU GIAO DIỆN (LAYOUT STYLES) */

/* Style 1: Default (Facebook Bubble) */
.blv-layout-style-default .blv-cmt-content-area { flex: 1; background: #f4f6f8; padding: 15px; border-radius: 18px; position: relative; }
.blv-layout-style-default .blv-cmt-content-area::before { content:''; position: absolute; left: -8px; top: 15px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #f4f6f8; }
.blv-layout-style-default ul.children .blv-cmt-content-area { background: #fff; border: 1px solid #eee; }
.blv-layout-style-default ul.children .blv-cmt-content-area::before { border-right-color: #eee; }

/* Style 2: Modern (Minimal List) */
.blv-layout-style-modern .blv-comment-item { border-bottom: 1px solid #eee; padding-bottom: 15px; }
.blv-layout-style-modern .blv-cmt-content-area { flex: 1; padding: 0; background: transparent; }
.blv-layout-style-modern .blv-cmt-avatar img { border-radius: 4px; } /* Avatar vuông bo góc */
.blv-layout-style-modern .blv-cmt-text { margin-top: 5px; }

/* Style 3: Card (Boxed) */
.blv-layout-style-card .blv-comment-item { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; margin-bottom: 25px; }
.blv-layout-style-card .blv-cmt-content-area { flex: 1; background: transparent; }
.blv-layout-style-card .blv-cmt-header { border-bottom: 1px dashed #eee; padding-bottom: 10px; margin-bottom: 10px; }

/* Threading Indent (Chung) */
ul.children { list-style: none; padding-left: 0; margin-top: 15px; margin-left: 40px; border-left: 2px solid #eee; }
ul.children > li.blv-comment-item { margin-bottom: 15px; padding-left: 15px; }

/* Responsive */
@media (max-width: 600px) { .blv-row { flex-direction: column; } ul.children { margin-left: 10px; padding-left: 10px; } }