/* --- RESET & LAYOUT CHUNG --- */
.fb-cmt-root {  border-radius: 8px; margin-top: 20px; }

.fb-cmt-container { max-width: 100%; margin: 0 auto; background: white; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); padding: 20px; }
.fb-cmt-h2 { font-size: 20px; margin-bottom: 20px; color: #000; font-weight: bold; }

/* --- FORM NHẬP LIỆU --- */
.fb-cmt-input-wrapper { display: flex; gap: 12px; margin-bottom: 20px; border-bottom: 1px solid #e5e5e5; }
.fb-avatar { width: 40px; height: 40px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; flex-shrink: 0; text-transform: uppercase;  position: relative;
    z-index: 2;  }
.fb-avatar.small { width: 24px; height: 24px; font-size: 10px; } /* Avatar nhỏ trong nút xem thêm */

.fb-cmt-input-area { flex: 1;    margin-bottom: 15px; }
.fb-user-info-form { display: flex; gap: 10px}
.fb-user-input {
    flex: 1;
    padding: 8px 12px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    outline: none;
}
.fb-row {
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    background: #f0f2f5;
    cursor: text;
}
.fb-main-input { width: 100%; padding: 10px 16px; border: 1px solid #e5e5e5; border-radius: 20px; font-size: 14px; outline: none; background: #f0f2f5; }
.fb-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fb-tool-btn {  border: none; border-radius: 6px; background: transparent; cursor: pointer; font-size: 14px; color: #65676b; font-weight: 600;margin:0; }
.fb-tool-btn:hover { background: #f2f2f2; }
.fb-submit-btn { margin-left: auto; background: #0866ff; color: white; }
.fb-submit-btn:hover { background: #0054d8; color: #fff; }

/* --- PREVIEW ẢNH & NÚT XÓA --- */
.fb-preview-wrapper {
    position: relative;
    display: inline-block;
    margin-top: 10px;
}
/* --- EDITOR STYLE (Thay thế input cũ) --- */
.fb-editor {
    width: 100%;
    min-height: 40px;
    padding: 10px 16px;
    font-size: 14px;
    outline: none;
    margin-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
}
button.fb-tool-btn {
    border: 1px solid #e5e5e5;
}


/* Placeholder cho div contenteditable */
.fb-editor:empty:before {
    content: attr(data-placeholder);
    color: #65676b;
    pointer-events: none;
    display: block; /* For Firefox */
}

/* Style cho thẻ a trong editor */
.fb-editor a {
    color: #0866ff;
    text-decoration: underline;
    cursor: pointer;
}
.fb-preview-thumb {
    max-height: 100px;
    border-radius: 8px;
    border: 1px solid #ddd;
    display: block;
}

.fb-btn-remove-img {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e4e6eb;
    color: #65676b;
    border: 1px solid #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.2s;
}

.fb-btn-remove-img:hover {
    background: #fff;
    color: #d11a2a; /* Màu đỏ khi hover */
}
/* --- DANH SÁCH COMMENT (UI CHÍNH) --- */
.fb-list { list-style: none; padding: 0; margin: 0; }
.fb-item { margin-bottom: 10px; position: relative; }

/* Container nội dung comment */
.fb-comment-body { display: flex; gap: 8px; position: relative; z-index: 2; }
.fb-content-wrap { max-width: 90%; }

/* Bong bóng chat */
.fb-bubble { background: #f0f2f5; border-radius: 18px; padding: 8px 12px; display: inline-block; position: relative; }
.fb-author-name { font-weight: 600; color: #050505; font-size: 13px; display: block; margin-bottom: 2px; }
.fb-text { color: #050505; font-size: 15px; line-height: 1.3333; word-break: break-word; }
.fb-cmt-img { margin-top: 8px; max-width: 200px; border-radius: 8px; display: block; }

/* Nút hành động (Like/Reply) */
.fb-actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    margin-left: 12px;
    font-size: 12px;
    color: #65676b;
    font-weight: 600;
    align-items: center;
}
.fb-act-btn { background: none; border: none; color: #65676b; cursor: pointer; padding: 0; font-weight: bold; font-size: 12px;margin:0; }
.fb-act-btn:hover { text-decoration: underline; }

.fb-replies-container {
    padding-left: 0; /* Bỏ padding cũ nếu có */
    position: static; /* QUAN TRỌNG: Để ::before bỏ qua div này mà tìm lên .fb-item */
}

/* Đường kẻ dọc màu xám nối từ avatar cha xuống */
.fb-replies-container.has-replies::before {
    content: "";
    position: absolute;
    top: 40px;     
    left: 20px;     
    bottom: 20px;     
    width: 2px;
    background-color: #e4e6eb;     
	z-index: 1;
}
button.fb-act-btn {
    text-transform: unset;
}
/* Avatar mặc định: Nền xám, chữ trắng */
.fb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #cccccc; /* Màu xám mặc định */
    color: #ffffff;            /* Chữ trắng */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
    text-transform: uppercase;
    z-index: 2;
    position: relative;
    overflow: hidden; /* Để cắt ảnh tròn */
}

/* Nếu bên trong là ảnh (cho user đã đăng nhập) */
.fb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
/* --- MEDIA GRID (Hiển thị nhiều ảnh/video) --- */
.fb-media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
    max-width: 100%;
}
.fb-media-item {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #ddd;
}
.fb-media-item img, .fb-media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Icon Play đè lên video */
.fb-video-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 30px;
    pointer-events: none;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* --- LIGHTBOX (Phóng to ảnh) --- */
.fb-lightbox {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
}
.fb-lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
}
.fb-close-lightbox {
    position: absolute;
    top: 20px; right: 30px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* --- PREVIEW KHI UPLOAD --- */
.fb-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.fb-preview-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
}
.fb-preview-thumb {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
}
.fb-btn-remove-img {
    position: absolute;
    top: -5px; right: -5px;
    background: #fff;
    border-radius: 50%;
    width: 20px; height: 20px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-size: 12px;
    font-weight: bold;
    color: red;
}
.fb-avatar.small { 
    width: 24px; 
    height: 24px; 
    font-size: 10px; 
}
.fb-reply-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
       cursor: pointer;
    position: relative;
   }

.fb-curve-connector {
    position: absolute;
    left: -40px;
    top: -15px;
    width: 40px;
    height: 35px;
    border-bottom: 2px solid #e4e6eb;
    border-left: 2px solid #e4e6eb;
    border-bottom-left-radius: 12px;
    pointer-events: none;
}

.fb-trigger-info {
    font-size: 14px;
    color: #65676b;
    font-weight: 600;
    line-height: 1.2;
}
.fb-trigger-info strong { color: #050505; }
.fb-trigger-info span { font-weight: 400; color: #65676b; font-size: 13px; margin-left: 5px; }

.fb-replies-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; /* Mặc định ẩn */
}

.fb-replies-list, .fb-reply-trigger, .fb-reply-input-box {
    margin-left: 60px; /* Đẩy nội dung reply sang phải để tránh đường kẻ */
}
/* Item reply bên trong */
.fb-reply-item {
    margin-top: 10px;
    position: relative;
}

/* Đường cong chữ L nối vào từng reply */
.fb-reply-curve {
    position: absolute;
    left: -30px;
    top: -20px;
    width: 30px;
    height: 40px;
    border-bottom: 2px solid #e4e6eb;
    border-left: 2px solid #e4e6eb;
    border-bottom-left-radius: 12px;
    pointer-events: none;
  left: -40px; /* Kéo sang trái chạm vào đường kẻ dọc */
    width: 40px; /* Độ dài đường cong ngang */
    border-bottom: 2px solid #e4e6eb;
    border-left: 2px solid #e4e6eb;
    border-bottom-left-radius: 12px;
}
.fb-reply-form-dynamic .fb-curve-connector {
    left: -40px;
    width: 40px;
}
/* Form trả lời ẩn */
.fb-reply-input-box { display: none; margin-top: 10px; position: relative; }
.fb-reply-input-box .fb-curve-connector { height: 45px; } /* Điều chỉnh chiều cao curve cho input */

/* --- Modal & Helper --- */
.fb-modal { display:none; position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; align-items:center; justify-content:center; }
.fb-modal-content { background: white; padding: 20px; border-radius: 8px; width: 350px; }
.fb-modal-input { width: 100%; padding: 8px; margin: 10px 0; border: 1px solid #ddd; }
.hidden { display: none; }
@media (max-width: 768px) {
    .fb-media-item {
       position: relative; width: 100px; height: 130px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 1px solid #ddd;
    }
}