/* ==========================================================================
   PHÂN HỆ DIỄN ĐÀN TRAO ĐỔI KINH NGHIỆM & KHO TRI THỨC NGHIỆP VỤ NỘI BỘ
   Màu sắc chuẩn lực lượng CAND: Xanh lục đậm uy nghiêm, Đỏ sao vàng danh dự, Xám trang nhã
   ========================================================================== */

/* 1. KHUNG CHÍNH (CONTAINER) */
.forum-container {
    padding: 0 4px 40px 4px;
    max-width: 1380px;
    width: 100%;
    margin: 0 auto;
    font-family: inherit;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* 2. BANNER CHÀO MỪNG TRANG TRỌNG */
/* 2. BANNER CHÀO MỪNG (Tinh gọn trên Desktop, ẩn hoàn toàn trên Mobile như Facebook) */
.forum-hero-banner {
    position: relative;
    background: linear-gradient(135deg, #075985 0%, #065f46 50%, #0369a1 100%);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 14px;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(6, 78, 59, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.forum-hero-content {
    max-width: 800px;
}

.forum-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffedd5;
    margin-bottom: 4px;
}

.forum-hero-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
}

.forum-hero-desc {
    font-size: 13px;
    margin: 4px 0 0 0;
    opacity: 0.9;
    color: #e2e8f0;
}

.forum-hero-action {
    display: flex;
    gap: 10px;
}

.btn-hero-post {
    background: #f59e0b;
    color: #1e293b;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-hero-post:hover {
    background: #d97706;
    color: #ffffff;
}

/* Ẩn hoàn toàn Hero Banner trên điện thoại & máy tính bảng giống Facebook */
@media (max-width: 991px) {
    .forum-hero-banner {
        display: none !important;
    }
}

/* 3. KHUNG ĐĂNG BÀI CHUẨN FACEBOOK (POST CREATOR 1 HÀNG DUY NHẤT) */
.forum-fb-post-creator {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.forum-fb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}

.forum-fb-input-box {
    flex: 1 1 0%;
    min-width: 0;
    width: 0;
    max-width: 100%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 9px 16px;
    color: #64748b;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box;
}

.forum-fb-input-box span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    width: 100%;
}

.forum-fb-input-box:hover {
    background: #e2e8f0;
    color: #334155;
    border-color: #cbd5e1;
}

.forum-fb-photo-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 20px;
    background: #f0fdf4;
    border: 1px solid #bae6fd;
    color: #15803d;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.forum-fb-photo-btn:hover {
    background: #e0f2fe;
    transform: translateY(-1px);
}

/* 4. AVATAR TRÒN CỦA TÁC GIẢ BÀI VIẾT (CHUẨN FACEBOOK) */
.forum-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
    user-select: none;
    text-transform: uppercase;
    line-height: 1;
}

/* 5. THANH BỘ LỌC CHUYÊN MỤC & TÌM KIẾM TINH GỌN (1 HÀNG DUY NHẤT, KHÔNG CẦN KÉO QUA LẠI) */
.forum-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.forum-filter-select-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 240px;
    min-width: 0;
}

.forum-filter-select-icon {
    position: absolute;
    left: 8px;
    pointer-events: none;
    font-size: 13px;
}

.forum-filter-select {
    width: 100%;
    padding: 6px 10px 6px 28px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    background: #f8fafc;
    cursor: pointer;
    outline: none;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forum-filter-select:focus,
.forum-filter-select:hover {
    border-color: #0284c7;
    background: #ffffff;
}

.forum-filter-search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1.5;
    gap: 6px;
    min-width: 0;
}

.forum-filter-search-icon {
    position: absolute;
    left: 8px;
    pointer-events: none;
    font-size: 12px;
    color: #94a3b8;
}

.forum-filter-search-input {
    flex: 1;
    padding: 6px 28px 6px 28px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    color: #1e293b;
    background: #ffffff;
    outline: none;
    min-width: 0;
    transition: border-color 0.15s ease;
}

.forum-filter-search-input:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.1);
}

.btn-filter-clear {
    position: absolute;
    right: 56px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 50%;
}

.btn-filter-clear:hover {
    color: #dc2626;
}

.btn-filter-search {
    padding: 6px 14px;
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}

.btn-filter-search:hover {
    background: #0369a1;
}

/* 5. BỐ CỤC 2 CỘT (DESKTOP GRID) */
.forum-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.forum-content-col {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 6. THẺ BÀI VIẾT (POST CARD) */
.forum-posts-stream {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.forum-post-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
}

.forum-post-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
}

.forum-post-card.is-pinned {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(to right, #fffdfa, #ffffff);
}

/* Ghim Ribbon Badge */
.forum-pin-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    border: 1px solid #fde68a;
}

/* Header bài viết chuẩn Facebook */
.forum-post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.forum-post-author-block {
    display: flex;
    gap: 10px;
    align-items: center;
}

.forum-post-meta-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.forum-author-name {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}

.forum-author-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: #e0f2fe;
    color: #0369a1;
}

.forum-author-badge.admin {
    background: #fee2e2;
    color: #b91c1c;
}

.forum-author-badge.truong, .forum-author-badge.pho {
    background: #fef3c7;
    color: #b45309;
}

.forum-post-subline {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.2;
}

.forum-bullet {
    color: #94a3b8;
    font-size: 11px;
}

.forum-category-pill {
    font-size: 11px;
    font-weight: 600;
    color: #0369a1;
    background: #f0f9ff;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #e0f2fe;
}

