body {
    background: #f0f2f5;
    font-family: 'Arial', sans-serif;
}
.main {
    
    margin: auto;
    margin-top:-10px;
}
.header-page {
    width: 100%;
    background: white;
    margin: auto;
    padding-bottom: 20px;
    
}
.container {
    max-width:1140px;  
}
.navbar-custom {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /*padding: 10px 20px;*/
    z-index: 1;
}

.navbar-brand img {
    height: 35px;
    margin-right: 10px;
}

.search-box {
    width: 28rem;
    border-radius: 20px;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border: none;
    border-bottom: 1px solid #ddd;
    outline: none;
    max-width: 12rem;
    font-size: 15px;
}

.nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
}
    /* --- Nav center: giữ icon luôn đồng bộ màu với link cha --- */
    .nav-center .nav-link {
        color: #6c757d; /* màu mặc định */
        transition: color 0.2s ease;
    }

        .nav-center .nav-link.active,
        .nav-center .nav-link:hover {
            color: #28a745 !important; /* màu hover hoặc active */
        }

        /* Khắc phục hover icon riêng bị đổi màu */
        .nav-center .nav-link i,
        .nav-center .nav-link i::before {
            color: inherit !important; /* luôn kế thừa màu link cha */
            opacity: 1 !important; /* bỏ hiệu ứng mờ/dậm mặc định */
            pointer-events: none; /* icon không bắt hover riêng */
            transition: color 0.2s ease;
        }

    .nav-center a {
        font-size: 22px;
        color: #555;
        text-decoration: none;
        padding: 12px; /* Tăng padding để bo tròn hơn */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px; /* Định kích thước để giữ hình tròn */
        height: 45px;
        transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
    }

        .nav-center a:hover,
        .nav-center a.active { /* Đảm bảo active giống hover */
            background: rgb(102 234 167 / 23%) !important;
            color: #34c759 !important;
            transform: scale(1.1);
        }


