/*
  CSS CHO GIAO DIỆN FEED (TRANG CHỦ)
*/

/* 1. Thiết lập màu nền hiện đại cho body */
body {
    background-color: #f8fafc !important;
}

/* 2. Tùy chỉnh thẻ .card (bài đăng) với bo góc mềm mại và đổ bóng nhẹ */
.card {
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 16px !important;
    box-shadow: var(--card-shadow) !important;
    background-color: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.card:hover {
    box-shadow: var(--hover-shadow) !important;
    transform: translateY(-2px);
}

/* 3. Styling cho sidebar */
.sidebar-left, .sidebar-right {
    position: sticky;
    top: 5.5rem;
}

/* Bọc sidebar trong thẻ card để đồng bộ thiết kế */
.sidebar-left .card, .sidebar-right .card {
    border-radius: 16px !important;
    box-shadow: var(--card-shadow) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background-color: #ffffff !important;
}/* === THÊM LỚP MỚI CHO AVATAR TRANG PROFILE === */
/* Dùng cho avatar thật (ảnh) */
.profile-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover; /* Đảm bảo ảnh vừa vặn */
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Dùng cho avatar mặc định (chữ cái) */
.profile-avatar-default {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #667eea;
    color: white;
    display: inline-flex; /* Dùng inline-flex để căn giữa chữ */
    align-items: center;
    justify-content: center;
    font-size: 80px;
    font-weight: bold;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* === THÊM CSS CHO AVATAR BÀI ĐĂNG === */
.post-author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #667eea;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    overflow: hidden; /* Đảm bảo ảnh cũng bị bo tròn */
    flex-shrink: 0; /* Không bị co lại */
}

.post-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Thêm vào file CSS của bạn */
.navbar-avatar {
    /* Thu nhỏ kích thước từ 32px xuống 28px (hoặc 24px tùy bạn) */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0; /* Đảm bảo avatar không bị co lại */

    /* ----- Dùng cho avatar ảnh thật (img) ----- */
    object-fit: cover; /* Đảm bảo ảnh vừa vặn */

    /* ----- Dùng cho avatar mặc định (div) ----- */
    /* Các thuộc tính này sẽ được thẻ <img> bỏ qua */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background-color: #f0f2f5;
    color: #764ba2;
    font-size: 0.85rem; /* Giảm kích thước chữ cho vừa với khung 28px */
}
/* === ẨN GẠCH CHÂN LINK TRONG BÀI ĐĂNG === */

/* Target tất cả thẻ <a> (link) bên trong phần .card-body của bài đăng
*/
.card .card-body a {
    text-decoration: none; /* Tắt gạch chân */
    color: inherit;      /* Giúp link có màu giống hệt text bình thường (đen hoặc xám) */
}

/* (Tùy chọn) Thêm lại gạch chân khi di chuột qua,
  trừ các nút (như nút "Tải xuống")
*/
.card .card-body a:not(.btn):hover {
    text-decoration: underline;
}
/* ===================================
   CSS MỚI CHO TRANG PROFILE (GIỐNG FACEBOOK)
   =================================== */

/* Container chính cho header (ảnh bìa + info) */
.profile-header-container {
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    margin-bottom: 1.5rem;
    overflow: hidden; /* Quan trọng để bo góc ảnh bìa */
}

/* Ảnh bìa */
.profile-cover-photo {
    height: 350px;
    background-color: #e0e0e0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid #ddd;
    position: relative;
}

.profile-cover-photo::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
}

/* Thanh thông tin (Avatar, Tên, Nút) */
.profile-info-bar {
    display: flex;
    align-items: flex-end; /* Căn avatar và tên xuống dưới */
    padding: 0 2rem 1rem 2rem;
    position: relative;
    min-height: 80px;
    margin-top: -60px; /* Kéo lên đè lên ảnh bìa */
}

/* Vị trí avatar */
.profile-avatar-container {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: white;
    padding: 5px;
    z-index: 10;
    margin-right: 1.5rem;
    flex-shrink: 0;
}

/* Style cho avatar (giống .profile-avatar) */
.profile-avatar-container img,
.profile-avatar-container-default {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ddd;
}
.profile-avatar-container-default {
    background: #667eea;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    font-weight: bold;
}

/* Tên và Bio */
.profile-name-bio {
    flex-grow: 1;
    padding-bottom: 1rem; /* Nâng lên cho ngang nút */
}
.profile-name-bio h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0;
    color: #1c1e21;
}
.profile-name-bio p {
    font-size: 1.1rem;
    color: #666;
    margin-top: 5px;
}

/* Nút (Chỉnh sửa) */
.profile-buttons {
    padding-bottom: 1rem; /* Nâng lên */
}

/* Thanh Tabs (Giới thiệu, Bài viết...) */
.profile-nav {
    border-top: 1px solid #ddd;
    padding: 0 2rem;
    background: #fff;
}
.profile-nav .nav-tabs {
    border-bottom: none;
}
.profile-nav .nav-link {
    padding: 1rem 1.5rem;
    color: #666;
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
}
.profile-nav .nav-link.active {
    color: #667eea;
    border-bottom: 3px solid #667eea;
}

/* === CSS CHO NỘI DUNG CHÍNH (2 CỘT) === */

/* Cột "Giới thiệu" (bên trái) */
.profile-info-box {
    position: sticky;
    top: 1.5rem;
}
.profile-info-box h5 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.profile-info-box .info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: #333;
}
.profile-info-box .info-icon {
    font-size: 1.5rem;
    color: #888;
    width: 24px;
    text-align: center;
}
.profile-info-box .info-item p {
    margin: 0;
    line-height: 1.4;
}
.profile-info-box .info-item strong {
    color: #000;
}
/* ... (Toàn bộ CSS cũ của bạn) ... */


/* ===================================
   CSS MỚI CHO DANH SÁCH LIÊN HỆ (INDEX)
   =================================== */
.user-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Khoảng cách giữa các item */
}

.user-list-item-link {
    text-decoration: none;
    color: inherit;
}

.user-list-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.user-list-item-link:hover .user-list-item {
    background-color: #f0f2f5;
}

.user-avatar-container {
    position: relative;
    margin-right: 12px;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.user-avatar-image,
.user-avatar-default {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.user-avatar-default {
    background-color: #667eea;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.user-avatar-container .status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc; /* Offline */
    border: 2px solid white;
}

.user-avatar-container .status-dot.online {
    background-color: #28a745; /* Online */
}

.user-info .user-name {
    font-weight: 500;
}