.forum-category-pill.AN_NINH_MANG { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.forum-category-pill.KY_THUAT_THIET_BI { background: #e0f2fe; color: #0284c7; border-color: #bae6fd; }
.forum-category-pill.NGHIEP_VU_VAN_BAN { background: #e0f2fe; color: #15803d; border-color: #bae6fd; }
.forum-category-pill.PHUONG_TIEN { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.forum-category-pill.HOI_DAP { background: #f3e8ff; color: #7e22ce; border-color: #e9d5ff; }

.forum-privacy-icon {
    font-size: 11.5px;
    opacity: 0.75;
}

/* Menu bài viết (Sửa, Xóa, Ghim) */
.forum-post-options {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-post-menu {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.btn-post-menu:hover {
    background: #f1f5f9;
    color: #334155;
}

/* Thân bài viết */
.forum-post-title {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px 0;
    line-height: 1.45;
    cursor: pointer;
    transition: color 0.15s;
}

.forum-post-title:hover {
    color: #0284c7;
}

.forum-post-body {
    font-size: 14px;
    color: #334155;
    line-height: 1.65;
    margin-bottom: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Tags đính kèm */
.forum-post-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.forum-tag-item {
    font-size: 12px;
    color: #0284c7;
    background: #f0fdf4;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #bae6fd;
    font-weight: 500;
}

/* Tệp đính kèm & Thư viện ảnh */
.forum-attachments-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.forum-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.forum-file-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.forum-file-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forum-file-size {
    font-size: 11.5px;
    color: #64748b;
    margin-left: 6px;
}

.forum-file-actions {
    display: flex;
    gap: 8px;
}

.btn-file-view, .btn-file-dl {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-file-view {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}
.btn-file-view:hover { background: #dbeafe; }

.btn-file-dl {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}
.btn-file-dl:hover { background: #e2e8f0; }

/* 6. HÀNG THỐNG KÊ TƯƠNG TÁC CHUẨN FACEBOOK */
.forum-fb-stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 6px 4px;
    margin-top: 8px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12.5px;
    color: #64748b;
}

.forum-fb-stat-left {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fb-like-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0284c7;
    color: #ffffff;
    font-size: 10px;
}

.fb-like-count-text {
    font-weight: 700;
    color: #334155;
    font-size: 12.5px;
}

.forum-fb-stat-right {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 12.5px;
    transition: color 0.15s;
    user-select: none;
}

.forum-fb-stat-right:hover {
    color: #0284c7;
    text-decoration: underline;
}

/* 7. THANH 2 NÚT BẤM TƯƠNG TÁC CHUẨN FACEBOOK (THÍCH | BÌNH LUẬN) */
.forum-fb-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    margin-top: 2px;
    border-top: 1px solid #f1f5f9;
}

.btn-fb-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    min-height: 38px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.btn-fb-action:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.btn-fb-action:active {
    transform: scale(0.97);
}

.btn-fb-action.liked {
    color: #0284c7;
    font-weight: 700;
}

.btn-fb-action.liked .fb-action-icon {
    transform: scale(1.15);
}

.btn-fb-action.active-comment {
    color: #0284c7;
    background: #f0f9ff;
}

.forum-fb-comments-wrapper {
    margin-top: 8px;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
}

/* 7. PHẦN BÌNH LUẬN (COMMENTS ACCORDION) */
.forum-comments-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
}

.forum-comment-box-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.forum-comment-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.forum-comment-box:focus-within {
    border-color: #0284c7;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
}

.forum-comment-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 13.5px;
    resize: vertical;
    min-height: 48px;
    background: transparent;
    font-family: inherit;
    color: #1e293b;
    padding: 0;
}

.forum-comment-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}

.btn-comment-attach {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    transition: all 0.15s;
    user-select: none;
}

.btn-comment-attach:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.comment-files-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    background: #f1f5f9;
    border-radius: 6px;
    border: 1px dashed #cbd5e1;
}

.comment-preview-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 2px;
}

.comment-preview-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
}

.comment-preview-file-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: #f8fafc;
    border-radius: 4px;
}

.btn-remove-comment-file {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: #ffffff;
    border: none;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.btn-submit-comment {
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-submit-comment:hover {
    background: #0369a1;
}

/* Hiển thị ảnh đính kèm trong từng bình luận */
.comment-attachments-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-top: 6px;
}

.comment-attachment-thumb {
    max-width: 140px;
    max-height: 100px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}

.comment-attachment-thumb:hover {
    opacity: 0.9;
    transform: scale(1.03);
}

.comment-attachment-file-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 12px;
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.comment-attachment-file-tag:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.forum-comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.forum-comment-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    position: relative;
}

.forum-comment-item.is-solution {
    border: 1.5px solid #10b981;
    background: #f0fdf4;
}

.forum-solution-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #10b981;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.forum-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.forum-comment-author {
    font-weight: 700;
    font-size: 13px;
    color: #1e293b;
}

.forum-comment-time {
    font-size: 11.5px;
    color: #94a3b8;
}

.forum-comment-content {
    font-size: 13px;
    color: #334155;
    line-height: 1.55;
    white-space: pre-wrap;
}

.forum-comment-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 6px;
}

.btn-comment-action {
    background: transparent;
    border: none;
    font-size: 11.5px;
    color: #64748b;
    cursor: pointer;
    font-weight: 600;
}

.btn-comment-action:hover {
    color: #0f172a;
    text-decoration: underline;
}

/* 8. WIDGETS BÊN PHẢI (RIGHT SIDEBAR) */
.forum-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.forum-widget-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.forum-widget-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

/* Top Contributors */
.top-contributor-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.top-contributor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}

.contributor-rank-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 11px;
    margin-right: 8px;
}