.nav-icons {
    display: flex;
    gap: 10px;
    margin-right: 10px;
}

    .nav-icons a {
        font-size: 22px;
        color: #555;
        text-decoration: none;
        padding: 10px;
        border-radius: 50%;
        background: #ddd; /* Màu xám nhạt */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    }

        .nav-icons a:hover {
            background: #bbb; /* Background tối hơn khi hover */
            color: #333; /* Màu icon đậm hơn */
        }

.profile-dropdown {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
}

.dropdown-menu {
    min-width: 180px;
}



/* Responsive styles */
@media (max-width: 992px) {
    .sidebar-left {
        display: none;
    }

    .sidebar-right {
        display: none;
    }

    .search-box {
        width: 8rem;
    }

    .navbar-brand img {
        height: 35px;
        /* margin-right: 10px; */
    }

    .nav-center {
        display: none !important;
    }

    .nav-icons a {
        width: 35px;
        height: 35px;
        font-size: 18px;
        padding: 6px;
    }

    .profile-dropdown span {
        display: none;
    }

    .navbar-custom {
        /* padding: 8px 16px;*/
    }

    .navbar-brand span {
        display: none;
    }
}

@media (max-width: 576px) {
    .profile-img {
        width: 32px;
        height: 32px;
        margin-right: 0;
    }

    .nav-icons {
        gap: 5px;
    }
}
/*.navbar-custom {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    z-index:1;
}

.navbar-brand img {
    height: 35px;
    margin-right: 10px;
}

.search-box {
    width: 280px;
    border-radius: 20px;
    border: 1px solid #ddd;
    padding: 5px 10px;
}

.nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
}

    .nav-center a {
        font-size: 22px;
        color: #555;
        text-decoration: none;
        padding: 12px;*/ /* Tăng padding để bo tròn hơn */
        /*border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;*/ /* Định kích thước để giữ hình tròn */
        /*height: 45px;
        transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
    }

        .nav-center a:hover,
        .nav-center a.active {*/ /* Đảm bảo active giống hover */
            /*background: rgba(0, 123, 255, 0.15);
            color: #007bff;
            transform: scale(1.1);
        }


        .nav-icons {
            display: flex;
            gap: 10px;
            margin-right: 10px;
        }

.nav-icons a {
    font-size: 22px;
    color: #555;
    text-decoration: none;
    padding: 10px;
    border-radius: 50%;
    background: #ddd;*/ /* Màu xám nhạt */
    /*display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

        .nav-icons a:hover {
            background: #bbb;*/ /* Background tối hơn khi hover */
            /*color: #333;*/ /* Màu icon đậm hơn */
        /*}

        .profile-dropdown {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .profile-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 8px;
        }

        .dropdown-menu {
            min-width: 180px;
        }*/

/* Ảnh bìa */
.profile-header {
    position: relative;
    width: 100%;
    height: 450px;
    background: url('https://source.unsplash.com/1200x500/?friends') no-repeat center;
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
}

/* Nút chỉnh sửa ảnh bìa */
.edit-cover {
    position: absolute;
    bottom: 15px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.edit-cover i {
    margin-right: 5px;
}

/* Thẻ profile-card đè lên ảnh bìa */
.profile-container {
    position: relative;
    
    margin-top: -90px;
    margin-left: 40px;
}

/* Hộp thông tin cá nhân */
.profile-card {
    background: white;
    max-width:100%;
    width: 280px;
    text-align: center;
    padding: 20px;
    height:300px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: -50px;
    left: 0;
}

/* Ảnh đại diện */
.profile-avatar-container {
    position: relative;
    width: 100px;
    margin: 0 auto;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid white;
    object-fit: cover;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Icon chỉnh sửa ảnh đại diện */
.avatar-edit {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: white;
    border-radius: 50%;
    padding: 6px;
    cursor: pointer;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Tên & Email */
.profile-name {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
}

.profile-email {
    font-size: 14px;
    color: gray;
    margin-bottom: 10px;
}

/* Thống kê */
.profile-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
    font-size: 14px;
}

.profile-stats div {
    text-align: center;
}

.profile-stats span {
    font-weight: bold;
}

/* Nút chỉnh sửa */
.edit-profile-btn {
    background: #007bff;
    color: white;
    padding: 8px;
    width: 100%;
    border: none;
    border-radius: 8px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 14px;
}

.edit-profile-btn:hover {
    background: #0056b3;
}
/* HỘP MENU NGANG RIÊNG BIỆT */
.menu-container {
    max-width: 1100px;

    margin-top: 104px;
    margin-left: 330px;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
 
}

/* Danh sách menu */
.menu-list {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding-top: 20px;        
    margin: 0;
}

.menu-list li {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    transition: 0.3s;
}

.menu-list li:hover {
    color: #28a745;
}

.menu-list li i {
    margin-right: 8px;
}
.friend-box {
    padding: 15px;
    /*    padding-right: 30px;
*/
    padding-left: 25px;
    padding-bottom: 0;
    font-size: 16px;
    height: 80px;
    color: gray;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

    .friend-box p {
        padding-bottom: 0;
        margin-bottom: 0;
        font-size: 16px;
      
        color: gray;
    }
.friend-image p {
    width:5rem;
}
.ol, ul {
    padding-left: 0rem;
}
.friends-list {
display: flex;
align-items: center;
padding-left: 10px;
}

.friends-list img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid white;
object-fit: cover;
position: relative;
margin-left: -12px; /* Đè ảnh từ trái sang phải */
}

.friends-list img:nth-child(1) { z-index: 6; }
.friends-list img:nth-child(2) { z-index: 5; }
.friends-list img:nth-child(3) { z-index: 4; }
.friends-list img:nth-child(4) { z-index: 3; }
.friends-list img:nth-child(5) { z-index: 2; }
.friends-list img:nth-child(6) { z-index: 1; }
.friend-image {
display: flex;
flex-direction: column;
}
/* Nút cài đặt */
.setting-page {
width: 40px;
height: 40px;
background: #e4e6eb;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.setting-page i {
font-size: 18px;
color: #333;
}

/* Danh sách menu ngang */
.menu-list-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.menu-list-wrapper::-webkit-scrollbar {
    display: none;
}

.post-video {
    max-width: 660px !important;
}

.post-box {
    background: white;
    width: 100%;
 
   
}
.post-box .input-group textarea {
    border: none;
    resize: none;
    outline: none;
    height: 30px;
    border-radius: 25px;
/*    padding: 6px 55px;
*/    background: #e4e6eb;
}
.post-actions a {
    text-decoration: none;
    margin-right: 15px;
    color: #666;
    font-size: 14px;
}
/* Ẩn popup ban đầu */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 1000;
overflow: hidden;
}

/* Hiển thị popup khi có class active */
.popup-overlay.active {
visibility: visible;
opacity: 1;
}

/* Khung popup */
.popup-container {
background: white;
width: 500px;
border-radius: 10px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1001;
overflow-y: auto;
}

/* Header popup */
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border-bottom: 1px solid #ccc;
font-weight: bold;
font-size: 16px;
}

/* Nút đóng popup */
.popup-close {
font-size: 24px;
cursor: pointer;
color: #555;
}

/* Thông tin người dùng */
.popup-user {
display: flex;
align-items: center;
padding: 10px;
}

.popup-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}

