/* === Guest Comment System - Enhanced Style === */

/* --- Font Imports (Ví dụ - Đặt ở đầu file CSS) --- */
/* Bạn có thể chọn font khác hoặc đảm bảo theme đã load font này */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); */


/* --- General Comment Area --- */
#guest-comments-area {
    margin-top: 40px;
    margin-bottom: 40px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Font hiện đại, dễ đọc */
    font-size: 15px; /* Kích thước font cơ sở */
    line-height: 1.6;
    color: #343a40; /* Màu chữ chính đậm hơn chút */
    background-color: #f8f9fa; /* Nền xám rất nhạt cho toàn khu vực */
    padding: 25px 30px; /* Tăng padding */
    border-radius: 10px; /* Bo góc mềm mại hơn */
    border: 1px solid #e9ecef;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

#guest-comments-area .comments-title {
    font-size: 1.6em; /* ~24px */
    font-weight: 700; /* Đậm hơn */
    color: #212529; /* Màu tiêu đề chính */
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #007bff; /* Màu nhấn (bạn có thể đổi thành màu của FPT) */
    display: inline-block;
}

/* --- Comment Form Styling --- */
#guest-comments-area .comment-form {
    background-color: #fff; /* Nền trắng cho form */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

#guest-comments-area .comment-form .form-control,
#guest-comments-area .comment-form .form-control-sm {
    border-radius: 6px;
    border: 1px solid #ced4da;
    background-color: #fff; /* Nền trắng cho input */
    padding: .6rem .9rem; /* Padding lớn hơn chút */
    font-size: 0.9rem; /* ~14.4px */
    color: #495057;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#guest-comments-area .comment-form .form-control::placeholder,
#guest-comments-area .comment-form .form-control-sm::placeholder {
    color: #6c757d;
}

#guest-comments-area .comment-form .form-control:focus,
#guest-comments-area .comment-form .form-control-sm:focus {
    border-color: #007bff; /* Màu nhấn */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.20); /* Shadow mỏng hơn, màu nhẹ hơn */
    outline: none;
}

#guest-comments-area .comment-form textarea.form-control {
    min-height: 90px;
}

/* Form Footer */
#guest-comments-area .comment-form .gc-form-footer {
    min-height: 38px; /* Chiều cao của nút sm */
    margin-top: 1rem;
}
#guest-comments-area .comment-form .gc-logged-in-info {
    font-size: 0.85rem; color: #495057; display: flex; align-items: center; gap: 8px;
}
#guest-comments-area .comment-form .gc-logged-in-info .gc-logged-in-name {
    font-weight: 600; color: #212529;
}
#guest-comments-area .comment-form .gc-logged-in-info .gc-logged-in-phone {
    font-size: 0.9em; color: #6c757d;
}


/* === Custom Buttons (gc-btn base class) === */
#guest-comments-area .gc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none !important;
    vertical-align: middle; cursor: pointer; user-select: none;
    background-color: transparent; border: 1px solid transparent;
    padding: 0.4375rem 1rem; /* ~7px 16px */
    font-size: 0.875rem; /* 14px */
    border-radius: 6px;
    transition: all 0.2s ease-in-out; /* Transition mượt hơn */
}
#guest-comments-area .gc-btn:focus {
    outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Màu nhấn */
}
#guest-comments-area .gc-btn i, #guest-comments-area .gc-btn svg {
    margin-right: 0.5em; line-height: 1;
}

/* Primary Button (Gửi Bình Luận, Lưu Popup) */
#guest-comments-area .comment-form .gc-btn-primary.gc-submit-comment,
#guest-comments-area .gc-info-popup .gc-btn-primary.gc-save-guest-info-btn {
    color: #ffffff;
    background-color: #007bff; /* Màu xanh dương primary (Bootstrap) */
    border-color: #007bff;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
}
#guest-comments-area .comment-form .gc-btn-primary.gc-submit-comment:hover,
#guest-comments-area .gc-info-popup .gc-btn-primary.gc-save-guest-info-btn:hover {
    background-color: #0069d9; border-color: #0062cc; color: #ffffff;
}

/* Secondary Button (Cancel Popup) */
#guest-comments-area .gc-btn-secondary {
    color: #343a40; background-color: #e9ecef; border-color: #ced4da;
}
#guest-comments-area .gc-btn-secondary:hover {
    background-color: #dde1e5; border-color: #ced4da; color: #343a40;
}

/* Load More Button (style như link) */
#guest-comments-area #load-more-comments.gc-load-more-btn {
    margin: 20px 0 0 52px; /* Thụt vào theo avatar cha + margin */
    font-weight: 500; color: #007bff; background: none; border: none;
    box-shadow: none; padding: 5px 0; font-size: 0.875rem;
}
#guest-comments-area #load-more-comments.gc-load-more-btn:hover {
    text-decoration: underline; background: none; color: #0056b3;
}