.rank-1 { background: #ffedd5; color: #854d0e; }
.rank-2 { background: #e2e8f0; color: #475569; }
.rank-3 { background: #fed7aa; color: #9a3412; }
.rank-other { background: #f1f5f9; color: #64748b; }

.contributor-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.contributor-unit {
    font-size: 11px;
    color: #64748b;
}

.contributor-points {
    font-size: 12px;
    font-weight: 700;
    color: #0284c7;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Quick Handbooks */
.handbook-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.handbook-item:hover {
    background: #f0fdf4;
    border-color: #bae6fd;
}

.handbook-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.35;
}

/* Quick App Shortcuts */
.shortcut-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.shortcut-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    gap: 6px;
}

.shortcut-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    transform: translateY(-1px);
}

.shortcut-label {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

/* 9. RESPONSIVE MOBILE & TABLET CHUẨN FACEBOOK */
@media (max-width: 991px) {
    .forum-hero-banner {
        display: none !important;
    }
    .forum-main-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .forum-content-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .forum-sidebar-col {
        order: 2;
        margin-top: 16px;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 768px) {
    .forum-container {
        padding: 0 0 30px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    .forum-content-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .forum-post-card {
        border-radius: 8px !important;
        padding: 12px 10px 8px 10px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        word-break: break-word !important;
    }
    .forum-pin-ribbon {
        font-size: 11px !important;
        padding: 2px 8px !important;
        margin-bottom: 8px !important;
        max-width: 100% !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }
    .forum-post-header {
        flex-wrap: wrap !important;
        gap: 6px !important;
        max-width: 100% !important;
    }
    .forum-post-author-block {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .forum-post-meta-col {
        min-width: 0 !important;
        flex: 1 !important;
    }
    .forum-author-name {
        font-size: 14px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .forum-author-badge {
        font-size: 10.5px !important;
        padding: 1px 5px !important;
    }
    .forum-post-subline {
        font-size: 11.5px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .forum-post-title {
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    .forum-post-body {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin: 6px 0 10px 0 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: pre-wrap !important;
        max-width: 100% !important;
    }
    .forum-post-tags-row {
        gap: 4px !important;
        margin-bottom: 10px !important;
        max-width: 100% !important;
    }
    .forum-tag-item {
        font-size: 11px !important;
        padding: 2px 6px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    .forum-file-row {
        padding: 6px 8px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .forum-file-left {
        max-width: 100% !important;
    }
    .forum-file-actions {
        width: 100% !important;
        justify-content: flex-end !important;
    }
    .forum-fb-stats-bar {
        font-size: 12px !important;
        padding: 6px 2px !important;
    }
    .forum-fb-actions-bar {
        padding: 2px 0 !important;
    }
    .btn-fb-action {
        min-height: 36px !important;
        font-size: 13px !important;
        padding: 6px 8px !important;
        gap: 4px !important;
    }
    .forum-fb-post-creator {
        padding: 8px 10px !important;
        margin-bottom: 10px !important;
        border-radius: 8px !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .forum-fb-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    .forum-fb-input-box {
        font-size: 13px !important;
        padding: 8px 12px !important;
        min-width: 0 !important;
        width: 0 !important;
        max-width: 100% !important;
    }
    .forum-fb-photo-btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }
    .forum-fb-comments-wrapper {
        padding-top: 8px !important;
        margin-top: 6px !important;
    }
    .comment-row {
        gap: 8px !important;
    }
    .comment-bubble {
        padding: 8px 10px !important;
        font-size: 13px !important;
        max-width: 100% !important;
        word-break: break-word !important;
    }
    .comment-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }
    .forum-comment-box-wrapper {
        gap: 6px !important;
    }
    .forum-comment-input-row {
        gap: 6px !important;
    }
    .forum-comment-input {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 640px) {
    /* Thanh bộ lọc chuyên mục và tìm kiếm xếp 2 hàng dọc gọn gàng */
    .forum-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .forum-filter-select-box {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
    .forum-filter-select {
        width: 100% !important;
        font-size: 13px !important;
        padding: 8px 10px 8px 30px !important;
        height: 38px !important;
        box-sizing: border-box !important;
    }
    .forum-filter-search-box {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        display: flex !important;
        gap: 6px !important;
    }
    .forum-filter-search-input {
        width: 100% !important;
        font-size: 13px !important;
        padding: 8px 32px 8px 28px !important;
        height: 38px !important;
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
    }
    .btn-filter-search {
        padding: 8px 14px !important;
        font-size: 13px !important;
        height: 38px !important;
        flex-shrink: 0 !important;
    }
    .btn-filter-clear {
        right: 58px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* ==========================================================================
   10. THƯ VIỆN ẢNH BÀI VIẾT & BÌNH LUẬN (IMAGE GALLERIES)
   ========================================================================== */
.forum-images-gallery {
    display: grid;
    gap: 8px;
    margin: 12px 0 16px 0;
    border-radius: 10px;
    overflow: hidden;
}

/* Lưới hiển thị linh hoạt theo số lượng ảnh */
.forum-images-gallery.count-1 {
    grid-template-columns: 1fr;
    max-height: 480px;
}
.forum-images-gallery.count-2 {
    grid-template-columns: 1fr 1fr;
    max-height: 320px;
}
.forum-images-gallery.count-3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    max-height: 360px;
}
.forum-images-gallery.count-3 .forum-gallery-item:first-child {
    grid-row: span 2;
}
.forum-images-gallery.count-4,
.forum-images-gallery.count-many {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    max-height: 360px;
}

.forum-gallery-item {
    position: relative;
    overflow: hidden;
    background: #0f172a;
    cursor: pointer;
    border-radius: 8px;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.06);
}

.forum-gallery-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.forum-gallery-item:hover .forum-gallery-thumb {
    transform: scale(1.03);
    filter: brightness(0.92);
}

.gallery-zoom-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.forum-gallery-item:hover .gallery-zoom-badge {
    opacity: 1;
    background: rgba(5, 150, 105, 0.9);
}

.gallery-more-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    backdrop-filter: blur(2px);
}

/* Thư viện ảnh trong bình luận */
.comment-attachments-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.comment-attachment-thumb-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1.5px solid #cbd5e1;
    background: #f1f5f9;
    transition: all 0.2s;
}

.comment-attachment-thumb-wrapper:hover {
    border-color: #0284c7;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.comment-attachment-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   11. TRÌNH XEM ẢNH ĐA NĂNG TOÀN MÀN HÌNH (PHOTO LIGHTBOX / GALLERY VIEWER)
   ========================================================================== */
.forum-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background: rgba(10, 15, 29, 0.95);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    user-select: none;
    -webkit-user-select: none;
    animation: lbFadeIn 0.2s ease-out;
}

@keyframes lbFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Thanh tiêu đề trên cùng */
.lightbox-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
    z-index: 10;
}

.lightbox-counter-badge {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    color: #f8fafc;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    letter-spacing: 0.5px;
}

.lightbox-title-text {
    flex: 1;
    margin: 0 16px;
    color: #e2e8f0;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.lightbox-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lightbox-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    text-decoration: none;
}

.lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(-1px);
}

.lightbox-btn-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.lightbox-btn-close:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* Sân khấu trung tâm hiển thị ảnh */
.lightbox-stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 60px;
    overflow: hidden;
    touch-action: pan-y;
}

.lightbox-img-wrapper {
    position: relative;
    max-width: 100%;
    max-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-main-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.6);
    display: block;
    user-drag: none;
    -webkit-user-drag: none;
    transition: opacity 0.2s ease;
}

/* Nút điều hướng Trước / Sau cho Máy tính (Desktop Arrows) */
.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

.lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    transform: translateY(-50%) scale(1.08);
}

.lightbox-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.lightbox-arrow.prev {
    left: 24px;
}

.lightbox-arrow.next {
    right: 24px;
}

/* Thanh điều hướng và gợi ý ở đáy */
.lightbox-bottombar {
    padding: 14px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.lightbox-dots-container {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    max-width: 80%;
    overflow-x: auto;
    padding: 4px;
}

.lightbox-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s;
}

.lightbox-dot.active {
    width: 24px;
    border-radius: 4px;
    background: #10b981;
}

.lightbox-hint-text {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
}

/* Điều chỉnh khi ở trên thiết bị di động */
@media (max-width: 768px) {
    .lightbox-stage {
        padding: 6px 10px;
    }
    .lightbox-arrow {
        width: 42px;
        height: 42px;
        font-size: 20px;
        background: rgba(0, 0, 0, 0.4);
    }
    .lightbox-arrow.prev {
        left: 10px;
    }
    .lightbox-arrow.next {
        right: 10px;
    }
    .lightbox-main-img {
        max-width: 96vw;
        max-height: 75vh;
    }
    .lightbox-title-text {
        display: none;
    }
    .lightbox-counter-badge {
        font-size: 12px;
        padding: 4px 10px;
    }
}

/* ==========================================================================
   DASHBOARD TRANG CHỦ THEO PHONG CÁCH SAAS / ERP HIỆN ĐẠI (FITCLUB 43-009)
   ========================================================================== */
.dashboard-saas-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto 30px auto;
    font-family: inherit;
    box-sizing: border-box;
}

/* 1. HEADER / BANNER CHÀO MỪNG THEO CHUẨN DOANH NGHIỆP SAAS */
.dashboard-header-banner {
    background: linear-gradient(135deg, #e4f1fd 0%, #edf7ff 50%, #e0f0fd 100%);
    border-radius: 20px;
    padding: 12px;
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 22px;
    border: 1px solid #d0e7fb;
    box-shadow: 0 4px 18px rgba(186, 219, 248, 0.22);
}

.welcome-banner-hero {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.7);
    border-radius: 14px;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(30, 58, 138, 0.03);
}

/* Lớp nền núi mờ sương nghệ thuật (Misty Mountain Landscape) */
.welcome-mountain-backdrop {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 62%;
    max-width: 520px;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    opacity: 0.95;
}

.mist-mountain-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mountain-layer-back {
    animation: mountainMistShift 8s ease-in-out infinite alternate;
}

.mountain-layer-mid {
    animation: mountainMistShift 6s ease-in-out infinite alternate-reverse;
}

@keyframes mountainMistShift {
    0% { transform: translateY(0px); opacity: 0.85; }
    100% { transform: translateY(-2px); opacity: 1; }
}

.welcome-hero-content {
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.welcome-hero-title {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
}

.welcome-name-highlight {
    color: #0265dc;
    font-weight: 800;
}

/* Hiệu ứng bàn tay vẫy chào sinh động */
.welcome-hand-wave {
    display: inline-block;
    cursor: default;
    transform-origin: 70% 70%;
    animation: handWaveAnimation 2.2s ease-in-out infinite;
}

@keyframes handWaveAnimation {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
}

.welcome-hero-subtitle {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

.welcome-hero-graphic {
    z-index: 2;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Khung bọc lịch 3D kèm hiệu ứng bồng bềnh lơ lửng */
.welcome-calendar-3d-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: calendarFloat 3.8s ease-in-out infinite;
}

@keyframes calendarFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-6px) rotate(1.2deg);
    }
}

.welcome-calendar-3d-svg {
    filter: drop-shadow(0 4px 12px rgba(2, 132, 199, 0.12));
    transition: transform 0.3s ease;
}

.welcome-calendar-3d-svg:hover {
    transform: scale(1.04);
}

/* Hiệu ứng lấp lánh ánh sao quanh lịch */
.calendar-sparkle {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.sparkle-1 {
    top: -2px;
    right: 2px;
    color: #f59e0b;
    font-size: 14px;
    animation: sparkleTwinkle 2.6s ease-in-out infinite;
}

.sparkle-2 {
    bottom: 16px;
    left: -6px;
    color: #38bdf8;
    font-size: 12px;
    animation: sparkleTwinkle 3.2s ease-in-out infinite 0.9s;
}

@keyframes sparkleTwinkle {
    0%, 100% {
        opacity: 0.25;
        transform: scale(0.7) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.3) rotate(45deg);
        filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.7));
    }
}

/* Thẻ Ngày giờ & Hạn báo cáo bên phải */
.welcome-date-card {
    flex: 0 0 350px;
    width: 350px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.7);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 4px rgba(30, 58, 138, 0.03);
    box-sizing: border-box;
}