.popup-username {
font-size: 14px;
font-weight: bold;
}

.popup-privacy {
font-size: 12px;
color: gray;
cursor: pointer;
}

/* Ô nhập nội dung */
.popup-input {
width: 100%;
border: none;
outline: none;
font-size: 18px;
padding: 10px;
min-height: 100px;
resize: none;
}

.popup-input::placeholder {
color: #777;
}

/* Các tùy chọn đăng bài */
/* --- 7. Footer Popup --- */
.popup-footer {
    padding: var(--base-padding);
    border-top: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0; /* Không co lại */
}

.popup-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

    .popup-options span {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
        padding: 0 8px;
    }

.popup-option-icons {
    display: flex;
    gap: 4px;
}

.popup-option {
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

    .popup-option:hover {
        background-color: var(--background-hover);
    }

    .popup-option i {
        font-size: 24px;
    }
        /* Màu icon chuyên nghiệp */
        .popup-option i.bi-image {
            color: #45bd62;
        }

        .popup-option i.bi-broadcast {
            color: #f73859;
        }

        .popup-option i.bi-emoji-smile {
            color: #f7b928;
        }

/* Nút đăng bài */
.popup-submit-btn {
    width: 100%;
    padding: 10px;
    background: var(--primary-color);
    color: white;
    font-weight: bold;
    font-size: 15px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s;
}

    .popup-submit-btn:hover {
        background: var(--primary-hover);
    }

    .popup-submit-btn:disabled {
        background: #e4e6eb;
        color: #bcc0c4;
        cursor: not-allowed;
    }




.upload-container {
/*width: 500px;*/
/*width:100%;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
position: relative;*/
}

/* Hộp tải ảnh */
.upload-area {
border: 2px dashed #ccc;
text-align: center;
padding: 30px;
border-radius: 10px;
cursor: pointer;
}

.upload-area img {
width: 50px;
}

.upload-text {
font-size: 16px;
font-weight: bold;
}

.upload-subtext {
font-size: 14px;
color: gray;
}



/* Vùng hiển thị ảnh */
#uploadedImageContainer {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: 10px;
width: 100%;
position: relative; /* Để các phần tử con có thể định vị tuyệt đối */
}

#uploadedImageContainer img,
#uploadedImageContainer video {
border-radius: 5px;
object-fit: cover;
}

/* Bố cục ảnh theo số lượng */
.one img,
.one video {
    width: 100%;
    max-width: 600px;
    max-height: 500px;
}
.one video {
    background: #2c2c2c;
}
.two video {
    background: #2c2c2c;
}

.three video:first-child {
    background: #2c2c2c;
}

.three video:nth-child(2),
.three video:nth-child(3) {
    background: #2c2c2c;
}


.four video:first-child {
    background: #2c2c2c;
}

.four video:nth-child(2),
.four video:nth-child(3),
.four video:nth-child(4) {
    background: #2c2c2c;
}


.five video:nth-child(1), .five video:nth-child(2) {
    background: #2c2c2c;
}

.five video:nth-child(3),
.five video:nth-child(4),
.five video:nth-child(5) {
    background: #2c2c2c;
}


.two img, .two video {
    width: 48%;
}

.three img:first-child,
.three video:first-child {
max-width: 453px;
width: 100%;
height: auto;
max-height: 320px;
}

.three img:nth-child(2),
.three img:nth-child(3),
.three video:nth-child(2),
.three video:nth-child(3) {

width: 48%;
height: auto;
max-height: 120px;
}

.four img:first-child,
.four video:first-child {
max-width: 490px;
width: 100%;
height: auto;
max-height: 320px;
}

