Trích xuất tin tức mới nhất từ https://bongdaplus.vn, khi nhấn vào từng tin sẽ hiện ra 6tin tức dưới dạng ý chính kèm theo toàn bộ hình ảnh bài viết

index.html

@@ -34,13 +34,13 @@
     </main>
 
     <custom-footer></custom-footer>
-
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();
     </script>
+    <script src="https://cdn.jsdelivr.net/npm/rss-parser@3.12.0/dist/rss-parser.min.js"></script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

style.css

@@ -1,3 +1,4 @@
+
 /* Custom styles */
 body {
     font-family: 'Be Vietnam Pro', sans-serif;
@@ -8,6 +9,9 @@ body {
 
 .news-card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .news-card:hover {
@@ -15,12 +19,46 @@ body {
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
 
+.news-card img {
+    transition: transform 0.3s ease;
+}
+
+.news-card:hover img {
+    transform: scale(1.05);
+}
+
 #news-modal {
     opacity: 0;
     transition: opacity 0.3s ease;
+    display: none;
 }
 
 #news-modal.show {
     opacity: 1;
     display: block;
-}
+}
+
+.line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+#modal-content img {
+    max-height: 400px;
+    object-fit: cover;
+}
+
+@media (max-width: 640px) {
+    #modal-content img {
+        max-height: 250px;
+    }
+}