.welcome-date-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.welcome-date-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #f0f7ff;
    border: 1px solid #e0f2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.welcome-date-texts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.welcome-date-main-line {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.welcome-date-day {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
}

.welcome-date-dot {
    font-size: 12px;
    color: #94a3b8;
}

.welcome-date-main {
    font-size: 14.5px;
    font-weight: 600;
    color: #334155;
}

.welcome-deadline-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    background: #eff6ff;
    color: #0284c7;
    border: 1px solid #bfdbfe;
    padding: 4px 10px;
    border-radius: 20px;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
}

.welcome-deadline-tag.is-warning {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.welcome-deadline-tag.is-urgent {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* 2. HÀNG 4 THẺ THỐNG KÊ NHANH (KPI CARDS) */
.stat-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.saas-stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.saas-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -4px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.stat-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon-blue {
    background: #e0f2fe;
    color: #0284c7;
}

.stat-icon-orange {
    background: #ffedd5;
    color: #ea580c;
}

.stat-icon-red {
    background: #fee2e2;
    color: #dc2626;
}

.stat-icon-green {
    background: #dcfce7;
    color: #16a34a;
}

.stat-growth-badge {
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.growth-positive {
    background: #dcfce7;
    color: #15803d;
}

.growth-negative {
    background: #fee2e2;
    color: #b91c1c;
}

.stat-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.stat-value {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 6px;
}

.stat-subtext {
    font-size: 12px;
    color: #94a3b8;
}

/* 3. KHU VỰC 2 CỘT DỮ LIỆU CHÍNH */
.dashboard-two-col-grid {
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 16px;
    margin-bottom: 20px;
}

.dashboard-panel-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 12px;
}

.panel-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-title-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.panel-view-all-link {
    font-size: 12.5px;
    font-weight: 600;
    color: #0284c7;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    transition: all 0.15s ease;
}

.panel-view-all-link:hover {
    text-decoration: underline;
    color: #0369a1;
}

/* BẢNG CÔNG VIỆC SẮP ĐẾN HẠN */
.table-responsive {
    overflow-x: auto;
}

.saas-tasks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.saas-tasks-table thead th {
    padding: 10px 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
}

.saas-tasks-table tbody td {
    padding: 12px;
    border-bottom: 1px solid #f8fafc;
    vertical-align: middle;
}

.saas-task-row {
    transition: background 0.15s ease;
}

.saas-task-row:hover {
    background: #f8fafc;
}

.task-col-stt {
    font-weight: 700;
    color: #334155;
    text-align: center;
}

.task-item-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 13.5px;
    margin-bottom: 2px;
}

.task-item-desc {
    font-size: 11.5px;
    color: #64748b;
}

.task-col-date {
    font-size: 12.5px;
    color: #475569;
    font-weight: 500;
    white-space: nowrap;
}

.task-col-status {
    text-align: center;
    white-space: nowrap;
}

.saas-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
}

