Thêm tính năng hiển thị ảnh ở quản lí ảnh và media

frontend/css/style.css

@@ -689,3 +689,64 @@ html, body {
     visibility: visible;
     top: -55px; /* Nhích lên một chút khi xuất hiện */
 }
+
+/* --- Media Library Dashboard --- */
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 20px;
+    margin-top: 15px;
+}
+
+.media-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    flex-direction: column;
+}
+
+.media-card.trash-item { border-color: rgba(220, 53, 69, 0.4); }
+
+.media-thumb {
+    position: relative;
+    width: 100%;
+    height: 120px;
+    background: #000;
+}
+
+.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
+
+.badge-trash {
+    position: absolute; top: 8px; right: 8px;
+    background: #dc3545; color: white; font-size: 10px;
+    padding: 2px 6px; border-radius: 4px; font-weight: bold;
+}
+
+.media-info { padding: 12px; flex: 1; }
+.media-info strong { display: block; font-size: 15px; margin-bottom: 5px; }
+.media-info .desc { font-size: 12px; color: #aaa; margin-bottom: 8px; }
+.media-info .parent-link { font-size: 11px; color: #007bff; margin-bottom: 5px; }
+.media-info .date { font-size: 10px; color: #666; }
+
+.media-actions {
+    padding: 10px;
+    display: flex;
+    gap: 8px;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.edit-btn-small, .delete-btn-small {
+    flex: 1;
+    padding: 6px;
+    font-size: 11px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.edit-btn-small { background: #28a745; color: white; }
+.delete-btn-small { background: #dc3545; color: white; }
+.media-actions button:hover { opacity: 0.8; }