.four img:nth-child(2),
.four img:nth-child(3),
.four img:nth-child(4),
.four video:nth-child(2),
.four video:nth-child(3),
.four video:nth-child(4) {
max-width: 160px;
width: 32%;
height: auto;
max-height: 120px;
}

.five img:nth-child(1),
.five video:nth-child(1),
.five img:nth-child(2),
.five video:nth-child(2) {
width: 48%;
}

.five img:nth-child(3),
.five video:nth-child(3),
.five img:nth-child(4),
.five video:nth-child(4),
.five img:nth-child(5),
.five video:nth-child(5) {
width: 30%;
position: relative;
}

.extra-count {
position: absolute;
bottom: 5px;
right: 5px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
}

/* Mobile upload */
.mobile-upload {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background: #f0f0f0;
border-radius: 8px;
margin-top: 15px;
}

.mobile-icon img {
width: 30px;
height: 30px;
}

.mobile-text {
flex-grow: 1;
text-align: left;
font-size: 14px;
margin-left: 10px;
}

.upload-btn {
background: #e0e0e0;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
}



/* Dropdown quyền riêng tư */
.privacy-dropdown {
position: absolute;
background: white;
border-radius: 5px;
padding: 5px;
width: 120px;
list-style: none;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
display: none;
}

.privacy-dropdown li {
padding: 5px;
cursor: pointer;
}

.privacy-dropdown li:hover {
background: #f0f0f0;
}

.hidden {
    display: none;
}

/* Nút đóng (X) trên khung tải ảnh */
/* Nút X ở bên phải ngoài cùng của thẻ upload-area */
.close-upload {
    position: absolute;
    top: 17%;
    right: 5%; /* Đưa nút X ra ngoài cùng bên phải */
    transform: translateY(-50%);
    background: gray;
    color: white;
    font-size: 18px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 32px;
    border-radius: 50%;
    cursor: pointer;

}

/* Hiển thị nút X khi khu vực tải ảnh xuất hiện */
#imageUploadContainer.active .close-upload {
    display: block;
}


.popup-content {
flex-grow: 1;
overflow-y: auto;
max-height: 60vh;
padding-bottom: 10px;
}

/* --- 1. Biến CSS và Thiết lập Chung --- */
:root {
    --primary-color: #28a745;
    --primary-hover: #34c759;
    --background-body: #f0f2f5;
    --background-card: #ffffff;
    --background-hover: #f0f2f5;
    --background-icon: #e4e6eb;
    --border-color: #ced0d4;
    --text-primary: #050505;
    --text-secondary: #65676b;
    --base-padding: 16px;
    --border-radius: 8px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--background-body);
    margin: 0;
    padding: 0;
}

/* Nút demo để mở popup */
.demo-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#openPopupBtn {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background-color: var(--primary-color);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s;
}

    #openPopupBtn:hover {
        background-color: var(--primary-hover);
    }



.popup-container {
    background: var(--background-card);
    width: 500px;
    max-width: 95%; /* Responsive */
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1001;
    /* Cấu trúc Flexbox cho Header/Body/Footer */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Quan trọng: Giới hạn chiều cao */
}

/* --- 3. Header Popup --- */
.popup-header {
    display: flex;
    justify-content: center; /* Căn giữa tiêu đề */
    align-items: center;
    padding: var(--base-padding);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    flex-shrink: 0; /* Không co lại */
}

    .popup-header h4 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: var(--text-primary);
    }