.status-urgent {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

.status-running {
    background: #eff6ff;
    color: #0284c7;
    border: 1px solid #bfdbfe;
}

/* KHỐI HOẠT ĐỘNG GẦN ĐÂY */
.recent-activity-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #f8fafc;
}

.recent-activity-row:last-child {
    border-bottom: none;
}

.activity-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    color: #ffffff;
    flex-shrink: 0;
}

.avatar-purple {
    background: #8b5cf6;
}

.avatar-green {
    background: #10b981;
}

.avatar-blue {
    background: #0284c7;
}

.avatar-pink {
    background: #ec4899;
}

.avatar-orange {
    background: #ea580c;
}

.avatar-navy {
    background: #1e40af;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-text {
    font-size: 12.5px;
    color: #334155;
    line-height: 1.45;
}

.activity-text strong {
    color: #0f172a;
    font-weight: 600;
}

.activity-text em {
    font-style: italic;
    color: #0f172a;
}

.activity-time {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 4. KHU VỰC DIỄN ĐÀN & TRAO ĐỔI KINH NGHIỆM (FULL WIDTH CARD) */
.panel-forum-exchange {
    margin-bottom: 30px;
}

.forum-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 10px;
}

.forum-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.btn-create-post-highlight {
    background: #ea580c;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 7px 15px;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(234, 88, 12, 0.2);
}

.btn-create-post-highlight:hover {
    background: #c2410c;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.25);
}

.forum-rows-list {
    display: flex;
    flex-direction: column;
}

.forum-row-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 6px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease, padding 0.15s ease;
    border-radius: 8px;
}

.forum-row-item:last-child {
    border-bottom: none;
}

.forum-row-item:hover {
    background: #f8fafc;
    padding-left: 10px;
    padding-right: 10px;
}

.forum-row-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #ffffff;
    flex-shrink: 0;
}

.forum-row-content {
    flex: 1;
    min-width: 0;
}

.forum-row-headline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.forum-row-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
}

.forum-row-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.tag-blue {
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.tag-orange {
    background: #ffedd5;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

.forum-row-desc {
    font-size: 12.5px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95%;
}

.forum-row-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    font-size: 12px;
    color: #64748b;
}

.forum-meta-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.forum-meta-time {
    color: #94a3b8;
    white-space: nowrap;
}

/* MODAL CHI TIẾT BÀI VIẾT DIỄN ĐÀN */
.forum-modal-detail-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 75vh;
    overflow-y: auto;
    padding: 4px 2px;
}