/* --- Reply Form Specifics --- */
#guest-comments-area .reply-form-container {
    margin-top: 10px; padding-left: 52px; /* 36px avatar cha + 8px margin + 8px padding thêm */
}
#guest-comments-area .reply-form { background-color: transparent; padding: 0; border: none; margin-bottom: 0; }
#guest-comments-area .reply-to-info {
    font-size: 0.85rem; color: #495057; margin-bottom: 8px; line-height: 1.5;
    padding: 6px 10px; background-color: #eef2f7; border-radius: 4px;
}
/* Nút Hủy Trả Lời */
#guest-comments-area .reply-to-info .gc-cancel-reply-btn {
    font-size: inherit; font-weight: 500; color: #007bff; text-decoration: none;
    background: none; border: none; padding: 0; margin-left: 8px; cursor: pointer;
}
#guest-comments-area .reply-to-info .gc-cancel-reply-btn:hover { text-decoration: underline; color: #0056b3; }


/* --- Comment List & Items --- */
#guest-comments-area .comment-item {
    display: flex; padding: 15px 0; border-top: 1px solid #eaecef;
}
#guest-comments-area .comment-item:first-child { border-top: none; padding-top: 0; }

#guest-comments-area .comment-author-avatar { margin-right: 12px; flex-shrink: 0; }
#guest-comments-area .comment-author-avatar img {
    width: 40px; /* Avatar lớn hơn chút */
    height: 40px;
    border-radius: 50%; display: block; background-color: #e9ecef; object-fit: cover;
}

#guest-comments-area .comment-item-main-content { flex-grow: 1; overflow: hidden; }

#guest-comments-area .comment-author-name-content {
    background-color: #f0f2f5; /* Nền xám nhạt cho khối comment */
    padding: 10px 15px; /* Padding lớn hơn */
    border-radius: 20px; /* Bo tròn nhiều hơn */
    display: inline-block; max-width: 100%;
    /* border: 1px solid #d8dee4; */ /* Bỏ border nếu đã có nền */
}

#guest-comments-area .commenter-info { display: flex; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
#guest-comments-area .commenter-name {
    font-weight: 650; color: #1f2328; font-size: 0.9rem; /* 14.4px */
    text-decoration: none; margin-right: 6px;
}
#guest-comments-area .commenter-name:hover { text-decoration: underline; color: #007bff; }
#guest-comments-area .commenter-phone-masked { font-size: 0.85em; color: #57606a; font-weight: normal; }

#guest-comments-area .comment-content {
    line-height: 1.55; color: #212529; font-size: 0.9375rem; /* 15px */ word-wrap: break-word;
}
#guest-comments-area .comment-content p { margin-bottom: 0.4em; }
#guest-comments-area .comment-content p:last-child { margin-bottom: 0; }

#guest-comments-area .comment-actions-and-date {
    padding: 4px 0 0 15px; /* Chỉ padding ngang, align với text trong comment-author-name-content */
    font-size: 0.8rem; /* 12.8px */
    color: #57606a;
    margin-top: 4px;
}
#guest-comments-area .comment-actions .gc-reply-btn { /* Nút trả lời dưới comment */
    font-weight: 600; color: #007bff; text-decoration: none;
    background: none; border: none; padding: 0; cursor: pointer;
}
#guest-comments-area .comment-actions .gc-reply-btn:hover { text-decoration: underline; color: #0056b3; }
#guest-comments-area .comment-date { margin-left: 6px; }
#guest-comments-area .comment-date::before { content: "·"; margin-right: 6px; font-weight: bold; }

/* --- Nested Comments / Replies --- */
#guest-comments-area .comment-replies {
    margin-left: 52px; /* Avatar cha (40px) + margin (12px) */
    padding-top: 10px;
    position: relative;
}
/* Đường kẻ nối dọc cho replies */
#guest-comments-area .comment-replies::before {
    content: ""; position: absolute;
    left: -33px; /* Điểm giữa của (margin-left - width avatar con / 2) */
    top: -5px; /* Bắt đầu từ trên comment cha một chút */
    bottom: 15px; /* Kết thúc ở khoảng giữa avatar reply cuối */
    width: 2px; background-color: #e9ecef;
}

