/* ===================== BODY & GLOBAL ===================== */
body {
    background-color: #f4f6fa; /* trắng */
}


/* ===================== CONTAINER BLOG ===================== */


/* ===================== BLOG CARD ===================== */
.blog-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.35s ease;
    background-color: #fff;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.1);
}

/* Ảnh blog */
.card-img-container {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover img {
    transform: scale(1.07);
}

/* Nội dung */
.card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-text {
    color: #6b7280;
    flex-grow: 1;
    margin-bottom: 1rem;
}

/* Button */
.btn-outline-primary {
    border-color: #3b82f6;
    color: #3b82f6;
}

.btn-outline-primary:hover {
    background-color: #3b82f6;
    color: #fff;
}

/* ===================== SIDEBAR ===================== */
.sidebar-left,
.sidebar-right {
    position: sticky;
    top: 100px;
}

/* Sidebar card */
.sidebar-card {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1rem;
}

/* ===================== DANH MỤC & HOT BLOG ===================== */
.list-group-item {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.list-group-item:hover {
    background-color: #f9fafb;
    transform: translateX(4px);
}

.hot-item {
    transition: background-color 0.25s ease, transform 0.2s ease;
    cursor: pointer;
    padding: 5px;
    border-radius: 12px;
}

.hot-item:hover {
    background-color: #f9fafb;
    transform: translateX(4px);
}

/* Hình tròn cho hot blog */
.hot-thumb-container {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.hot-thumb-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===================== ROW & GRID ===================== */
.row.g-4 {
    row-gap: 50px;
}

/* Blog grid 2 cột lớn */
@media (min-width: 992px) {
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 991.98px) {
    .col-md-6, .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
}

/* ===================== COMMENTS ===================== */
.comment-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.comment {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 0.75rem;
}

.comment:hover {
    background-color: #fdfdfd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.comment-time {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    font-size: 0.8rem;
    color: #999;
}

/* Header */
.comment-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.comment-header strong {
    color: #333;
    font-size: 0.95rem;
}

.comment-reply-to {
    color: #888;
    font-size: 0.85rem;
    margin-left: 0.25rem;
}

/* Body */
.comment-body {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #444;
    margin-bottom: 0.5rem;
}

/* Actions */
.comment-actions {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.comment-actions .btn-link {
    text-decoration: none;
    color: #007bff;
    padding: 0;
}

.comment-actions .btn-link:hover {
    text-decoration: underline;
}

/* Reply form */
.reply-form textarea,
.collapse textarea {
    font-size: 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid #ddd;
    width: 100%;
    resize: vertical;
}

.reply-form button,
.collapse button {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

/* Reply cấp 2+ */
.comment-reply {
    margin-left: 2rem;
    border-radius: 0;
    box-shadow: none;
    border: none;
    padding: 0.5rem 0 0.5rem 1rem;
    background-color: #f9f9f9;
}

.comment-reply .comment-reply {
    margin-left: 1.5rem;
    background-color: #f4f4f4;
}

/* Xem thêm replies */
.view-more {
    font-size: 0.85rem;
    color: #007bff;
    margin-top: 0.25rem;
    cursor: pointer;
}
.view-more:hover {
    text-decoration: underline;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 2000px) { .container.py-5 { max-width: 2000px; } }
@media (max-width: 1800px) { .container.py-5 { max-width: 1650px; } }
@media (max-width: 1650px) { .container.py-5 { max-width: 1400px; } }
@media (max-width: 1400px) { .container.py-5 { max-width: 1200px; padding: 40px; } }
@media (max-width: 1200px) { .container.py-5 { max-width: 1000px; padding: 35px; } }
@media (max-width: 992px)  { .container.py-5 { max-width: 750px; padding: 30px; } }
@media (max-width: 768px)  {
    .container.py-5 { max-width: 100%; padding: 20px; }
    .card-img-container { height: 180px; }
    .hot-thumb-container { width: 60px; height: 60px; }
    .sidebar-left, .sidebar-right { position: static; margin-top: 20px; }
    .comment { padding: 0.5rem 0.75rem; }
    .comment-time { position: static; display: block; margin-bottom: 0.25rem; }
    .comment-reply { margin-left: 1rem; padding-left: 0.75rem; }
}
@media (max-width: 576px)  {
    .container.py-5 { padding: 15px; }
    .comment-container { padding: 0.15rem; }
    .comment { padding: 0.4rem 0.5rem; }
    .comment-body { font-size: 0.85rem; }
    .comment-header strong { font-size: 0.85rem; }
    .comment-actions { font-size: 0.75rem; }
    .reply-form textarea, .collapse textarea { font-size: 0.85rem; }
    .reply-form button, .collapse button { font-size: 0.75rem; padding: 0.2rem 0.4rem; }
}
.blog-description {
    font-size: 1.1rem;      /* chữ to hơn */
    color: #555;             /* màu xám đậm vừa phải */
    line-height: 1.6;        /* khoảng cách dòng dễ đọc */
    margin-bottom: 1rem;     /* cách dưới */
}


/* Sticky sidebar container */
.sidebar-sticky {
    position: sticky;
    top: 100px; /* khoảng cách từ top khi scroll */
}

/* Hình ảnh sidebar */
.sidebar-img {
    width: 50px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 0.5rem;
}

/* Placeholder khi không có ảnh */
.sidebar-img.placeholder {
    background: #eee;
}

/* Font size */
.small { font-size: 0.8rem; }
.smaller { font-size: 0.75rem; }

/* Card sidebar */
.sidebar-card {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1rem;
}

/* Gợi Ý Blog list scroll */
.suggested-list {
    max-height: 250px; /* chiều cao tối đa */
    overflow-y: auto;
    padding-right: 0.25rem; /* tạo khoảng cho scrollbar */
}

/* Scrollbar đẹp hơn cho webkit */
.suggested-list::-webkit-scrollbar {
    width: 6px;
}
.suggested-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}
.suggested-list::-webkit-scrollbar-track {
    background: transparent;
}