.forum-modal-author-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.forum-modal-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.forum-modal-author-name {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.forum-modal-meta-line {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.badge-cat {
    background: #e0f2fe;
    color: #0284c7;
    padding: 1px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.forum-modal-post-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px 0;
}

.forum-modal-text {
    font-size: 13.5px;
    color: #334155;
    line-height: 1.6;
}

.forum-modal-stats-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #64748b;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.forum-modal-actions-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

/* ==========================================================================
   GIAO DIỆN TRANG CHỦ DASHBOARD SAAS TRÊN THIẾT BỊ DI ĐỘNG (MOBILE-FIRST)
   ========================================================================== */
.welcome-mobile-date-section {
    display: none;
}

@media (max-width: 992px) {
    /* 1. HEADER & CARD CHÀO MỪNG HỢP NHẤT TRÊN MOBILE */
    .welcome-date-card,
    .desktop-only-date-card {
        display: none !important;
    }

    .dashboard-header-banner {
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 14px !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .welcome-banner-hero {
        background: linear-gradient(135deg, #f8faff 0%, #eef6ff 100%) !important;
        border: 1px solid #dbeafe !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 10px rgba(37, 99, 235, 0.04) !important;
        padding: 16px 16px 14px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .welcome-mountain-backdrop {
        opacity: 0.45 !important;
        width: 55% !important;
    }

    .welcome-hero-content {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding-right: 76px !important; /* Dành chỗ cho lịch 3D nhỏ góc trên phải */
        box-sizing: border-box !important;
        z-index: 2 !important;
    }

    .welcome-hero-title {
        font-size: 16px !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
        color: #0f172a !important;
        margin: 0 !important;
    }

    .welcome-name-highlight {
        color: #0265dc !important;
    }

    .welcome-hero-subtitle {
        font-size: 12px !important;
        line-height: 1.45 !important;
        color: #475569 !important;
        margin: 0 !important;
    }

    /* Minh họa Lịch 3D thu nhỏ tinh tế ở góc trên bên phải */
    .welcome-hero-graphic {
        display: flex !important;
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        width: 70px !important;
        height: auto !important;
        z-index: 3 !important;
    }

    .welcome-calendar-3d-wrapper {
        width: 70px !important;
        height: auto !important;
        animation: calendarFloat 4s ease-in-out infinite !important;
    }

    .welcome-calendar-3d-svg {
        width: 70px !important;
        height: auto !important;
    }

    .sparkle-1 {
        font-size: 10px !important;
        top: -3px !important;
        right: 0 !important;
    }

    .sparkle-2 {
        font-size: 8px !important;
        bottom: 6px !important;
        left: -3px !important;
    }

    /* Hàng Ngày giờ & Hạn báo cáo tích hợp trực tiếp ở chân card chào mừng */
    .welcome-mobile-date-section {
        display: block !important;
        width: 100% !important;
        padding-top: 12px !important;
        margin-top: 10px !important;
        border-top: 1px dashed rgba(186, 219, 248, 0.7) !important;
        z-index: 2 !important;
    }

    .welcome-mobile-date-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .welcome-mobile-date-icon-box {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        border: 1px solid #bfdbfe !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 3px rgba(2, 132, 199, 0.08) !important;
        flex-shrink: 0 !important;
    }

    .welcome-mobile-date-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    .welcome-mobile-date-main-line {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 13.5px !important;
        white-space: nowrap !important;
    }

    .welcome-mobile-date-main-line .welcome-date-day {
        font-weight: 800 !important;
        color: #0f172a !important;
    }

    .welcome-mobile-date-main-line .welcome-date-dot {
        color: #94a3b8 !important;
    }

    .welcome-mobile-date-main-line .welcome-date-main {
        font-weight: 600 !important;
        color: #334155 !important;
    }

    .welcome-mobile-date-info .welcome-deadline-tag {
        font-size: 11px !important;
        padding: 3px 9px !important;
    }

    /* 2. KPI DASHBOARD MOBILE (LƯỚI 2 CỘT 2x2 GRID THEO YÊU CẦU) */
    .stat-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .saas-stat-card {
        padding: 12px 14px !important;
        border-radius: 16px !important;
        border: 1px solid #f1f5f9 !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .stat-card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 8px !important;
    }

    .stat-icon-wrapper {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
    }

    .stat-icon-wrapper svg {
        width: 16px !important;
        height: 16px !important;
    }

    .stat-growth-badge {
        font-size: 10px !important;
        padding: 1px 6px !important;
        font-weight: 700 !important;
    }

    .stat-label {
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        margin-bottom: 3px !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .stat-value {
        font-size: 22px !important;
        font-weight: 800 !important;
        margin-bottom: 2px !important;
        line-height: 1.1 !important;
    }

    .stat-subtext {
        font-size: 10.5px !important;
        color: #94a3b8 !important;
    }

    /* 3. KHU VỰC NỘI DUNG CHÍNH (XẾP 1 CỘT DỌC TRÊN MOBILE) */
    .dashboard-two-col-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        margin-bottom: 16px !important;
    }

    .dashboard-panel-card {
        border-radius: 16px !important;
        padding: 14px 16px !important;
        border: 1px solid #f1f5f9 !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
    }

    .panel-header {
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }

    .panel-title {
        font-size: 14.5px !important;
    }

    .panel-view-all-link {
        font-size: 12.5px !important;
        color: #0284c7 !important;
        font-weight: 600 !important;
    }

    /* 4. HOẠT ĐỘNG GẦN ĐÂY MOBILE */
    .recent-activity-row {
        padding: 9px 0 !important;
        gap: 10px !important;
    }

    .activity-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 12.5px !important;
    }

    .activity-text {
        font-size: 12.5px !important;
        line-height: 1.4 !important;
    }

    .activity-time {
        font-size: 10.5px !important;
        color: #94a3b8 !important;
    }

    /* Diễn đàn thu gọn trên mobile */
    .panel-forum-exchange {
        border-radius: 16px !important;
        padding: 14px 16px !important;
    }

    .forum-row-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 10px 0 !important;
    }

    .forum-row-meta {
        width: 100% !important;
        justify-content: space-between !important;
        margin-top: 2px !important;
    }

    .forum-row-desc {
        max-width: 100% !important;
        white-space: normal !important;
    }
}

/* ==========================================================================
   GIAO DIỆN THẺ CÔNG VIỆC SẮP ĐẾN HẠN TRÊN MOBILE (PHƯƠNG ÁN 3 - TỐI GIẢN)
   ========================================================================== */
.mobile-tasks-cards-list {
    display: none;
}

@media (max-width: 992px) {
    #dashboard-upcoming-tasks-wrapper table,
    .panel-upcoming-tasks table,
    .desktop-only-tasks-table,
    .saas-tasks-table {
        display: none !important;
    }

    .panel-upcoming-tasks .table-responsive,
    .panel-upcoming-tasks .tasks-panel-body {
        overflow: visible !important;
        padding: 12px 14px !important;
    }

    .mobile-tasks-cards-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 2px 0 !important;
    }

    .mobile-task-card-item {
        background: #ffffff !important;
        border-radius: 16px !important;
        padding: 14px 16px !important;
        border: 1px solid #f1f5f9 !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
        cursor: pointer !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
        display: flex !important;
        flex-direction: column !important;
        text-align: left !important;
        max-height: 160px !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    .mobile-task-card-item:hover,
    .mobile-task-card-item:active {
        background: #fafbfc !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
    }

    .mobile-task-card-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 8px !important;
    }

    .mobile-task-status-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 3px 10px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    .mobile-task-status-dot {
        width: 7px !important;
        height: 7px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }

    /* Trạng thái Cam: Sắp đến hạn / Còn X ngày */
    .pill-urgent,
    .pill-warning {
        background: #fff7ed !important;
        color: #ea580c !important;
    }
    .pill-urgent .mobile-task-status-dot,
    .pill-warning .mobile-task-status-dot {
        background: #f97316 !important;
    }

    /* Trạng thái Xanh dương: Đang thực hiện */
    .pill-running {
        background: #eff6ff !important;
        color: #2563eb !important;
    }
    .pill-running .mobile-task-status-dot {
        background: #3b82f6 !important;
    }

    /* Trạng thái Xanh lá: Hoàn thành */
    .pill-completed {
        background: #f0fdf4 !important;
        color: #16a34a !important;
    }
    .pill-completed .mobile-task-status-dot {
        background: #22c55e !important;
    }

    .mobile-task-card-chevron {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #0284c7 !important;
        display: flex !important;
        align-items: center !important;
    }

    .mobile-task-card-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin-top: 0 !important;
        margin-bottom: 4px !important;
        line-height: 1.35 !important;
        padding-right: 16px !important;
    }

    .mobile-task-card-desc {
        font-size: 13px !important;
        color: #64748b !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        padding-right: 16px !important;
    }

    .mobile-task-card-footer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 12.5px !important;
        color: #64748b !important;
        font-weight: 500 !important;
        margin-top: auto !important;
    }

    .mobile-task-date-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .mobile-task-date-icon {
        display: inline-flex !important;
        align-items: center !important;
        color: #64748b !important;
    }
}

