/* ================================================================
   source-code-show.css  —  Trang chi tiết sản phẩm
   ================================================================ */

/* ── Tab nav ── */
.ptab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 0;
    list-style: none;
    padding: 0;
}
.ptab-nav li { margin-bottom: -2px; }

.ptab-btn {
    background: none;
    border: none;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.ptab-btn:hover { color: #333; }
.ptab-btn.active { color: #c0392b; border-bottom-color: #c0392b; }

.ptab-btn .tab-badge {
    display: inline-block;
    background: #f0f0f0;
    color: #555;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    margin-left: 5px;
    line-height: 1.5;
}
.ptab-btn.active .tab-badge { background: #c0392b; color: #fff; }

/* ── Tab panes ── */
.ptab-content { padding: 28px 0 0; }
.ptab-pane { display: none; }
.ptab-pane.active {
    display: block;
    animation: scShowFadeUp .25s ease;
}
@keyframes scShowFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Rating overview card ── */
.rating-overview {
    background: #fffbf2;
    border: 1px solid #fde8a1;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.rating-score-box { text-align: center; min-width: 110px; }
.rating-score-big { font-size: 56px; font-weight: 800; color: #f39c12; line-height: 1; }
.rating-stars-row { font-size: 20px; color: #f39c12; margin: 6px 0 4px; letter-spacing: 2px; }
.rating-stars-row .fa-star-o { color: #ddd; }
.rating-total { font-size: 12px; color: #888; }

.rating-bars { flex: 1; min-width: 180px; }
.rbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rbar-label { font-size: 12px; color: #555; width: 36px; white-space: nowrap; }
.rbar-label i { color: #f39c12; }
.rbar-track { flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
.rbar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f39c12, #f1c40f);
    border-radius: 4px;
    transition: width .6s ease;
}
.rbar-pct { font-size: 11px; color: #888; width: 32px; text-align: right; }

/* ── Review form card ── */
.review-form-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 28px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.review-form-card h6 { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 16px; }

/* Star picker */
.star-picker {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
    margin-bottom: 4px;
}
.star-picker input { display: none; }
.star-picker label { font-size: 28px; color: #ddd; cursor: pointer; transition: color .15s; }
.star-picker input:checked ~ label,
.star-picker label:hover,
.star-picker label:hover ~ label { color: #f39c12; }

.form-control:focus {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}

.btn-submit-review {
    background: #c0392b;
    color: #fff;
    border: none;
    padding: 9px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: background .2s;
}
.btn-submit-review:hover { background: #a93226; color: #fff; }

/* ── Review / Comment list item ── */
.review-item {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid #f0f0f0;
}
.review-item:last-child { border-bottom: none; }

.review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #f0f0f0;
}
.review-avatar-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}

.review-body { flex: 1; min-width: 0; }
.review-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.review-name { font-weight: 700; font-size: 14px; color: #222; }
.review-stars { font-size: 12px; color: #f39c12; letter-spacing: 1px; }
.review-stars .fa-star-o { color: #ddd; }
.review-date { font-size: 11px; color: #aaa; margin-left: auto; }
.review-text { font-size: 14px; color: #444; line-height: 1.65; margin: 0; }
.review-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #e8f5e9;
    color: #2e7d32;
    font-weight: 600;
}

/* ── Comment form card ── */
.comment-form-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    background: #f9f9f9;
}
.comment-form-card textarea { resize: vertical; min-height: 90px; font-size: 14px; }

.btn-submit-comment {
    background: #2ecc71;
    color: #fff;
    border: none;
    padding: 9px 22px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: background .2s;
}
.btn-submit-comment:hover { background: #27ae60; color: #fff; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 48px 20px; color: #aaa; }
.empty-state i { font-size: 40px; display: block; margin-bottom: 12px; color: #ddd; }
.empty-state p { font-size: 14px; margin: 0; }

/* ── Login prompt ── */
.login-prompt {
    border: 1.5px dashed #dee2e6;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    background: #fafafa;
    font-size: 14px;
    color: #555;
}
.login-prompt a { color: #c0392b; font-weight: 600; }

/* ── Seller info block ── */
.seller-info-block { overflow: hidden; }

/* Avatar tròn — có ảnh */
.seller-avatar-img {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #dee2e6;
}

/* Avatar placeholder — chữ cái đầu */
.seller-avatar-initial {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

/* Hàng 3 thống kê — flexbox chia đều, không bị vỡ */
.seller-stats-row {
    display: flex;
    border-top: 1px solid #dee2e6;
    padding-top: 12px;
    margin-top: 4px;
}

.seller-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 4px 6px;
}

.seller-stat-item--border {
    border-left: 1px solid #dee2e6;
}

.seller-stat-label {
    font-size: 11px;
    color: #888;
    line-height: 1.3;
}

.seller-stat-value {
    font-weight: 700;
    color: #e74c3c;
    font-size: 15px;
    line-height: 1.2;
}

/* ── Comment thread (wrapper cho comment + reply form + replies) ── */
.comment-thread { margin-bottom: 4px; }
.comment-thread > .review-item { margin-bottom: 0; }

/* ── Reply items (thụt lề) ── */
.replies-container { padding-left: 52px; }
.review-reply {
    padding: 10px 0;
    border-bottom: 1px solid #f8f8f8;
    gap: 10px;
}
.review-reply:last-child { border-bottom: none; }
.review-reply .review-avatar,
.review-reply .review-avatar-placeholder {
    width: 34px;
    height: 34px;
    font-size: 13px;
}

/* ── Nút "Trả lời" ── */
.review-actions { margin-top: 6px; }
.btn-reply {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: #3498db;
    cursor: pointer;
    font-weight: 500;
}
.btn-reply:hover { color: #2980b9; text-decoration: underline; }

/* ── Form trả lời (inline) ── */
.reply-form-container {
    padding: 10px 0 10px 52px;
}
.reply-form textarea {
    font-size: 13px;
    resize: none;
    min-height: 70px;
    border-radius: 8px;
}
.reply-form-actions { display: flex; gap: 8px; align-items: center; }

.btn-submit-reply {
    background: #3498db;
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s;
}
.btn-submit-reply:hover { background: #2980b9; }
.btn-submit-reply:disabled { opacity: .65; cursor: not-allowed; }

.btn-cancel-reply {
    background: none;
    border: 1px solid #dee2e6;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: #666;
    transition: background .2s;
}
.btn-cancel-reply:hover { background: #f5f5f5; }

/* ── Nút "Xem thêm" ── */
.load-more-wrap { text-align: center; padding: 16px 0 4px; }
.btn-load-more {
    background: #fff;
    border: 1.5px solid #e0e0e0;
    padding: 9px 28px;
    border-radius: 20px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    font-weight: 500;
    transition: border-color .2s, color .2s, box-shadow .2s;
}
.btn-load-more:hover {
    border-color: #3498db;
    color: #3498db;
    box-shadow: 0 2px 8px rgba(52,152,219,.15);
}
.btn-load-more:disabled { opacity: .65; cursor: not-allowed; }

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
    .ptab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }

    .ptab-nav li {
        flex-shrink: 0;
    }

    .ptab-btn {
        padding: 10px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    .rating-overview {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }

    .rating-score-big {
        font-size: 42px;
    }

    .replies-container,
    .reply-form-container {
        padding-left: 20px;
    }

    .review-form-card,
    .comment-form-card {
        padding: 16px;
    }

    .star-picker label {
        font-size: 24px;
    }
}

/* ── Gallery grid (nhiều ảnh) ── */
.sc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sc-gallery-grid__item {
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    background: #f9f9f9;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    aspect-ratio: 4 / 3;
}

.sc-gallery-grid__item:hover,
.sc-gallery-grid__item.is-active {
    border-color: #78a206;
    box-shadow: 0 0 0 2px rgba(120, 162, 6, 0.15);
}

.sc-gallery-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Hướng dẫn cài đặt ── */
.product-installation-guide {
    background: #f8faf3;
    border: 1px solid #e2ecd0;
    border-radius: 10px;
    padding: 20px 22px;
}

.product-installation-guide img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

@media (max-width: 575.98px) {
    .sc-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}