/* =======================================================
   1. BÀI VIẾT BLOG: ĐÁNH GIÁ (POST RATING)
======================================================= */
.spr-rating-box { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; background:#fff; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; padding:12px 0; margin:20px 0 10px 0; font-family:'Roboto',sans-serif !important; font-size:12px; color:#555; }
.spr-meta-left { display:flex; flex-wrap:wrap; align-items:center; gap:15px; } .spr-meta-item, a.spr-meta-item { display:flex; align-items:center; gap:6px; white-space:nowrap; text-transform:uppercase; color:#095d30; text-decoration:none; transition:color 0.3s ease; }
a.spr-meta-item:hover { color:#f39c12; } a.spr-meta-item:hover svg { stroke:#f39c12; } .spr-meta-item svg { margin-bottom:-1px; } .spr-rating-right { display:flex; align-items:center; gap:8px; } .spr-result-text { color:#095d30; padding-top:3px; }
.spr-stars { display:inline-flex; flex-direction:row-reverse; font-size:18px; cursor:pointer; line-height:1; } .spr-stars span { color:#f39c12; padding:0 1px; transition:all 0.2s; }
.spr-rating-box:not(.spr-rated):not(.spr-processing) .spr-stars:hover span { color:#ddd; } .spr-rating-box:not(.spr-rated):not(.spr-processing) .spr-stars span:hover, .spr-rating-box:not(.spr-rated):not(.spr-processing) .spr-stars span:hover ~ span { color:#f39c12; }
.spr-rating-box.spr-rated .spr-stars, .spr-rating-box.spr-processing .spr-stars { opacity:0.8; pointer-events:none; cursor:default; } .spr-message { font-size:12px; margin-left:8px; display:none; }
.spr-rating-box.spr-mini { border:none; background:transparent; padding:0; margin:5px 0; justify-content:flex-start; } .spr-rating-box.spr-mini .spr-meta-left { display:none; } .spr-rating-box.spr-mini .spr-stars { font-size:20px; }
@media (max-width:768px) { .spr-rating-box { flex-direction:column; align-items:flex-start; gap:12px; } .spr-meta-left { width:100%; gap:10px; } .spr-rating-right { width:100%; border-top:1px dashed #eee; padding-top:10px; } }

/* =======================================================
   2. WOOCOMMERCE: ĐÁNH GIÁ SẢN PHẨM (CUSTOM REVIEW)
======================================================= */
#viva_review_list_wrapper .row,#viva_review_list_wrapper .col,#viva_review_list_wrapper .large-7,#viva_review_list_wrapper .large-8,#viva_review_list_wrapper .col-center{max-width:100% !important;flex-basis:100% !important;width:100% !important;margin:0 !important;padding:0 !important;}#viva_review_list_wrapper #comments,#viva_review_list_wrapper .comment-text,#viva_review_list_wrapper .description{width:100% !important;max-width:100% !important;flex:1 1 auto !important;}
.viva-summary-box{display:flex;flex-wrap:wrap;border:1px solid #e0e0e0;border-radius:8px;padding-top:10px;margin-bottom:30px;background:#fff;align-items:center;box-sizing:border-box;}.viva-col-score{width:25%;text-align:center;border-right:1px solid #f0f0f0;display:flex;flex-direction:column;justify-content:center;}
.viva-score-big{display:flex;align-items:center;justify-content:center;margin-bottom:5px;}.viva-score-num{font-size:48px;font-weight:700;color:#CB4B01;line-height:1;}.viva-score-star{font-size:55px;color:#CB4B01;margin-left:8px;line-height:1;font-family:sans-serif;}
.viva-score-label{font-size:13px;color:#666;font-weight:600;text-transform:uppercase;}.viva-col-bars{width:50%;padding:0 20px;box-sizing:border-box;}.viva-row{display:grid !important;grid-template-columns:60px 1fr 110px !important;gap:10px !important;align-items:center !important;margin-bottom:8px !important;font-size:17px;}
.viva-label{display:flex !important;align-items:center !important;justify-content:flex-end !important;font-weight:700;color:#333;width:100% !important;}.viva-num{margin-right:5px;line-height:1;}.viva-star-icon{color:#ccc;font-size:18px !important;line-height:1 !important;}
.viva-bar{flex-grow:1;background:#eee;height:15px;border-radius:4px;overflow:hidden;width:100%;}.viva-fill{background:#CB4B01;height:100%;border-radius:4px;}.viva-text{text-align:right;color:#095d30;font-size:13px;white-space:nowrap;width:100% !important;}
.viva-col-btn{width:25%;text-align:center;border-left:1px solid #f0f0f0;display:flex;align-items:center;justify-content:center;}button.viva-btn{background-color:#095d30 !important;border:1px solid #095d30 !important;color:#fff !important;font-weight:700;border-radius:4px;padding:0 25px !important;line-height:40px !important;min-height:40px !important;text-transform:uppercase;font-size:14px;margin:0 !important;width:auto !important;min-width:140px;cursor:pointer;white-space:nowrap;}button.viva-btn:hover{background-color:#008acb !important;}
.viva-rating-wrapper{text-align:left;margin:20px 0;border-top:1px solid #eee;padding-top:20px;}.viva-rating-header{font-weight:700;display:block;margin-bottom:15px;font-size:15px;color:#333;}
.viva-stars{display:flex;flex-direction:row-reverse;justify-content:space-between;}.viva-star-item{flex:1;text-align:center;position:relative;}.viva-star-item input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;z-index:2;top:0;left:0;}
.viva-star-item .g-icon{color:#ddd;font-size:30px !important;transition:color 0.2s;font-family:sans-serif !important;display:block;}.viva-star-item .g-text{color:#999;font-size:11px;display:block;margin-top:5px;}
.viva-star-item:hover .g-icon,.viva-star-item:hover ~ .viva-star-item .g-icon,.viva-star-item.selected .g-icon,.viva-star-item.selected ~ .viva-star-item .g-icon{color:#CB4B01 !important;}.viva-star-item:hover .g-text,.viva-star-item.selected .g-text{color:#CB4B01;font-weight:bold;}
body.viva-modal-open{overflow:hidden;}.viva-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:99999;display:flex;align-items:center;justify-content:center;}.viva-modal-content{background:#fff;width:700px;max-width:95%;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,0.3);max-height:90vh;overflow-y:auto;position:relative;}
.viva-modal-close{position:absolute;right:15px;top:10px;font-size:30px;font-weight:bold;color:#aaa;cursor:pointer;z-index:10;}.viva-modal-title{text-align:center;padding:20px;margin:0;border-bottom:1px solid #eee;font-size:18px;font-weight:bold;background:#f9f9f9;}
.viva-modal-body{padding:25px;}.viva-modal-body input,.viva-modal-body textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;}.viva-modal-body #submit{width:100%;font-weight:bold;border-radius:4px;text-transform:uppercase;margin-top:10px;cursor:pointer;border:none;}
.viva-modal-body .comment-form-rating,.viva-modal-body p.stars,#viva_review_list_wrapper #review_form_wrapper,#viva_review_list_wrapper .woocommerce-Reviews-title,#viva_review_list_wrapper h2,.comments-title{display:none !important;}
#viva_review_list_wrapper ol.commentlist li .comment_container{display:flex;padding:15px 0;}#viva_review_list_wrapper img.avatar{width:40px !important;height:40px !important;border-radius:50% !important;margin-right:15px !important;}#viva_review_list_wrapper .star-rating{float:none !important;display:inline-block;color:#CB4B01 !important;font-size:13px !important;margin-top:5px !important;}
@media (min-width:600px){.viva-modal-body .comment-form-author,.viva-modal-body .comment-form-email,.viva-modal-body .comment-form-phone{width:32%;float:left;margin-right:2%;margin-bottom:15px;}.viva-modal-body .comment-form-phone{margin-right:0;}.viva-modal-body .form-submit{clear:both;}}
@media (max-width:768px){.viva-summary-box{flex-direction:column;padding:15px;}.viva-col-score,.viva-col-bars,.viva-col-btn{width:100%;border:none;margin-bottom:20px;padding:0;}.viva-row{grid-template-columns:50px 1fr 90px !important;font-size:17px !important;}.viva-text{font-size:11px;}}

/* =======================================================
   3. MỤC LỤC TỰ ĐỘNG (TOC)
======================================================= */
html { scroll-behavior: smooth; } .viva-toc-container { background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 3px; padding: 12px 18px; margin-bottom: 25px; width: 100%; box-sizing: border-box; color: #333; font-family: inherit; }
.viva-toc-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; padding-bottom: 8px; } .viva-toc-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; } .viva-toc-title svg { color: #555; }
.viva-toc-icon-main svg { transition: transform 0.3s; color: #777; } .viva-toc-container.is-collapsed .viva-toc-icon-main svg { transform: rotate(-90deg); } .viva-toc-container.is-collapsed .viva-toc-body { display: none; }
.viva-toc-list, .viva-toc-sublist { list-style: none !important; padding: 0 !important; margin: 0 !important; } .viva-toc-sublist { padding-left: 20px !important; } .viva-toc-sublist.is-hidden { display: none; }
.viva-toc-item { margin-bottom: 8px; } .viva-toc-item-inner { display: flex; align-items: flex-start; gap: 6px; } .viva-toc-item-inner a { text-decoration: none; line-height: 1.5; flex: 1; transition: color 0.2s; } .viva-toc-item-inner a:hover { color: #007bff; }
.viva-toc-list > .viva-toc-item > .viva-toc-item-inner > a { font-weight: 600; color: #111; font-size: 16px; } .viva-toc-sublist .viva-toc-item-inner > a { font-weight: 400; color: #555; font-size: 15px; }
.viva-toc-toggle-btn { cursor: pointer; color: #777; display: inline-flex; margin-top: 4px; transition: transform 0.2s; } .viva-toc-toggle-btn svg { fill: transparent; } .viva-toc-toggle-btn.is-collapsed { transform: rotate(-90deg); } .viva-toc-spacer { width: 14px; display: inline-block; flex-shrink: 0; }

/* =======================================================
   4. NÚT XEM THÊM (Sử dụng CSS Variable --viva-btn-color, --viva-max-height)
======================================================= */
.seogear-content-toggle { position: relative; overflow: hidden; transition: max-height 0.5s ease; } 
.seogear-content-toggle.is-collapsed { max-height: var(--viva-max-height, 400px) !important; }
.seogear-content-toggle.is-collapsed::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); pointer-events: none; }
.seogear-toggle-btn-wrap { text-align: center; margin-top: 15px; display: block; width: 100%; } 
.seogear-toggle-btn { display: inline-block; color: var(--viva-btn-color, #28a745); border: 1px solid var(--viva-btn-color, #28a745); padding: 8px 20px; border-radius: 5px; cursor: pointer; font-weight: 600; background: #fff; transition: all 0.3s ease; } 
.seogear-toggle-btn:hover { background-color: var(--viva-btn-color, #28a745); color: #fff; }

/* =======================================================
   5. BÀI VIẾT LIÊN QUAN CÙNG CHUYÊN MỤC (SLIDER MODE - ĐÃ FIX)
======================================================= */
.viva-related-posts-container { 
    margin-top: 40px; 
    padding-top: 10px; 
    clear: both; 
    width: 100%;
    overflow: hidden; /* Bắt buộc: Ngăn chặn container làm vỡ layout trang */
}

/* Tiêu đề Nổi bật */
.viva-related-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
    border-bottom: 2px solid #eaeaea; 
    padding-bottom: 10px;
}
.viva-related-title { 
    font-size: 18px; 
    font-weight: 700; 
    margin: 0; 
    text-transform: uppercase; 
    color: #333; 
    position: relative;
}
.viva-related-title span { 
    position: relative; 
    display: inline-block; 
}
.viva-related-title span::after { 
    content: ""; 
    position: absolute; 
    left: 0; 
    bottom: -12px; /* Đè chính xác lên đường viền xám ở dưới */
    width: 100%; 
    height: 2px; 
    background: var(--viva-btn-color, #28a745); 
}

/* Nút điều hướng Slider */
.viva-slider-nav { display: flex; gap: 8px; }
.viva-slider-nav button { 
    background: #fff; border: 1px solid #ddd; border-radius: 4px; 
    width: 32px; height: 32px; cursor: pointer; font-size: 14px; 
    color: #555; display: flex; align-items: center; justify-content: center; transition: all 0.3s; 
}
.viva-slider-nav button:hover { 
    background: var(--viva-btn-color, #28a745); color: #fff; border-color: var(--viva-btn-color, #28a745); 
}

/* Cấu trúc trượt mượt mà */
.viva-related-slider { 
    display: flex; gap: 20px; overflow-x: auto; 
    scroll-snap-type: x mandatory; scroll-behavior: smooth; 
    padding-bottom: 15px; scrollbar-width: thin; 
}

/* Tùy chỉnh thanh cuộn ngang cho đẹp */
.viva-related-slider::-webkit-scrollbar { height: 6px; }
.viva-related-slider::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.viva-related-slider::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.viva-related-slider::-webkit-scrollbar-thumb:hover { background: var(--viva-btn-color, #28a745); }

/* Ép kích thước khung ảnh NGHIÊM NGẶT (Tránh bị tràn chữ) */
.viva-related-item { 
    flex: 0 0 calc(33.333% - 14px); /* Desktop luôn hiển thị 3 cột */
    max-width: calc(33.333% - 14px); /* Khóa chết chiều rộng tối đa */
    scroll-snap-align: start; 
    display: flex; flex-direction: column;
    border: 1px solid #eaeaea; border-radius: 10px; padding: 5px;
}

.viva-related-item a { 
    text-decoration: none !important; color: #333; transition: all 0.3s; 
    display: block; height: 100%;
}
.viva-related-item a:hover .viva-related-post-title { color: var(--viva-btn-color, #28a745); }

.viva-related-thumb { 
    width: 100%;
    aspect-ratio: 16/9; /* Tự động cắt ảnh về tỷ lệ chuẩn 16:9 giống Youtube */
    overflow: hidden; border-radius: 6px; margin-bottom: 12px; 
    background: #f5f5f5; position: relative;
}
.viva-related-thumb img { 
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover; /* Lấp đầy khung không bị méo */
    transition: transform 0.4s ease; display: block; 
}
.viva-related-item a:hover .viva-related-thumb img { transform: scale(1.08); }

.viva-related-post-title { 
    font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0; 
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-top: 5px;
}

/* Responsive - Giao diện tự động co giãn theo thiết bị */
@media (max-width: 1024px) { 
    .viva-related-item { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); } 
}
@media (max-width: 600px) { 
    .viva-related-item { flex: 0 0 85%; max-width: 85%; } /* Chừa 1 khoảng nhỏ để khách thấy có bài tiếp theo */
    .viva-slider-nav { display: none; } /* Mobile vuốt bằng ngón tay nên ẩn nút bấm đi cho gọn */
}