/* ==========================================================================
   TRANG PHÂN HỆ DIỄN ĐÀN ĐẦY ĐỦ (FULL FORUM DEDICATED PAGE)
   ========================================================================== */
.full-forum-page-wrapper {
    padding-top: 6px;
    animation: fadeInForumPage 0.25s ease-out;
}

@keyframes fadeInForumPage {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.forum-page-header-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.forum-page-header-left {
    flex: 1;
    min-width: 280px;
}

.btn-back-to-dashboard {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #0284c7;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 12px;
}

.btn-back-to-dashboard:hover {
    background: #e0f2fe;
    color: #0369a1;
    border-color: #7dd3fc;
    transform: translateX(-3px);
}

.forum-page-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.forum-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f0f9ff;
    border: 1px solid #e0f2fe;
}

.forum-page-desc {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.forum-page-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 768px) {
    .forum-page-header-card {
        padding: 16px !important;
        border-radius: 16px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .forum-page-header-left {
        min-width: 0 !important;
        width: 100% !important;
    }
    .forum-page-title {
        font-size: 19px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .forum-page-desc {
        font-size: 12.5px !important;
        color: #64748b !important;
        line-height: 1.45 !important;
    }
    .forum-page-header-right {
        width: 100% !important;
    }
    .forum-page-header-right .btn-create-post-highlight {
        width: 100% !important;
        height: 38px !important;
        border-radius: 11px !important;
        justify-content: center !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        background: linear-gradient(135deg, #FF8A00 0%, #ea580c 100%) !important;
    }
}


/* ==========================================================================
   FORUM MOBILE POST CARD (FPCM) - COMPONENT RIÊNG CHO MOBILE
   Thiết kế theo mẫu: Avatar tròn + Tag badge + Title + Desc + Footer stats
   Màu thương hiệu: Navy #0F2D4A | Cam #FF8A00 | Trắng | Xám nhẹ
   ========================================================================== */

/* ─── BASE: Ẩn hoàn toàn trên desktop, hiện trên mobile ─── */
.forum-post-card-mobile {
    display: none;
}

/* ─── Avatar màu sắc theo loại người dùng ─── */
.fpcm-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
    letter-spacing: 0;
}

.fpcm-avatar.avatar-navy  { background: linear-gradient(135deg, #0F2D4A 0%, #1e4d7b 100%); }
.fpcm-avatar.avatar-orange { background: linear-gradient(135deg, #FF8A00 0%, #e07800 100%); }
.fpcm-avatar.avatar-green  { background: linear-gradient(135deg, #059669 0%, #047857 100%); }
.fpcm-avatar.avatar-blue   { background: linear-gradient(135deg, #2563EB 0%, #1d4ed8 100%); }
.fpcm-avatar.avatar-red    { background: linear-gradient(135deg, #DC2626 0%, #b91c1c 100%); }

/* ─── Tag màu ─── */
.fpcm-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.3;
}

.fpcm-tag.tag-blue   { background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }
.fpcm-tag.tag-orange { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.fpcm-tag.tag-green  { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.fpcm-tag.tag-navy   { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ─── Responsive: Hiện trên mobile (<= 992px) ─── */
@media (max-width: 992px) {

    /* Forum rows list trở thành stack của post card */
    .forum-rows-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 2px 0 4px 0 !important;
    }

    /* Ẩn forum-row-item kiểu desktop (nếu còn sót) */
    .forum-row-item {
        display: none !important;
    }

    /* ─── HIỆN POST CARD MOBILE ─── */
    .forum-post-card-mobile {
        display: block !important;
        background: #ffffff;
        border-radius: 0;
        padding: 14px 16px;
        border-bottom: 1px solid #f1f5f9;
        cursor: pointer;
        transition: background 0.12s ease;
        text-decoration: none;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }

    .forum-post-card-mobile:first-child {
        border-top: 1px solid #f1f5f9;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    .forum-post-card-mobile:last-child {
        border-bottom: none;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    .forum-post-card-mobile:active {
        background: #f8fafc;
    }

    /* Hiệu ứng nhấn ngón tay */
    .forum-post-card-mobile:hover {
        background: #fafbff;
    }

    /* ─── Header: Avatar + Tag + Mũi tên ─── */
    .fpcm-header {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Mũi tên > ở cùng hàng avatar */
    .fpcm-chevron {
        margin-left: auto !important;
        color: #0284c7 !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        opacity: 0.6 !important;
    }

    .forum-post-card-mobile:hover .fpcm-chevron,
    .forum-post-card-mobile:active .fpcm-chevron {
        opacity: 1 !important;
        transform: translateX(2px);
    }

    /* ─── Tiêu đề bài viết ─── */
    .fpcm-title {
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.45 !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-word !important;
    }

    /* ─── Mô tả ngắn ─── */
    .fpcm-desc {
        font-size: 12.5px !important;
        color: #64748b !important;
        line-height: 1.5 !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-word !important;
    }

    /* ─── Footer: Bình luận + Lượt xem + Thời gian ─── */
    .fpcm-footer {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        font-size: 12px !important;
        color: #64748b !important;
        margin-top: auto !important;
    }

    .fpcm-stat {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #64748b !important;
    }

    .fpcm-stat svg {
        color: #94a3b8 !important;
        flex-shrink: 0 !important;
    }

    .fpcm-time {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 11.5px !important;
        color: #94a3b8 !important;
        margin-left: auto !important;
        white-space: nowrap !important;
    }

    /* ─── Panel header diễn đàn trên mobile: THIẾT KẾ LẠI THEO MOBILE-FIRST ─── */
    .panel-forum-exchange {
        padding: 16px !important;
        border-radius: 16px !important;
        margin-bottom: 20px !important;
    }

    .forum-panel-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding-bottom: 14px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin-bottom: 14px !important;
    }

    /* Dòng 1: [Icon] Diễn đàn & Trao đổi kinh nghiệm */
    .forum-mobile-header-title {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .forum-mobile-title-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
        background: #e0f2fe !important;
        color: #0284c7 !important;
        flex-shrink: 0 !important;
    }

    .forum-mobile-title-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .forum-mobile-title-text {
        font-size: 19px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word !important;
        letter-spacing: -0.01em !important;
    }

    /* Dòng 2: [Tạo bài viết]        [Xem tất cả] */
    .forum-mobile-header-actions {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        gap: 12px !important;
    }

    /* Nút "Tạo bài viết": Nhỏ gọn, cao 38px, bo góc 11px, icon +, màu cam nổi bật */
    .btn-create-post-highlight,
    .forum-btn-create-mobile {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 14px !important;
        border-radius: 11px !important;
        background: linear-gradient(135deg, #FF8A00 0%, #ea580c 100%) !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border: none !important;
        box-shadow: 0 2px 6px rgba(234, 88, 12, 0.28) !important;
        cursor: pointer !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
        gap: 6px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        width: auto !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .btn-create-post-highlight:active,
    .forum-btn-create-mobile:active {
        transform: scale(0.97) !important;
        box-shadow: 0 1px 3px rgba(234, 88, 12, 0.2) !important;
    }

    .btn-create-post-highlight svg,
    .forum-btn-create-mobile svg {
        width: 14px !important;
        height: 14px !important;
        stroke-width: 2.5 !important;
    }

    /* Link "Xem tất cả": Text link nhỏ, có icon mũi tên, căn phải ở dòng 2 */
    .panel-view-all-link,
    .forum-link-view-all-mobile {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        height: 38px !important;
        padding: 0 4px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #0284c7 !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: color 0.15s ease, transform 0.15s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .panel-view-all-link:hover,
    .forum-link-view-all-mobile:hover,
    .panel-view-all-link:active,
    .forum-link-view-all-mobile:active {
        color: #0369a1 !important;
        text-decoration: underline !important;
    }

    .forum-view-all-arrow {
        font-size: 14px !important;
        transition: transform 0.2s ease !important;
        display: inline-block !important;
    }

    .forum-link-view-all-mobile:hover .forum-view-all-arrow {
        transform: translateX(3px) !important;
    }
}

/* ─── Mobile nhỏ < 480px: giảm padding card ─── */
@media (max-width: 480px) {
    .forum-post-card-mobile {
        padding: 12px 12px !important;
    }

    .forum-mobile-title-text {
        font-size: 18px !important;
    }

    .forum-btn-create-mobile {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 12px !important;
        font-size: 12.5px !important;
    }

    .forum-link-view-all-mobile {
        font-size: 12.5px !important;
        height: 36px !important;
    }

    .fpcm-title {
        font-size: 14px !important;
    }

    .fpcm-desc {
        font-size: 12px !important;
    }

    .fpcm-footer {
        gap: 10px !important;
    }

    .fpcm-time {
        font-size: 11px !important;
    }
}

/* ─── Desktop >= 993px: hoàn toàn ẩn post card mobile, hiện row item cũ ─── */
@media (min-width: 993px) {
    .forum-post-card-mobile {
        display: none !important;
    }

    .forum-row-item {
        display: flex !important;
    }
}