.welcome-and-new-notifications {
    /* ... */
    gap: 8px; /* Tạo khoảng cách giữa các item con */
}
.welcome-avatar-link {
    display: inline-block; 
    line-height: 0; 
}
.welcome-bar-avatar {
    width: 32px; 
    height: 32px;
    border-radius: 50%; 
    object-fit: cover; 
    border: 1px solid #ced4da; 
}
.welcome-text {
    /* ... */
    display: flex; 
    align-items: center;
}
.welcome-text span:first-child { /* "Xin chào" */
    margin-right: 4px;
}
.welcome-username-link { /* Link cho username */
    text-decoration: none;
    color: inherit; 
}
.welcome-username-link strong {
    color: #C71585;
    font-weight: 600;
}
.welcome-username-link:hover strong {
    text-decoration: underline;
}


    .custom-top-notification-bar {
        background-color: #f0f0f0; /* Hoặc màu bạn muốn, ví dụ #FFF0F5 cho tông hồng */
        padding: 10px 15px;
        margin-bottom: 20px; /* Khoảng cách với nội dung bên dưới */
        border-radius: 5px; /* Bo góc nhẹ */
        display: flex;
        align-items: center;
        justify-content: space-between; /* Đẩy icon chuông (nếu có) sang phải */
        border: 1px solid #e0e0e0; /* Viền nhẹ */
    }
    .welcome-and-new-notifications {
        display: flex; /* Để các span và a nằm trên cùng hàng */
        align-items: center;
    }
    .welcome-text {
        color: #333;
        margin-right: 8px;
    }
    .welcome-text strong {
        color: #C71585; /* Màu nhấn cho tên user */
    }
    .new-notification-link {
        color: red !important; /* Ưu tiên màu đỏ */
        font-weight: bold;
        text-decoration: none;
    }
    .new-notification-link:hover {
        text-decoration: underline;
    }
    .no-notification-text {
        color: #555;
    }

    /* CSS cho icon chuông bên phải (nếu bạn giữ lại) */
    .quick-bell-link a {
        text-decoration: none;
        display: flex; /* Để icon và số lượng nằm cạnh nhau */
        align-items: center;
    }
    .bell-icon {
        width: 22px; /* Kích thước icon chuông */
        height: 22px;
        vertical-align: middle;
    }
    .notification-count-badge {
        color: red;
        font-weight: bold;
        margin-left: 4px;
        font-size: 0.9em;
    }

    /* Căn giữa tiêu đề trang nếu cần */
    .site-title-container h1 {
        text-align: center;
        color: #333; /* Hoặc màu tiêu đề bạn muốn */
        margin-top: 0; /* Bỏ margin top nếu thanh thông báo đã có margin-bottom */
        margin-bottom: 25px; /* Khoảng cách với section title "Bài viết mới nhất" */
    }
    /* CSS cho section title "Bài viết mới nhất" đã có trong style.css của bạn rồi thì bỏ qua */
    .section-title {
        text-align: center;
        color: #B30059; /* Hoặc màu bạn muốn */
        margin-top: 20px;
        margin-bottom: 25px;
        font-size: 1.8em; /* Kích thước chữ */
    }
</style> /* assets/css/style.css */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden; /* Ngăn cuộn ngang ở cấp độ html */
    -webkit-text-size-adjust: 100%; /* Ngăn iOS tự động phóng to font */
    -ms-text-size-adjust: 100%; /* Ngăn IE tự động phóng to font */
}

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    background-color: #FFD1DC; /* Light pink background */
    color: #333;
    overflow-x: hidden; /* Ngăn cuộn ngang từ hiệu ứng sparkles hoặc các phần tử khác */
    position: relative; /* Cần thiết cho pseudo-elements */
    padding-top: 64px; /* Dành không gian cho nav cố định (chiều cao nav ~44px + 20px khoảng cách) */
}

/* Sparkle effect from the image */
body::before, body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Cho phép click xuyên qua */
    z-index: -1; /* Đặt phía sau nội dung */
}

body::before {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1.2px);
    background-size: 40px 40px; /* Mật độ sparkles lớn hơn */
    animation: sparkle 30s linear infinite;
}