#guest-comments-area .comment-replies .comment-item.comment-reply {
    border-top: none; /* Bỏ border-top cho reply item nếu đã có đường kẻ nối */
    padding-top: 8px;
    padding-bottom: 8px;
}
#guest-comments-area .comment-replies .comment-item.comment-reply .comment-author-avatar img {
    width: 32px; height: 32px;
}
/* Đường kẻ nối ngang từ đường kẻ dọc vào avatar của reply */
#guest-comments-area .comment-replies .comment-item.comment-reply .comment-author-avatar::before {
    content: ""; position: absolute;
    top: 16px; /* Căn giữa avatar reply (32px / 2) */
    left: -10px; /* Độ dài đường kẻ ngang nối vào */
    width: 10px; height: 2px; background-color: #e9ecef;
}
#guest-comments-area .comment-replies .reply-form-container {
    padding-left: 40px; /* 32px avatar reply + 8px margin */
}


/* --- Guest Info Popup Styling (Nâng cấp) --- */
.gc-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(33, 37, 41, 0.6); /* Overlay tối hơn */
    z-index: 1045; display: none; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.gc-info-popup {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background-color: #fff; padding: 25px 30px; border-radius: 10px; /* Bo tròn hơn */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Shadow rõ hơn */
    z-index: 1055; width: 90%; max-width: 430px; display: none;
    /* border: 1px solid #d0d7de; */ /* Bỏ border nếu đã có shadow đẹp */
}
.gc-info-popup h4 {
    margin-top: 0; margin-bottom: 10px; font-size: 1.3rem; font-weight: 600; color: #212529; text-align: center;
}
.gc-info-popup p {
    margin-bottom: 20px; font-size: 0.9rem; color: #495057; text-align: center;
}
.gc-info-popup .form-control-sm {
    border-radius: 6px; padding: 10px 15px; /* Padding giống form chính */
    background-color: #fff; border: 1px solid #ced4da; font-size: 0.9rem;
}
.gc-info-popup .form-control-sm:focus {
    border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.20);
}
.gc-info-popup .gc-popup-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }
.gc-info-popup .gc-btn { /* Nút trong popup kế thừa .gc-btn */ }
.gc-popup-message {
    font-size: 0.875rem; margin-top: 15px; padding: 10px 12px; border-radius: 6px; text-align: center;
}
.gc-popup-message.alert-danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* --- Các phần còn lại (Messages, No Comments, Responsive) --- */
#guest-comments-area #comment-message { /* Thông báo AJAX */
    padding: 12px 15px;
    border-radius: 6px;
    font-weight: 500; /* Đậm hơn một chút */
    margin-top: 20px;
    text-align: center;
    font-size: 0.9em;
    border-width: 1px;
    border-style: solid;
}
#guest-comments-area #comment-message.alert-success {
    background-color: #dafbe1;
    color: #0f5132;
    border-color: #badbcc;
}
#guest-comments-area #comment-message.alert-danger {
    background-color: #ffe3e6;
    color: #b31d2b;
    border-color: #f5c2c7;
}

#guest-comments-area .no-comments {
    color: #57606a;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
    background-color: #f6f8fa; /* Nền nhẹ khi không có comment */
    border-radius: 6px;
    margin-top: 15px;
}

@media (max-width: 575px) {
    #guest-comments-area { padding: 15px 10px; }
    #guest-comments-area .comments-title { font-size: 1.3em; }
    #guest-comments-area .comment-form .row.gx-2 > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin-bottom: 10px; }
    #guest-comments-area .comment-form .row.gx-2 > [class*="col-"]:last-child { margin-bottom: 0; }
    #guest-comments-area .comment-replies,
    #guest-comments-area .reply-form-container,
    #guest-comments-area #load-more-comments.gc-load-more-btn { margin-left: 0; }
    #guest-comments-area .comment-item { padding: 8px 0; }
    #guest-comments-area .comment-author-avatar { margin-right: 6px; }
    #guest-comments-area .comment-author-avatar img { width: 32px; height: 32px; }
    #guest-comments-area .comment-replies .comment-author-avatar img { width: 28px; height: 28px; }
    #guest-comments-area .comment-replies .reply-form-container { padding-left: 36px; }
    .gc-info-popup { padding: 15px; }
    .gc-info-popup h4 { font-size: 1.1rem; }
}

/* --- Nested Comments / Replies --- */
#guest-comments-area .comment-replies {
    margin-left: 44px; /* Khoảng cách thụt vào từ mép của comment cha (36px avatar cha + 8px margin) */
    padding-top: 8px;  /* Khoảng cách với phần content/actions của comment cha */
    /* border-left: 2px solid #eaecef; */ /* Tạm thời bỏ border-left ở đây để xem có phải do nó không, hoặc điều chỉnh sau */
    margin-top: 8px; /* Thêm chút margin top cho khối replies */
    clear: both; /* Đảm bảo không bị float ảnh hưởng nếu có */
}

