update

src/features/Article/CategoryPage/index.tsx

@@ -5,8 +5,8 @@ import Image from 'next/image';
 
 import type { TypeArticleCatePage } from '@/types/article/TypeArticleCatePage';
 
-import { Breadcrumb } from '@components/Common/Breadcrumb';
-import { ErrorLink } from '@components/Common/Error';
+import { Breadcrumb } from '@/components/Common/Breadcrumb';
+import { ErrorLink } from '@/components/Common/Error';
 import { ArticleTopLeft } from '../ArticleTopLeft';
 import { ArticleTopRight } from '../ArticleTopRight';
 import ItemArticle from '@/components/Common/ItemArticle';
@@ -85,7 +85,7 @@ const ArticleCategoryPage: React.FC<CategoryPageProps> = ({ slug }) => {
               ))}
             </div>
             <Link
-              href="/tin-cong-nghe"
+              href={currentCategory.category_info.request_path}
               className="btn-article-col flex items-center justify-center gap-2 font-[500]"
             >
               Xem tất cả

src/features/Article/DetailPage/TocBox/index.tsx

@@ -92,18 +92,18 @@ export default function TocBox({ htmlContent }: { htmlContent: string }) {
     };
   }, [htmlContent]);
 
-  if (!headingsTree.length) return null;
-
   return (
     <>
-      <div className="archor-text-group">
-        <div className="toc_title flex items-center justify-between gap-2">
-          <b className="text-fint-toc flex items-center text-base font-bold">
-            <span>Nội dung chính</span>
-          </b>
+      {headingsTree.length > 0 && (
+        <div className="archor-text-group">
+          <div className="toc_title flex items-center justify-between gap-2">
+            <b className="text-fint-toc flex items-center text-base font-bold">
+              <span>Nội dung chính</span>
+            </b>
+          </div>
+          <div id="js-outp">{renderTree(headingsTree)}</div>
         </div>
-        <div id="js-outp">{renderTree(headingsTree)}</div>
-      </div>
+      )}
       <div
         className="box-article-detail-ct nd js_find"
         dangerouslySetInnerHTML={{ __html: contentWithIds }}

src/features/Article/DetailPage/index.tsx

@@ -4,9 +4,9 @@ import Link from 'next/link';
 import Image from 'next/image';
 
 import type { TypeArticleDetailPage } from '@/types/article/TypeArticleDetailPage';
-import { ErrorLink } from '@components/Common/Error';
+import { ErrorLink } from '@/components/Common/Error';
 
-import { Breadcrumb } from '@components/Common/Breadcrumb';
+import { Breadcrumb } from '@/components/Common/Breadcrumb';
 import TocBox from './TocBox';
 import PreLoader from '@/components/Common/PreLoader';
 import { getArticleCategories, getArticleDetail } from '@/lib/api/article';
@@ -93,9 +93,9 @@ const ArticleDetailPage: React.FC<DetailPageProps> = ({ slug }) => {
                         />
                       </Link>
                       <div className="content-article flex-1">
-                        <a href={item.url} className="title-article">
+                        <Link href={item.url} className="title-article">
                           <h3 className="font-weight-400 line-clamp-2">{item.title}</h3>
-                        </a>
+                        </Link>
                         <p className="time-article d-flex align-items-center gap-4">
                           <i className="sprite sprite-clock-item-article"></i>
                           <span>{item.createDate}</span>

src/features/Article/HomeArticlePage/index.tsx

@@ -2,7 +2,8 @@
 
 import React from 'react';
 import Link from 'next/link';
-import { Breadcrumb } from '@components/Common/Breadcrumb';
+import { Breadcrumb } from '@/components/Common/Breadcrumb';
+import Skeleton from '@/components/Common/Skeleton';
 
 import { ArticleTopLeft } from '../ArticleTopLeft';
 import { ArticleTopRight } from '../ArticleTopRight';
@@ -13,14 +14,45 @@ import { getArticleCategories } from '@/lib/api/article';
 import { useApiData } from '@/hooks/useApiData';
 import type { TypeArticleCategory } from '@/types/article/ListCategoryArticle';
 
+const ArticleHomeSkeleton = () => (
+  <section className="page-article pb-10">
+    <div className="container">
+      <Skeleton className="mb-4 h-5 w-48" />
+      <div className="tabs-category-article flex items-center gap-3">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Skeleton key={i} className="h-8 w-24" />
+        ))}
+      </div>
+      <div className="box-article-home-top mt-4 grid grid-cols-3 gap-3">
+        <div className="col-span-2 flex gap-3">
+          <Skeleton className="aspect-video flex-1" />
+          <div className="flex flex-1 flex-col gap-3">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Skeleton key={i} className="h-20 w-full" />
+            ))}
+          </div>
+        </div>
+        <div className="flex flex-col gap-3">
+          <Skeleton className="h-10 w-full" />
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-10 w-full" />
+          ))}
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
 const ArticleHome = () => {
   const breadcrumbItems = [{ name: 'Tin tức', url: '/tin-tuc' }];
-  const { data: categories } = useApiData(
+  const { data: categories, isLoading } = useApiData(
     () => getArticleCategories(),
     [],
     { initialData: [] as TypeArticleCategory[] },
   );
 
+  if (isLoading) return <ArticleHomeSkeleton />;
+
   return (
     <section className="page-article pb-10">
       <div className="container">