body::after {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0.8px, transparent 1px);
    background-size: 25px 25px; /* Mật độ sparkles nhỏ hơn */
    animation: sparkle-alt 40s linear infinite reverse; /* Animation khác */
}

@keyframes sparkle {
    from { background-position: 0 0; }
    to { background-position: -400px -400px; }
}

@keyframes sparkle-alt {
    from { background-position: 0 0; }
    to { background-position: 300px 300px; }
}


.container {
    width: 80%;
    max-width: 1000px;
    margin: 20px auto; /* margin-top: 20px tạo khoảng cách với nav (sau padding-top của body) */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white cho content box */
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

nav {
    background-color: #FF69B4; /* Deep pink cho nav */
    padding: 10px 0;
    text-align: center;
    border-radius: 0 0 10px 10px; /* Optional: Điều chỉnh border-radius cho nav cố định */
    position: fixed; /* Làm nav cố định */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Đảm bảo nav luôn ở trên cùng */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: thêm bóng mờ */
}

nav a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

/* ============================ */
/* === CÁC THÀNH PHẦN CHUNG === */
/* ============================ */
.section-title { /* Tiêu đề chung cho các section */
    text-align: center;
    margin-top: 30px;
    margin-bottom: 25px;
    color: #B30059;
    font-size: 2em;
    font-weight: bold;
}

/* General Forms */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; color: #C71585; font-weight: bold; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea {
    width: 100%; /* box-sizing: border-box sẽ xử lý padding và border bên trong */
    padding: 10px;
    border: 1px solid #FFB6C1;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input:focus, .form-group textarea:focus {
    border-color: #FF69B4; box-shadow: 0 0 5px rgba(255, 105, 180, 0.5); outline: none;
}
.form-group textarea { min-height: 150px; resize: vertical; }