/* Style cho từng comment item là reply */
#guest-comments-area .comment-item.comment-reply {
    /* Có thể không cần style đặc biệt ở đây nếu .comment-item đã đủ
       Nhưng nếu cần, bạn có thể làm nền hơi khác hoặc border nhẹ hơn */
    /* background-color: #fdfdfd; */
    /* border-top: 1px dashed #e0e0e0; */ /* Thay vì solid cho comment gốc */
    padding-top: 8px; /* Giảm padding top cho reply item nếu border-top của .comment-item đã có */
    padding-bottom: 8px;
}

/* Đảm bảo .comment-item-main-content trong reply cũng chiếm đủ không gian */
#guest-comments-area .comment-item.comment-reply .comment-item-main-content {
    /* Thường không cần thay đổi nhiều so với comment gốc,
       trừ khi bạn muốn font chữ hoặc padding khác đi */
}


#guest-comments-area .comment-replies .comment-author-avatar img {
    width: 30px;  /* Avatar của người reply nhỏ hơn một chút */
    height: 30px;
}

/* Form trả lời bên trong một reply item (nếu bạn cho phép trả lời reply) */
#guest-comments-area .comment-replies .reply-form-container {
    /* Thụt vào dựa trên kích thước avatar của reply */
    padding-left: 38px; /* 30px avatar reply + 8px margin */
    margin-top: 6px;
}


/* Responsive adjustments cho replies */
@media (max-width: 575px) {
    #guest-comments-area .comment-replies {
        margin-left: 10px; /* Giảm thụt vào tối đa trên mobile */
        padding-left: 10px; /* Giảm padding nếu có border */
        /* border-left-width: 1px; */ /* Border mỏng hơn nếu vẫn dùng */
    }

    #guest-comments-area .comment-replies .comment-author-avatar img {
        width: 28px;
        height: 28px;
    }

    #guest-comments-area .comment-replies .reply-form-container {
        padding-left: 34px; /* 28px avatar + 6px margin */
    }
}

/* === Guest Comment System - Admin Reply Styling === */

/* --- General Admin Comment Item --- */
#guest-comments-area .comment-item.comment-by-admin {
    /* Bạn có thể thêm một border đặc biệt hoặc thay đổi nền nhẹ nếu muốn */
    /* border-left: 3px solid #007bff; */ /* Ví dụ: một đường kẻ màu xanh bên trái */
    /* background-color: #e7f3ff; */ /* Nền xanh rất nhạt */
    /* padding-left: 10px; */ /* Thêm chút padding nếu có border-left */
}

/* --- Admin Name Styling --- */
#guest-comments-area .comment-item.comment-by-admin .commenter-name.admin-name {
    color: #007bff; /* Màu tên của admin (ví dụ: màu xanh FPT) */
    font-weight: 700; /* Đậm hơn */
}
/* Nếu bạn muốn icon trước tên admin */
/* #guest-comments-area .comment-item.comment-by-admin .commenter-name.admin-name::before {
    content: "\f3ed"; /* FontAwesome shield-alt icon (cần FontAwesome) */
/*    font-family: "Font Awesome 5 Free"; /* Hoặc "Font Awesome 6 Free" */
/*    font-weight: 900; /* Cho solid icons */
/*    margin-right: 6px;
    color: #007bff; /* Màu icon */
/* } */


/* --- Admin Badge Styling --- */
#guest-comments-area .comment-item.comment-by-admin .admin-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 0.75em; /* Nhỏ hơn chút */
    font-weight: 600;
    color: #fff;
    background-color: #007bff; /* Màu nền badge (ví dụ: màu xanh FPT) */
    border-radius: 10px; /* Bo tròn badge */
    line-height: 1.4;
    vertical-align: middle; /* Căn giữa với tên */
}
#guest-comments-area .comment-item.comment-by-admin .admin-badge i {
    margin-right: 4px;
    font-size: 0.9em; /* Kích thước icon trong badge */
}


/* --- Admin Comment Content Box Styling --- */
#guest-comments-area .comment-item.comment-by-admin .comment-author-name-content.admin-comment-content-box {
    background-color: #e7f3ff; /* Nền xanh rất nhạt cho hộp thoại của admin */
    /* border: 1px solid #b8d6fb; */ /* Border nếu muốn */
}
/* Nếu bạn muốn đổi màu chữ trong hộp thoại của admin */
/* #guest-comments-area .comment-item.comment-by-admin .admin-comment-content-box .comment-content {
    color: #004085; /* Màu chữ đậm hơn trên nền nhạt */
/* } */


/* --- Styling cho nút "Trả lời" của admin (nếu nó khác biệt) --- */
/* Nếu nút trả lời của admin (khi admin là người tạo comment gốc) cần khác biệt */
/* #guest-comments-area .comment-item.comment-by-admin .comment-actions .gc-reply-btn {
    color: #0056b3; /* Ví dụ: màu đậm hơn cho nút trả lời của admin */
/* } */