.popup-close {
    position: absolute;
    top: 50%;
    right: var(--base-padding);
    transform: translateY(-50%);
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    color: var(--text-secondary);
    background-color: var(--background-icon);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

    .popup-close:hover {
        background-color: #d8dadf;
    }

/* --- 4. Thân Popup (Vùng cuộn được) --- */
.popup-body {
    overflow-y: auto; /* CHỈ PHẦN NÀY CUỘN */
    flex-grow: 1; /* Lấp đầy không gian */
    padding: 10px;
}

.popup-user {
    display: flex;
    align-items: center;
    padding: var(--base-padding) 0; /* Bỏ padding ngang */
    gap: 10px;
    position: relative;
}

.popup-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.popup-username {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.popup-privacy {
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    background-color: var(--background-icon);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .popup-privacy:hover {
        background-color: #d8dadf;
    }

.privacy-dropdown {
    position: absolute;
    top: 60px; /* Dưới tên user */
    left: 50px; /* Dưới avatar */
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
    list-style: none;
    padding: 8px;
    margin: 0;
    min-width: 150px;
}

    .privacy-dropdown li {
        padding: 8px 12px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .privacy-dropdown li:hover {
            background-color: var(--background-hover);
        }

/* --- 5. Nội dung (Input/Upload) --- */
.popup-content {
    padding: 8px 0;
}

.popup-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 24px; /* Font to cho cảm giác "Bạn đang nghĩ gì?" */
    padding: 0;
    min-height: 100px;
    resize: none;
    font-family: inherit;
}

    .popup-input::placeholder {
        color: #8a8d91;
    }

/* --- 6. Vùng Upload Ảnh --- */
.upload-popup {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #f7f8fa;
    position: relative;
    padding: var(--base-padding);
}

.upload-container {
    position: relative;
}

.upload-area {
    background-color: var(--background-hover);
    border-radius: var(--border-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    cursor: pointer;
    border: 2px dashed #ccd0d5;
    transition: background-color 0.2s;
}

    .upload-area:hover {
        background-color: #e4e6eb;
    }

.upload-icon img {
    width: 40px;
    height: 40px;
    opacity: 0.6;
}

.upload-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 8px 0 0 0;
}

.upload-subtext {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.close-upload {
    position: absolute;
    top: -8px; /* Đặt lại vị trí */
    right: -8px;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--background-card);
    border: 1px solid var(--border-color);
}

    .close-upload:hover {
        background-color: #e4e6eb;
    }



/* Chỉnh sửa lại .image-actions để nằm trên ảnh */


/* Điều chỉnh nút button để không bị đẩy xuống */
.button-image {
position: absolute;
top: 10px;
left: 10px;
display: flex;
gap: 10px;
z-index: 20; /* Đặt mức cao hơn để luôn hiển thị */
}

.button-image button {
background: white;
border: none;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
gap: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Nếu cần nút đóng (X) nằm đúng vị trí */
.close-upload-image {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
z-index: 100; /* Đảm bảo hiển thị trên cùng */
background: gray;
color: white;
width: 30px;
height: 30px;
text-align: center;

line-height: 31px;
border-radius: 50%;
}
.post-box .input-group {
flex-grow: 1;
max-width: 100%;
}
.post-box .btn {
white-space: nowrap;
}

/* Mobile upload */
.mobile-upload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #f0f0f0;
    border-radius: 8px;
    margin-top: 15px;
}

.mobile-icon img {
    width: 30px;
    height: 30px;
}

.mobile-text {
    flex-grow: 1;
    text-align: left;
    font-size: 14px;
    margin-left: 10px;
}

.upload-btn {
    background: #e0e0e0;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
}



/* Dropdown quyền riêng tư */
.privacy-dropdown {
    position: absolute;
    background: white;
    border-radius: 5px;
    padding: 5px;
    width: 120px;
    list-style: none;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    display: none;
}

    .privacy-dropdown li {
        padding: 5px;
        cursor: pointer;
    }

        .privacy-dropdown li:hover {
            background: #f0f0f0;
        }

.hidden {
    display: none;
}

/* Nút đóng (X) trên khung tải ảnh */
/* Nút X ở bên phải ngoài cùng của thẻ upload-area */
.close-upload {
    position: absolute;
    top: 5%;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
    background: gray;
    color: white;
    font-size: 18px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 32px;
    border-radius: 50%;
    cursor: pointer;
}




.popup-content {
    flex-grow: 1;
    overflow-y: auto;
    max-height: 60vh;
    padding-bottom: 10px;
}

/* Khung giới thiệu */
.intro-box {
    max-width: 900px;
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

.intro-box h3 {
    font-size: 18px;
    font-weight: bold;
}

/* Nút chỉnh sửa */
.edit-btn {
    background: #e4e6eb;
    width: 100%;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

.edit-btn:hover {
    background: #d6d8db;
}

/* Thông tin cá nhân */
.info-item {
    display: flex;
    align-items: center;
    margin: 10px 0;
    font-size: 15px;
}

.info-item i {
    font-size: 18px;
    margin-right: 8px;
    color: gray;
}

.info-item span {
    font-weight: bold;
}

/* Ảnh đáng chú ý */
.highlighted-photos {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.photo-item {
    width: 48%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.photo-item img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
}

.photo-caption {
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
    font-weight: bold;
}

.Container-page {
display: flex;
justify-content: center; /* Căn giữa toàn bộ nội dung */
align-items: flex-start;
gap: 10px; /* Khoảng cách giữa sidebar và content */
max-width: 1600px; /* Giới hạn chiều rộng tối đa */
margin: auto; /* Đưa toàn bộ nội dung vào giữa trang */
}

/* Sidebar-left giữ khoảng cách hợp lý và căn trái */
.sidebar-left {
width: 410px; /* Độ rộng hợp lý */
margin-left: 40px;
}



/* Nội dung chính */
.content-middle {
    flex-grow: 1;
    max-width: 660px;
    padding-top: 10px;

}

.feed {
    margin: auto;
    width: 100%;
    background: white;
/*    padding: 15px;
*/    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    max-width: 660px;
}
.post-header {
    padding: 18px;
    display: flex;
    align-items: center;
/*    gap: 12px;
*/    border-bottom: 1px solid #f0f2f5;
}

.feed-content {
    padding: 16px 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #1c1e21;
}
/* Cấu trúc chung của ảnh */
.image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
/*    border-radius: 10px;
*/    overflow: hidden;
    width: 100%;
}

    /* Ảnh luôn full kích thước */
    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    /* Bố cục ảnh theo số lượng (tương tự #uploadedImageContainer) */
    .image-container.one img {
        width: 100%;
        width: fit-content;
    }

    .image-container.two img {
        width: 48%;
    }

    .image-container.three img:first-child {
        max-width: 660px;
        width: 98%;
        height: auto;
        max-height: 320px;
    }

    .image-container.three img:nth-child(2),
    .image-container.three img:nth-child(3) {
        width: 48%;
        height: auto;
        max-height: 180px;
    }

    .image-container.four img:first-child {
        /* max-width: 455px;*/
        max-width: 500px;
        width: 100%;
        height: auto;
        max-height: 320px;
    }

    .image-container.four img:nth-child(2),
    .image-container.four img:nth-child(3),
    .image-container.four img:nth-child(4) {
        max-width: 160px;
        width: 31%;
        height: auto;
        max-height: 120px;
    }

    .image-container.five img:nth-child(1),
    .image-container.five img:nth-child(2) {
        width: 48%;
    }

    .image-container.five img:nth-child(3),
    .image-container.five img:nth-child(4),
    .image-container.five img:nth-child(5) {
        width: 30%;
        position: relative;
    }



.icon-option {
display: flex;
align-items: center;
justify-content: center;
min-width: 70px; /* Đảm bảo tất cả icon-option có kích thước đồng đều */
height: 30px; /* Chiều cao cố định */
padding: 8px;
font-size: 14px;
color: #555;
cursor: pointer;
transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
border-radius: 8px;
}

/* Kích thước icon đồng đều */
.icon-option i {
font-size: 18px;
margin-right: 2px;
}

/* Hover hiệu ứng với khung vuông xám */
.icon-option:hover {
background: #e0e0e0;
color: #007bff;
}


/* Thêm gạch ngang trên và dưới */
.divider {
border-top: 1px solid #d0cbcb;
padding: 8px 0; /* Tạo khoảng cách giữa các phần */
}
.feed-content {
    padding: 16px 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #1c1e21;
}

.feed-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px; /* Khoảng cách 5px với hình ảnh */
    font-size: 14px;
    color: #777;
    padding: 0 13px;
}


.feed-actions {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 8px;
    padding: 8px 8px;
}
    .feed-actions > span,
    .comment-btn {
        flex: 1;
        padding: 8px 12px;
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        font-size: 14px;
        color: #65676b;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

        .feed-actions > span:hover,
        .comment-btn:hover {
            background: #f0f2f5;
            color: #667eea;
        }

    .feed-actions i {
        font-size: 18px;
    }
/* Like Button */
.like-container {
    position: relative;
    display: inline-block;
}

/* Hộp chứa reaction */
.reaction-box {
    position: absolute;
    bottom: 3.2rem;
    left: 0;
    background: white;
    padding: 8px;
    border-radius: 30px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none; /* Ngăn nó nhận sự kiện khi ẩn */
}

.feed-actions .reaction-box span {
    font-size: 26px;
}

/* Hiển thị khi hover */
.like-container.hover-active .reaction-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Các icon cảm xúc */
.reaction {
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.bookmark-icon {
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #65676b;
    font-size: 18px;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.bookmark-icon {
    font-size: 18px;
}

.reaction:hover {
    transform: scale(1.2);
}

.like-container {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
}

.like-button {
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: #65676b;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
}

    .like-button:hover {
        background: #f0f2f5;
        color: #667eea;
    }

    .like-button.liked {
        color: #667eea;
    }

    /* Hiệu ứng icon */
    .like-button i {
        transition: transform 0.2s ease-in-out;
    }

    /* Khi hover vào nút Like, icon sẽ phóng to */
    .like-button:hover i {
        transform: scale(1.3);
    }

    .like-button.liked .main-reaction-icon {
        animation: likeAnimation 0.5s ease;
    }

.main-reaction-icon {
    font-size: 14px;
}

.main-reaction-text {
    font-weight: 600;
}



/* Responsive */
@media (max-width: 992px) {
    .feed-actions span {
        font-size: 13px;
    }
    .content-middle {
        flex-grow: 1;
        max-width: 660px;
        padding: 10px;
        margin-left: 0 !important;
    }
    .profile-container {
        width: 100%;
        margin: auto;
    }
    .profile-card {
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
    }
    .friend-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: white;
        padding: 2px;
        margin-top: 10px;
    }

/* Friend-image nằm trên */
.friend-image {
   /* width: 100%;*/
    text-align: center;
    /*margin-bottom: 15px;*/ /* Tạo khoảng cách với post-box */
}

    /* Post-box nằm dưới */
    .post-box {
        width: 100%;
        /*        background: #f0f2f5;
*/      padding: 0px 5px;
        border-radius: 10px;
    }

/* Chỉnh danh sách ảnh bạn bè */
.friends-list {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.friends-list img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
}

    .menu-container {
        max-width: 90%;
        margin: auto;
        margin-top: 265px;
       
    }
    .menu-list {
        display: flex;
        justify-content: space-around;
        list-style: none;
        padding-top: 10px;
        padding-bottom: 5px;
        margin: 0;
    }
    .menu-list li {
        padding: 5px 5px;
        font-size: 12px;
    }
    .post-box .input-group textarea {
        border: none;
        resize: none;
        outline: none;
        height: 30px;
        border-radius: 25px;
        padding: 6px 10px;
        background: #e4e6eb;
    }
    .friend-box {
        height: 50px;
    }


    .Container-page {
        flex-direction: column; /* Chuyển về dạng cột */
        align-items: center;
    }

.sidebar-left{
    width: 100%;
    margin: auto;
}
.intro-box {
    max-width: 770px;
    margin: auto;
    margin-top: 10px;
}
    .content-middle {
        width: 100%;
        margin-left: 0;
    }

.intro-box {
    max-width: 100%;
}

.highlighted-photos {
    flex-direction: column;
}

.photo-item {
    width: 100%;
}
.edit-cover{
    display: none;
}
}



.popup-container-info {
    background: #fff;
    width: 700px;
    max-width: 95%;
    border-radius: 10px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
}

.popup-header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #ddd;
    font-size: 17px;
    font-weight: bold;
}

.popup-title {
    text-align: center;
    flex: 1;
    margin-right: 24px;
}

.popup-close-info {
    font-size: 24px;
    cursor: pointer;
    color: #555;
}

.popup-body-info {
    padding: 20px;
    flex: 1;
}

.popup-footer-info {
    padding: 16px;
    border-top: 1px solid #eee;
    text-align: right;
}

/*.popup-submit-btn {
    background-color: #1877f2;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
}

    .popup-submit-btn:hover {
        background-color: #155db2;
    }*/

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-family: Arial, sans-serif;
}

.section-title {
    font-weight: bold;
    font-size: 16px;
}

.section-edit {
    font-size: 14px;
    color: #1877f2;
    text-decoration: none;
}

.avatar-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.avatar-img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Ảnh bìa */
.cover-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cover-img {
    width: 100%;
    max-width: 500px;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}