/* General Buttons */
button, .button {
    background-color: #FF69B4; color: white; padding: 10px 20px; border: none;
    border-radius: 5px; cursor: pointer; text-decoration: none; display: inline-block;
    font-size: 1em; font-weight: bold; transition: background-color 0.3s ease, transform 0.1s ease;
}
button:hover, .button:hover { background-color: #FF1493; }
button:active, .button:active { transform: translateY(1px); }

.button-small { padding: 7px 12px; font-size: 0.85em; }
.button-small.accept { background-color: #4CAF50; }
.button-small.accept:hover { background-color: #45a049; }
.button-small.decline { background-color: #f44336; }
.button-small.decline:hover { background-color: #da190b; }
.button-small.button-grey { background-color: #ccc; color: #333; }
.button-small.button-grey:hover { background-color: #bbb; }
.button-danger { background-color: #f44336; border-color: #d32f2f; }
.button-danger:hover { background-color: #d32f2f; }
.button-link-delete { background: none; border: none; color: red; text-decoration: underline; cursor: pointer; padding: 0; font-size: 0.85em; }
.button-link-delete:hover { color: darkred; }

/* Messages */
.error-message { color: #D8000C; background-color: #FFD2D2; padding: 12px; border: 1px solid #D8000C; border-radius: 5px; margin-bottom: 15px; }
.success-message { color: #4F8A10; background-color: #DFF2BF; padding: 12px; border: 1px solid #4F8A10; border-radius: 5px; margin-bottom: 15px; }
.error-message p, .success-message p { margin: 0; }

/* ============================ */
/* === POST CARD (TRANG CHỦ, PROFILE) === */
/* ============================ */
.post-card {
    background-color: #FFF0F5; border: 1.3px solid #FFB6C1; border-radius: 10px;
    padding: 15px 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.post-card h2, .post-card h4 { margin-top: 0; margin-bottom: 8px; } /* Tiêu đề trong card */
.post-card h2 a, .post-card h4 a { color: #C71585; text-decoration: none; font-size: 1.3em; }
.post-card h2 a:hover, .post-card h4 a:hover { text-decoration: underline; }
.post-card .post-meta { font-size: 1em; color: #555; margin-bottom: 10px; }
.post-card .post-meta a{ color: #FF1493; text-decoration: none; }
.post-card .post-content {
    margin-bottom: 12px; font-size: 0.95em; line-height: 1.6; color: #444;
    word-wrap: break-word; /* Đảm bảo ngắt dòng cho văn bản dài */
    overflow-wrap: break-word;
}
.post-card .post-actions a { margin-right: 10px; color: #FF1493; text-decoration: none; font-size: 0.9em; }
.post-card .post-actions a:hover { text-decoration: underline; }

/* Profile specific */
.profile-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}
.cover-photo {
    width: 100%;
    height: 250px;
    background-color: #f0f0f0;
    background-size: cover;
    background-position: center;
    border-radius: 10px 10px 0 0;
}
.profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid white;
    margin-top: -75px; /* Chồng lên ảnh bìa */
    background-color: #ccc;
    background-size: cover;
    background-position: center;
    display: inline-block;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.profile-picture.active-user-avatar {
    border: 5px solid gold;
    box-shadow: 0 0 15px gold;
}
.profile-info h1 {
    margin-top: 10px;
    color: #C71585;
}

.profile-nav { /* Dùng cho nav tab trên trang profile cũ, có thể không còn dùng nếu đã chuyển sang .profile-sub-navigation */
    text-align: center;
    margin-bottom: 20px;
}
.profile-nav a {
    margin: 0 10px;
    color: #FF1493;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
}
.profile-nav a:hover, .profile-nav a.active {
    background-color: #FFF0F5;
}

/* Các nút điều hướng phụ (Bạn bè, Lời mời, Lịch sử xem) */
.profile-sub-navigation {
    margin-top: 15px;
    margin-bottom: 0;
    text-align: center;
    padding-bottom: 0;
    border-bottom: none;
}

/* Nút "Chỉnh sửa trang cá nhân" */
.edit-profile-button-container {
    text-align: center;
    margin-top: 3px;
    margin-bottom: 15px;
}

.button-profile-nav {
    margin: 5px 3px; padding: 8px 15px; font-size: 0.9em; background-color: #FF85B4;
    border: 1px solid #FF69B4; color: white !important; text-decoration: none !important;
    border-radius: 5px; display: inline-block; transition: background-color 0.3s ease, transform 0.1s ease;
    font-weight: 500;
}
.button-profile-nav:hover { background-color: #FF69B4; transform: translateY(-1px); }
.button-profile-nav:active { transform: translateY(0px); }

/* Rank Display */
.user-rank-display { display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.rank-icon { height: 64px; width: auto; margin-right: 8px; vertical-align: middle; }
.rank-name { font-size: 1.1em; font-weight: bold; }
.rank-icon-small { height: 56px; width: auto; margin-right: 4px; vertical-align: middle; position: relative; top: -1px; }
.rank-name-small { font-size: 0.8em; }
.post-meta .rank-icon-small { margin-left: 5px; }

/* ============================ */
/* === TRANG XEM BÀI VIẾT (VIEW POST) === */
/* ============================ */
.post-full h1 { color: #B30059; margin-top: 0; margin-bottom: 10px; font-size: 2.2em; line-height: 1.3; text-align: left; }
.post-full .post-meta { font-size: 0.9em; color: #666; margin-bottom: 20px; border-bottom: none dashed #FFD1DC; padding-bottom: 15px; text-align: left; display: flex; align-items: center; flex-wrap: wrap;}
.post-full .post-meta > * { margin-right: 5px; } .post-full .post-meta > *:last-child { margin-right: 0; }
.post-full .post-meta a{ color: #FF1493; text-decoration: none; font-weight: bold; }

.post-music { margin-bottom: 20px; padding: 10px; background-color: #FFF8FA; border-radius: 5px; }
.post-music p { margin:0 0 10px 0; font-weight:bold; color: #555; }
.post-music audio { width:100%; }

.post-content-full { margin-bottom: 30px; line-height: 1.75; word-wrap: break-word; overflow-wrap: break-word; font-size: 1.05em; color: #3E3E3E; }
.post-content-full p, .post-content-full li > p { text-align: justify !important; margin-bottom: 1em; }
.post-content-full ul {list-style-type: none; padding-left: 0; margin:0;}
.post-content-full li { margin-bottom: 1.2em;}
.post-content-full li > p:last-child { margin-bottom: 0; }
.post-content-full img { max-width: 100%; height: auto; display: block; margin: 15px auto; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.post-content-full blockquote { border-left: 5px solid #FFB6C1; padding: 10px 20px; margin: 20px 0 20px 25px; font-style: italic; color: #555; background-color: #FFF8FA; border-radius: 0 5px 5px 0; }
.post-content-full blockquote p { text-align: justify !important; }
.post-content-full blockquote p:last-child { margin-bottom: 0; }
.post-content-full pre { background-color: #2d2d2d; color: #f8f8f2; border: none; padding: 15px; border-radius: 5px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; font-family: 'Courier New', Courier, monospace; font-size: 0.95em; margin: 1.5em 0; text-align: left !important; }
.post-content-full code:not(pre code) { background-color: #fce4ec; color: #c2185b; padding: 2px 5px; border-radius: 4px; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; }
.post-content-full table { width: 100%; border-collapse: collapse; margin: 1.5em 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1); text-align: left !important; }
.post-content-full th, .post-content-full td { border: 1px solid #FFD1DC; padding: 10px; text-align: left; }
.post-content-full th { background-color: #FFF0F5; color: #C71585; font-weight: bold; }
.post-content-full tr:nth-child(even) { background-color: #FFF8FA; }

.post-actions { margin-top: 25px; padding-top: 15px; border-top: 1px solid #FFD1DC; }
.post-likers { margin-top: 12px; padding-top: 8px; border-top: 1px dotted #FFDDE5; font-size: 0.88em; color: #585858; line-height: 1.5; }
.post-likers .likers-label { font-weight: bold; color: #C71585; margin-right: 6px; }
.post-likers a { color: #E91E63; text-decoration: none; font-weight: 500; }
.post-likers a:hover { text-decoration: underline; color: #AD1457; }

/* Comments Section */
.comments-section { margin-top: 30px; padding-top: 20px; border-top: 1px solid #FFB6C1; } /* Giữ nguyên từ CSS gốc của bạn */
.comments-section h3{ color: #B30059; margin-bottom: 15px; text-align: left; }
.comment { background-color: #fff5f8; padding: 12px 15px; border-radius: 8px; margin-bottom: 12px; border-left: 4px solid #FF69B4; text-align: left; }
.comment .comment-author { font-weight: bold; color: #C71585; }
.comment .comment-date { font-size: 0.8em; color: #777; margin-left: 8px; }
.comment p.comment-content-text { margin: 5px 0 0 0; line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; } /* Đảm bảo ngắt dòng */
.comment-reply { margin-left: 35px; border-left-color: #FFB6C1; } /* Đã có trong CSS của bạn */
.comment-form textarea { min-height: 80px; } /* Đã có trong CSS của bạn */
.comment-form button { margin-top: 5px; }
.comment details summary { cursor: pointer; color: #FF1493; font-size: 0.9em; display: inline-block; padding: 3px 0; }
.comment details summary:hover { text-decoration: underline; }

/* Example of the text from image (nếu còn dùng) */
.special-greeting h1 {
    font-family: 'Brush Script MT', 'cursive';
    color: #E91E63;
    font-size: 2.8em;
    text-align: center;
    margin-bottom: 10px;
}
.special-greeting p {
    text-align: center;
    font-size: 1.1em;
    color: #555;
    line-height: 1.6;
}

/* ============================ */
/* === SWIPERJS SLIDER (TRANG CHỦ) === */
/* ============================ */
.post-slider-simple {
    width: 100%; margin: 25px auto; overflow: hidden; border-radius: 8px;
    padding-bottom: 50px; position: relative; background-color: #fff;
}
.post-slider-simple > h2 { text-align: center; margin-top: 20px; margin-bottom: 20px; color: #B30059; font-size: 1.8em; font-weight: bold; }
.swiper-slide { display: flex; justify-content: center; align-items: stretch; box-sizing: border-box; padding: 0 10px 10px 10px; }
.post-card-slider-simple {
    background-color: #FFF9FB; border: 1px solid #FFE4E1; border-radius: 6px; padding: 20px 25px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05); width: 100%; display: flex; flex-direction: column;
    min-height: 380px; text-align: left; box-sizing: border-box; overflow: hidden;
}
.post-card-slider-simple h3 {
    color: #B30059; margin-top: 0; margin-bottom: 10px; font-size: 1.5em; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.post-card-slider-simple h3 a { color: inherit; text-decoration: none; }
.post-card-slider-simple h3 a:hover { text-decoration: underline; color: #FF1493; }
.post-meta-slider-simple { font-size: 0.8em; color: #555; margin-bottom: 12px; line-height: 1.4; word-break: break-word; }
.post-meta-slider-simple a { color: #FF69B4; text-decoration: none; font-weight: bold; }
.post-content-slider-preview-simple {
    font-size: 0.95em; line-height: 1.6; color: #484848; margin-bottom: 15px; flex-grow: 1;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
    max-height: calc(1.6em * 6);
    word-wrap: break-word; overflow-wrap: break-word; /* Thêm để chắc chắn */
}
.post-actions-slider-simple { margin-top: auto; padding-top: 10px; text-align: left; }
.button-slider-simple {
    background-color: #FF69B4; color: white !important; padding: 9px 18px; border-radius: 5px;
    text-decoration: none !important; font-size: 0.9em; font-weight: bold; transition: background-color 0.3s ease;
    border: none; cursor: pointer; display: inline-block;
}
.button-slider-simple:hover { background-color: #FF1493; color: white !important; }
.swiper-button-next, .swiper-button-prev {
    color: #FF1493 !important; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%;
    width: 30px !important; height: 30px !important; margin-top: -15px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: background-color 0.2s ease;
    right: 20px; left: auto;
}
.swiper-button-prev { left: 20px; right: auto; }
.swiper-button-next:hover, .swiper-button-prev:hover { background-color: rgba(255, 255, 255, 0.85); }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 13px !important; font-weight: bolder; }
.swiper-pagination-bullet { background: #FFC0CB !important; opacity: 0.5 !important; width: 8px !important; height: 8px !important; margin: 0 4px !important; }
.swiper-pagination-bullet-active { background: #FF69B4 !important; opacity: 1 !important; }
.swiper-pagination { bottom: 15px !important; }


/* ============================ */
/* === TRANG TÌM KIẾM (SEARCH PAGE) === */
/* ============================ */
.search-page-container .section-title,
.notifications-page .section-title,
.history-page .section-title,
.search-users-page-container .section-title {
    text-align: center; color: #B30059; margin-bottom: 30px; font-size: 2em;
}

/* Form tìm kiếm chung */
.user-search-form, .user-search-form-inline {
    display: flex; gap: 0; max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 30px;
}
.user-search-form input[type="text"], .user-search-form-inline input[type="text"] {
    flex-grow: 1; padding: 12px 15px; border: 1px solid #FFB6C1; border-right: none;
    border-radius: 8px 0 0 8px; font-size: 1em; outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.user-search-form input[type="text"]:focus, .user-search-form-inline input[type="text"]:focus {
    border-color: #FF69B4; box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.25);
}
.user-search-form button.button, .user-search-form-inline button.button {
    border-radius: 0 8px 8px 0; padding: 12px 25px; font-size: 1em; white-space: nowrap;
}

/* Danh sách kết quả tìm kiếm */
.search-results-mixed-list, .search-results-list-users { list-style-type: none; padding: 0; max-width: 750px; margin: 20px auto; }
.search-result-item-mixed, .search-results-list-users li {
    display: flex; flex-direction: column;
    padding: 15px; border: 1px solid #FFDDE5; background-color: #fff;
    border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative;
}
.search-results-list-users li { flex-direction: row; align-items: center; justify-content: space-between; }

.result-type-badge {
    position: absolute; top: 10px; right: 10px; font-size: 0.75em; padding: 3px 8px;
    border-radius: 4px; color: white; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px;
}
.user-badge { background-color: #2196F3; } .post-badge { background-color: #4CAF50; }

.search-result-item-mixed .result-link, .search-results-list-users .user-link { display: flex; align-items: flex-start; text-decoration: none; width: 100%; color: #333; }
.search-results-list-users .user-link { align-items: center; flex-grow: 1;}
.search-result-item-mixed img, .search-results-list-users img { width: 45px; height: 45px; border-radius: 50%; margin-right: 15px; border: 1px solid #eee; object-fit: cover; flex-shrink: 0; }
.search-result-item-mixed .result-info, .search-results-list-users .user-info { display: flex; flex-direction: column; flex-grow: 1; }
.search-results-list-users .user-info { flex-direction: row; align-items: baseline; gap: 5px;}
.search-result-item-mixed .result-name, .search-results-list-users .username { color: #C71585; font-weight: bold; font-size: 1.15em; margin-bottom: 5px; }
.search-result-item-mixed .result-link:hover .result-name, .search-results-list-users .user-link:hover .username { text-decoration: underline; color: #FF1493; }
.search-results-list-users .username { margin-bottom: 0; }
.search-result-item-mixed .result-author { font-size: 0.8em; color: #777; margin-bottom: 8px; }
.search-result-item-mixed .result-author a { color: #FF69B4; text-decoration: none; }
.search-result-item-mixed .result-author a:hover { text-decoration: underline; }
.search-result-item-mixed .result-preview {
    font-size: 0.9em; color: #555; line-height: 1.5; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 5px;
    word-wrap: break-word; overflow-wrap: break-word; /* Đảm bảo ngắt dòng */
}
.search-results-list-users .email-preview { font-size: 0.85em; color: #777; }
.search-result-item-mixed .result-actions, .search-results-list-users .friend-action-buttons { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #f0f0f0; text-align: right; }
.search-results-list-users .friend-action-buttons { border-top: none; padding-top: 0; margin-left: 15px; text-align: left; }
.friend-action-buttons .status-text { font-size: 0.85em; padding: 7px 12px; border-radius: 4px; margin-left: 5px; }
.friend-action-buttons .status-text.friend { background-color: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7; }
.friend-action-buttons .status-text.pending { background-color: #FFF3E0; color: #E65100; border: 1px solid #FFCC80; }


/* Style cho trang danh sách bạn bè (view_friends.php) */
.view-friends-page .section-title {
    text-align: center;
    color: #B30059;
    margin-bottom: 30px;
    font-size: 1.8em;
}

.friends-grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 10px 0;
    max-width: 800px;
    margin: 0 auto;
}

.friend-grid-item {
    width: 100px;
    text-align: center;
    margin-bottom: 15px;
}

.friend-grid-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.friend-grid-item a:hover {
    background-color: #FFF0F5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.friend-grid-item img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
    border: 2px solid #FFC0CB;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.friend-grid-username {
    font-size: 0.85em;
    color: #C71585;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
    display: block;
}

/* ============================ */
/* === RESPONSIVE DESIGN === */
/* ============================ */
@media (max-width: 768px) {
    nav {
        flex-direction: column; /* Cho nav items xếp chồng nếu nav là flex container */
        /* Nếu nav không phải flex, các 'a' sẽ tự xuống dòng nếu không đủ chỗ hoặc text-align: center giúp căn giữa */
        padding: 10px;
    }
    nav a { margin: 8px 0; font-size: 0.95em;}
    /* Nếu có form tìm kiếm trong nav */
    nav form { margin: 8px auto; width: 90%; max-width: 400px; display: flex; }
    nav form input[type="text"] { flex-grow: 1; width: auto; /* Cho input chiếm không gian còn lại */ }
    nav form button { white-space: nowrap; }


    .container {
        width: 95%; /* Container chiếm gần hết chiều rộng */
        padding: 15px; /* Padding bên trong container */
        /* Xóa padding-top: 70px; ở đây.
           padding-top của body (64px) và margin-top của .container (20px) đã xử lý khoảng cách với nav.
           padding: 15px; ở trên đã bao gồm padding-top: 15px cho nội dung bên trong container.
        */
    }
    .post-slider-simple { width: 100%; padding-bottom: 45px; }
    .post-card-slider-simple { min-height: 280px; padding: 15px; }
    .post-card-slider-simple h3 { font-size: 1.3em; }
    .post-content-slider-preview-simple { font-size: 0.9em; -webkit-line-clamp: 4; max-height: calc(1.5em * 4); }

    .button-profile-nav {
        display: block;
        width: auto;
        max-width: 260px;
        margin: 8px auto;
        padding: 10px 15px;
        font-size: 0.95em;
    }

    /* Điều chỉnh cho nút "Chỉnh sửa trang cá nhân" nếu cần đồng bộ với .button-profile-nav trên mobile */
    .edit-profile-button-container .button {
        /* display: block; */ /* Bỏ comment nếu muốn nó block */
        /* max-width: 260px; */ /* Đồng bộ max-width */
        /* margin-left: auto; margin-right: auto; */
    }


    .user-search-form, .user-search-form-inline {
        max-width: 95%;
        flex-direction: column;
        gap: 10px;
    }
    .user-search-form input[type="text"], .user-search-form-inline input[type="text"] {
        border-radius: 8px;
        border-right: 1px solid #FFB6C1; /* Thêm lại border phải khi input đứng một mình */
    }
    .user-search-form button.button, .user-search-form-inline button.button {
        border-radius: 8px;
        width: 100%;
    }

    .search-results-list-users li {
        flex-direction: column;
        align-items: flex-start;
    }
    .search-results-list-users .friend-action-buttons {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        text-align: left; /* Hoặc center tùy ý */
    }
    .search-results-list-users .friend-action-buttons form {
        margin-bottom: 5px;
        /* display: block; */ /* Có thể cần nếu button không full width */
    }
     .search-results-list-users .friend-action-buttons .button-small,
     .search-results-list-users .friend-action-buttons .status-text {
        width: 100%; /* Làm cho các nút và status text chiếm toàn bộ chiều rộng trên mobile */
        text-align: center;
        margin-left: 0; /* Reset margin-left cho status-text */
        margin-bottom: 5px; /* Thêm khoảng cách giữa các nút nếu xếp chồng */
    }
    .search-results-list-users .friend-action-buttons .status-text:last-child,
    .search-results-list-users .friend-action-buttons .button-small:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    body {
        padding-top: 54px; /* Giảm padding-top của body nếu nav thấp hơn trên màn hình rất nhỏ */
                           /* Điều chỉnh dựa trên chiều cao thực tế của nav sau khi thay đổi */
    }
    nav a { font-size: 0.85em; margin: 0 8px; }
    nav form input[type="text"] { font-size: 0.8em; }
    nav form button { font-size: 0.8em; padding: 8px 12px; }

    .post-card-slider-simple h3 { font-size: 1.2em; }
    .post-content-slider-preview-simple { font-size: 0.85em; -webkit-line-clamp: 3; max-height: calc(1.5em * 3); }
    .button-slider-simple { font-size: 0.85em; padding: 8px 15px; }
    .swiper-button-next, .swiper-button-prev { display: none; }
    /* .container padding-top đã được xử lý bởi body padding-top và container margin-top */

    .section-title { font-size: 1.6em; margin-bottom: 20px; }
    .post-full h1 { font-size: 1.8em; }

    .friends-grid-container {
        gap: 15px;
    }
    .friend-grid-item {
        width: 80px;
    }
    .friend-grid-item img {
        width: 60px;
        height: 60px;
    }
    .friend-grid-username {
        font-size: 0.8em;
        max-width: 70px;
    }
}

@media (max-width: 400px) {
    nav a { margin: 0 5px; } /* Giảm thêm margin cho nav links */
    body {
      /* padding-top: 50px; */ /* Cân nhắc lại nếu nav tiếp tục thay đổi chiều cao */
    }
    .friends-grid-container {
        gap: 10px;
        justify-content: space-around;
    }
    .friend-grid-item {
        width: 70px;
    }
    .friend-grid-item img {
        width: 50px;
        height: 50px;
    }
     .friend-grid-username {
        font-size: 0.75em;
        max-width: 60px;
    }
}