/* General Styles */
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f9; }
.container-fluid { padding: 20px; }
.nav-tabs .nav-link { color: #495057; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; }
.nav-tabs .nav-link.active { color: #fff; background-color: #007bff; border-color: #007bff; }
.prompt-group label { margin-bottom: 5px; }
.prompt-group .form-control, .prompt-group .form-select { border-radius: 4px; border: 1px solid #ced4da; padding: 8px 12px; margin-bottom: 10px; }
.btn { padding: 8px 16px; border-radius: 4px; font-weight: 600; transition: background-color 0.3s ease; }
.btn-primary { background-color: #007bff; border: none; }
.btn-primary:hover { background-color: #0056b3; }
.btn-info { background-color: #17a2b8; border: none; }
.btn-info:hover { background-color: #117a8b; }
.btn-danger { background-color: #dc3545; border: none; }
.btn-danger:hover { background-color: #b02a37; }
.btn-success { background-color: #28a745; border: none; }
.btn-success:hover { background-color: #1e7e34; }
.btn-secondary { background-color: #6c757d; border: none; }
.btn-secondary:hover { background-color: #545b62; }
.file-table { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.file-table th, .file-table td { padding: 10px; text-align: left; border: 1px solid #ddd; }
.file-table th { background-color: #f2f2f2; font-weight: bold; }
.file-table td { background-color: #fff; }
.file-table .content { background-color: #f9f9f9; border-radius: 4px; white-space: pre-wrap; word-wrap: break-word; overflow-x: auto; max-height: 200px; overflow-y: auto; }
.file-table .edit-icon, .file-table .save-icon, .file-table .copy-icon, .file-table .generate-image-icon, .file-table .download-icon { cursor: pointer; color: #007bff; margin-left: 5px; }
.file-table .edit-icon:hover, .file-table .save-icon:hover, .file-table .generate-image-icon:hover, .file-table .download-icon:hover { color: #0056b3; }
.file-table .save-icon { display: none; }
.file-table .action-buttons { display: flex; align-items: center; }
.file-table .action-buttons .form-select { margin-left: 10px; padding: 5px; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; color: #333; }
.file-table .action-buttons .form-select:focus { border-color: #007bff; outline: none; }
.file-table .loading, #systemStatus { color: #007bff; margin-top: 10px; }
.file-table .image-column { width: 150px; text-align: center; }
.image-preview { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 5px; display: block; margin-left: auto; margin-right: auto; }
.image-actions { display: flex; justify-content: center; gap: 5px; margin-top: 5px; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.image-grid .image-container { border: 1px solid #ddd; border-radius: 4px; padding: 10px; }
.image-grid img { width: 100%; height: auto; border-radius: 4px; }
.nav-tabs .nav-link i { margin-right: 5px; }
.nav-tabs .nav-link.ms-auto { padding: 0.5rem 1rem; }
.modal-dialog { max-width: 800px; }
.modal-content { border-radius: 8px; }
.modal-header { background-color: #f2f2f2; border-bottom: 1px solid #ddd; padding: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.modal-title { font-weight: bold; }
.modal-body { padding: 15px; }
.modal-footer { border-top: 1px solid #ddd; padding: 15px; }
#historyList { padding: 10px; }
.history-item { border: 1px solid #ccc; margin-bottom: 10px; padding: 10px; border-radius: 5px; background-color: #f8f8f8; }
.history-item .history-prompt, .history-item .history-response { margin-bottom: 5px; }
.history-item .preview { color: #333; }
.history-item .expand-prompt, .history-item .expand-response { color: #0d6efd; text-decoration: none; font-size: 0.9em; }
.history-item .expand-prompt:hover, .history-item .expand-response:hover { text-decoration: underline; }
.history-item .full-content { margin-top: 10px; border-top: 1px solid #ccc; padding-top: 10px; }
.history-item .full-content pre { white-space: pre-wrap; font-family: monospace; font-size: 0.9em; color: #333; }
.history-item .history-actions { margin-top: 5px; }
.history-actions .btn { margin-right: 5px; }
.downloadCsv {
            display: flex;
            align-items: center; /* Căn giữa các phần tử theo chiều dọc */
            gap: 10px; /* Khoảng cách giữa các phần tử */
        }