/* CSS tùy chỉnh cho hiệu ứng loading */
.loader {
    border: 4px solid #f3f3f3;
    /* light grey */
    border-top: 4px solid #3498db;
    /* blue */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* *** ĐÃ SỬA: Ghi đè style của Facebook comment plugin để đảm bảo responsive *** */
/* Buộc container của plugin chiếm toàn bộ chiều rộng */
.fb-comments {
    width: 100% !important;
}

    /* Facebook bọc iframe trong một thẻ span thường có width cố định. Ghi đè nó. */
    .fb-comments > span,
    .fb-comments > span > iframe[style] {
        width: 100% !important;
    }

/* *** NOTIFICATION STYLES *** */
/* Simple toast notification styles */
.notification-toast {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 10000 !important;
    max-width: 350px !important;
    pointer-events: auto !important;
}

/* Mobile responsive cho notification */
@media (max-width: 640px) {
    .notification-toast {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
        width: calc(100% - 20px) !important;
    }
}