fix load more and improve vide page

css/styles.css

@@ -325,11 +325,12 @@ img {
 /* Video Sections */
 .video-section {
     margin-bottom: 40px;
+    position: relative;
 }
 
 .video-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
     gap: 20px;
 }
 
@@ -340,6 +341,9 @@ img {
     box-shadow: var(--card-shadow);
     transition: transform 0.3s;
     cursor: pointer;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .video-card:hover {
@@ -349,6 +353,7 @@ img {
 .video-thumbnail {
     position: relative;
     padding-top: 56.25%; /* 16:9 aspect ratio */
+    overflow: hidden;
 }
 
 .video-thumbnail img {
@@ -377,6 +382,9 @@ img {
 
 .video-info {
     padding: 15px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 .video-title {
@@ -388,6 +396,16 @@ img {
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
+    flex-grow: 1;
+}
+
+.video-channel {
+    font-size: 14px;
+    color: #555;
+    margin-bottom: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .video-metadata {
@@ -396,6 +414,31 @@ img {
     justify-content: space-between;
     font-size: 12px;
     color: #666;
+    margin-top: auto;
+}
+
+.video-metadata i {
+    margin-right: 4px;
+    font-size: 13px;
+    color: var(--primary-red);
+}
+
+.video-views, .video-date {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+}
+
+.video-duration {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 3px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
 }
 
 .video-tag {
@@ -407,24 +450,23 @@ img {
     margin-right: 5px;
 }
 
-.video-date, .video-views {
-    font-size: 12px;
-}
-
 /* Carousel */
 .carousel {
     position: relative;
     overflow: hidden;
+    margin: 15px 0 30px;
+    padding: 10px 0;
 }
 
 .carousel-container {
     display: flex;
     transition: transform 0.5s ease;
+    padding-bottom: 10px;
 }
 
 .carousel-item {
     flex: 0 0 auto;
-    width: 280px;
+    width: 220px;
     margin-right: 20px;
 }
 
@@ -441,28 +483,43 @@ img {
     background-color: #ccc;
     margin: 0 5px;
     cursor: pointer;
+    transition: all 0.2s ease;
 }
 
 .carousel-dot.active {
     background-color: var(--primary-red);
+    transform: scale(1.2);
 }
 
 /* View More Button */
 .view-more {
     display: block;
     width: max-content;
-    margin: 20px auto;
-    padding: 10px 25px;
-    background-color: var(--search-bg);
+    margin: 25px auto 5px;
+    padding: 12px 30px;
+    background-color: var(--primary-red);
+    color: white;
     border: none;
     border-radius: 4px;
     font-size: 16px;
+    font-weight: 500;
     cursor: pointer;
-    transition: background-color 0.2s;
+    transition: all 0.2s;
+    text-transform: uppercase;
+    letter-spacing: 1px;
 }
 
 .view-more:hover {
-    background-color: #d0d0d0;
+    background-color: #cc0000;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.view-more:disabled {
+    background-color: #999;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
 }
 
 /* Info Section */
@@ -689,13 +746,19 @@ img {
 
 @media (max-width: 992px) {
     .video-grid {
-        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        grid-template-columns: repeat(2, 1fr);
+        gap: 15px;
+    }
+    
+    .video-title {
+        font-size: 15px;
     }
 }
 
 @media (max-width: 576px) {
     .video-grid {
         grid-template-columns: 1fr;
+        gap: 15px;
     }
     
     .section-title {
@@ -714,4 +777,8 @@ img {
     .play-button i {
         font-size: 24px;
     }
+    
+    .video-title {
+        font-size: 16px;
+    }
 }