/* =================================== */
/* === STYLES FOR POST DETAIL PAGE === */
/* =================================== */

.post-detail-container {
    background-color: #1a1a2a;
    border-radius: 8px;
    padding: 2rem;
}

.post-header .post-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.post-meta-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: #aaa;
    border-bottom: 1px solid #333;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}
.author-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Màu chữ chung cho phần này */
    color: #c5c5c5; /* Sáng hơn #aaa một chút */
}
.author-info a {
    color: #fff; /* Làm cho tên tác giả nổi bật và đủ tương phản */
    text-decoration: none;
}

.author-info a:hover {
    color: #e0a836;
}
.author-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Post Content Formatting */
.post-content {
    color: #ccc;
    font-size: 1.1rem;
    line-height: 1.7;
}
.post-content p.lead {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 400;
}
.post-content h3 {
    color: #e0a836;
    font-weight: bold;
    margin: 2rem 0 1rem 0;
}
.post-content .blockquote {
    border-left: 4px solid #e0a836;
    padding-left: 1.5rem;
    color: #fff;
    font-style: italic;
}
.post-content .figure-caption {
    text-align: center;
    color: #888;
}

/* Post Footer */
.post-footer {
    border-top: 1px solid #333;
    margin-top: 2rem;
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.post-tags .tag {
    background-color: #333;
    color: #ccc;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    margin-right: 0.5rem;
}
.btn-action {
    background-color: #2a2a3a;
    color: #fff;
    border: none;
}
.btn-action .bi-heart-fill {
    color: #ff69b4;
}

/* Sidebar */
.post-sidebar {
    position: sticky;
    top: 90px; /* (Navbar height + some margin) */
}
.author-sidebar-card, .toc-widget {
    background-color: #1a1a2a;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}
.author-sidebar-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 1rem;
}
.author-sidebar-card h5 { color: #fff; font-weight: 500; }
.author-sidebar-card p { color: #aaa; font-size: 0.9rem; }
.btn-follow {
    background-color: #e0a836;
    color: #111;
    border: none;
    font-weight: bold;
    width: 100%;
}
.toc-widget h5 {
    text-align: left;
    color: #fff;
}
.toc-list {
    list-style: none;
    padding: 0;
    text-align: left;
}
.toc-list li a {
    color: #aaa;
    text-decoration: none;
    display: block;
    padding: 0.5rem 0;
}
.toc-list li a:hover { color: #e0a836; }

/* Comment Section */
.comment-section-title {
    color: #fff;
    border-bottom: 1px solid #444;
    padding-bottom: 0.75rem;
}
.comment-form {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}
.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.comment-form .form-control {
    background-color: #2a2a3a;
    border-color: #444;
    color: #fff;
    border-radius: 20px;
}
.comment-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.comment-author {
    color: #fff;
    font-weight: 500;
}
.comment-text {
    color: #ccc;
    margin: 0.25rem 0;
}
.comment-meta {
    font-size: 0.8rem;
    color: #888;
}
.comment-meta a {
    color: #aaa;
    text-decoration: none;
    font-weight: 500;
}