update

src/components/product/ProductDetail/BoxInfoRight/index.tsx

@@ -10,7 +10,6 @@ export const BoxInfoRight = (item: ProductDetailData) => {
       <h1 className="product-name color-black line-clamp-3 font-bold">
         {item.product_info.productName}
       </h1>
-
       <div className="list-basic-product-info flex flex-wrap items-center">
         <div className="item-basic">
           Mã SP: <span className="color-primary">{item.product_info.productSKU}</span>
@@ -32,7 +31,6 @@ export const BoxInfoRight = (item: ProductDetailData) => {
           </div>
         )}
       </div>
-
       {/*  tình trạng */}
       <div className="list-basic-product-info flex flex-wrap items-center gap-6">
         <div className="item-basic">
@@ -45,11 +43,8 @@ export const BoxInfoRight = (item: ProductDetailData) => {
           </div>
         )}
       </div>
-
       {/* giá */}
-
       <BoxPrice {...item} />
-
       {item.product_info.specialOffer.all.length > 0 && (
         <div className="box-offer-detail border-radius-10">
           <div className="title-offer-detail flex items-center">
@@ -66,7 +61,6 @@ export const BoxInfoRight = (item: ProductDetailData) => {
           </div>
         </div>
       )}
-
       {/*  mua hàng */}
       {(item.product_info.quantity > '0' || item.product_info.price > '0') && (
         <>
@@ -87,11 +81,7 @@ export const BoxInfoRight = (item: ProductDetailData) => {
                 +{' '}
               </p>
             </div>
-            <Link
+            <Link href="#" className="addCart flex flex-wrap items-center justify-center gap-3">
-              href="#"
-              onClick={() => addProductToCart(item.product_info.id, 0, '')}
-              className="addCart flex flex-wrap items-center justify-center gap-3"
-            >
               <i className="sprite sprite-cart-detail"></i>
               <p className="title-cart">Thêm vào giỏ hàng</p>
             </Link>
@@ -99,37 +89,24 @@ export const BoxInfoRight = (item: ProductDetailData) => {
           </div>
 
           <div id="detail-buy-ads" className="detail-buy grid grid-cols-2 gap-2">
-            <Link
+            <Link href="#" className="detail-buy-now col-span-2">
-              href="#"
-              className="detail-buy-now col-span-2"
-              onClick={() => buyNow(item.product_info.id, 0, '')}
-            >
               <span>ĐẶT MUA NGAY</span>
               Giao hàng tận nơi nhanh chóng
             </Link>
 
-            <Link
+            <Link href="#" className="detail-add-cart">
-              href="#"
-              className="detail-add-cart"
-              onClick={() => buyPayInstall(item.product_info.id, 0, '')}
-            >
               <span>TRẢ GÓP QUA HỒ SƠ</span>
               Chỉ từ 2.665.000₫/ tháng
             </Link>
 
-            <Link
+            <Link href="#" className="detail-add-cart">
-              href="#"
-              className="detail-add-cart"
-              onClick={() => buyAlepay(item.product_info.id, 0, '')}
-            >
               <span>TRẢ GÓP QUA THẺ</span>
               Chỉ từ 1.332.500₫/ tháng
             </Link>
           </div>
         </>
       )}
-
+      n{/*  yên tâm mua hàng */}
-      {/*  yên tâm mua hàng */}
       <div className="box-product-policy-detal boder-radius-10" style={{ marginTop: '24px' }}>
         <h2 className="title font-[600]">Yên tâm mua hàng</h2>
         <div className="list-showroom-detail flex flex-wrap justify-between">
@@ -151,7 +128,6 @@ export const BoxInfoRight = (item: ProductDetailData) => {
           </div>
         </div>
       </div>
-
       <BoxBought />
     </>
   );

src/components/product/ProductDetail/ProductComment/FormComment/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+interface FormCommentProps {
+  open: boolean;
+  onClose: () => void;
+}
+export const FormComment: React.FC<FormCommentProps> = ({ open, onClose }) => {
+  return (
+    <dialog id="commentDialog" className={`modal ${open ? 'modal-open' : ''}`}>
+      {' '}
+      <div className="modal-box">
+        <h3 className="mb-4 font-semibold">Nhập thông tin</h3>
+        <div className="space-y-4">
+          <div className="flex gap-4">
+            <label className="label cursor-pointer">
+              <input type="radio" name="sex" value="Anh" className="radio radio-xs" />
+              <span className="ml-2">Anh</span>
+            </label>
+            <label className="label cursor-pointer">
+              <input type="radio" name="sex" value="Chị" className="radio radio-xs" />
+              <span className="ml-2">Chị</span>
+            </label>
+          </div>
+
+          <input type="text" className="input input-md w-[95%]" placeholder="Họ tên (bắt buộc)" />
+
+          <input
+            type="email"
+            className="input input-md w-[95%]"
+            placeholder="Email (để nhận phản hồi qua mail)"
+          />
+
+          <button className="btn btn-active w-[93.5%] bg-red-500 text-white">Cập nhật</button>
+        </div>
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button onClick={onClose}>Đóng</button>
+      </form>
+    </dialog>
+  );
+};

src/components/product/ProductDetail/ProductComment/ListComment/index.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { ListCommentData } from '@/data/ListComment';
+import Image from 'next/image';
+
+export const ListComment = () => {
+  return (
+    <div className="comment-list">
+      {ListCommentData.slice(0.3).map((item, index) => (
+        <div className="item-comment" id={`comment_${item.id}`} key={index}>
+          <div className="form-reply-comment">
+            {/* header */}
+            <div className="comment-name flex justify-between">
+              <div className="comment-form-left flex items-center gap-2">
+                {item.user_avatar ? (
+                  <b className="avatar-user">
+                    <img src={item.user_avatar} alt={item.user_name} />
+                  </b>
+                ) : (
+                  <b className="avatar-user flex items-center justify-center">
+                    {' '}
+                    {item.user_name.charAt(0)}{' '}
+                  </b>
+                )}
+                <b className="user-name">{item.user_name}</b>
+              </div>
+              <div className="comment-form-right flex items-center gap-2 text-sm text-gray-500">
+                <i className="fa-regular fa-clock"></i> <span>{item.post_time}</span>
+              </div>
+            </div>{' '}
+            {/* content */}
+            <div className="comment-content mt-3 rounded p-2">
+              <p>{item.content}</p>
+              <div className="info_feeback mt-2 flex items-center gap-2">
+                <i className="sprite sprite-icon-reply-detail"></i>
+                <button className="btn-reply font-medium"> Trả lời </button>{' '}
+              </div>{' '}
+            </div>{' '}
+            {/* reply list */}
+            <div className="reply-list-container mt-4">
+              {item.new_replies.map((reply) => (
+                <div key={reply.id} className="item_reply mt-3">
+                  <div className="flex justify-between">
+                    <div className="flex items-center gap-2">
+                      {reply.user_avatar !== '0' ? (
+                        <b className="avatar-user flex items-center justify-center">
+                          {' '}
+                          <img src={reply.user_avatar} alt={reply.user_name} />{' '}
+                        </b>
+                      ) : (
+                        <b className="avatar-user flex items-center justify-center">
+                          {reply.user_name.charAt(0)}
+                        </b>
+                      )}
+                      <div className="comment-name">
+                        <b className="user-name">{reply.user_name}</b>
+                        {reply.is_user_admin === '1' && <i className="note font-medium">QTV</i>}
+                      </div>{' '}
+                    </div>
+                    <div className="text-sm text-gray-500">
+                      {new Date(Number(reply.post_time) * 1000).toLocaleDateString('vi-VN')}
+                    </div>{' '}
+                  </div>
+                  <div className="comment-content mt-2 rounded p-2">{reply.content} </div>{' '}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

src/components/product/ProductDetail/ProductComment/index.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { FormComment } from './FormComment';
+import { ListComment } from './ListComment';
+
+export const ProductComment: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="box-comment">
+      <p className="title-comment font-[600]">Hỏi và đáp</p>
+      <div className="comment-detail">
+        <div className="form-comment flex justify-between gap-2">
+          <textarea
+            className="comment_reply_content boder-radius-10"
+            id="content0"
+            placeholder="Xin mời để lại câu hỏi, Nguyencong sẽ trả lời ngay trong 1h, các câu hỏi sau 22h - 8h sẽ được trả lời vào sáng hôm sau."
+            name="user_post[content]"
+          ></textarea>
+          <button
+            className="btn-send-form-comment send-comment-pc flex items-center justify-center gap-2"
+            onClick={() => setOpen(true)}
+          >
+            <i className="sprite sprite-icon-send-detail"></i>Gửi
+          </button>
+        </div>
+        <FormComment open={open} onClose={() => setOpen(false)} />
+      </div>
+
+      {/* list comment */}
+      <ListComment />
+    </div>
+  );
+};

src/components/product/ProductDetail/ProductDescription/index.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { FaAngleDown, FaAngleUp } from 'react-icons/fa6';
+import type { ProductDetailData } from '@/types';
+import Link from 'next/link';
+
+export const ProductDescription = (item: ProductDetailData) => {
+  const [expanded, setExpanded] = useState(false);
+
+  if (!item.product_info.productDescription) return null;
+
+  return (
+    <div className="box-descreption-detail">
+      <h2 className="titlle-descreption font-[500]">Giới thiệu {item.product_info.productName}</h2>
+      <div
+        className={`content-descreption-detail static-html relative ${
+          expanded ? 'max-h-none' : 'max-h-[467px] overflow-hidden'
+        }`}
+        dangerouslySetInnerHTML={{ __html: item.product_info.productDescription }}
+      />
+      <div
+        onClick={() => setExpanded(!expanded)}
+        className="btn-article-col js-viewmore-content flex items-center justify-center gap-2 font-[500]"
+      >
+        <span>{expanded ? 'Thu gọn' : 'Xem tất cả'}</span>
+        {expanded ? <FaAngleUp /> : <FaAngleDown />}
+      </div>
+    </div>
+  );
+};

src/components/product/ProductDetail/ProductReview/FormReview/index.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+
+export const FormReview: React.FC = () => {
+  return (
+    <div className="box-form-review" id="js-box-review">
+      <textarea
+        className="review_reply_content"
+        id="rating-content"
+        placeholder="Mời bạn để lại đánh giá..."
+        name="user_post[content]"
+      ></textarea>
+
+      <div className="actions-comment">
+        <div className="infomation-customer">
+          <table>
+            <tbody>
+              <tr className="flex items-center">
+                <td>
+                  <label>Đánh giá:</label>
+                </td>
+                <td>
+                  <div className="rating" id="select-rate-pro">
+                    <div className="rating-selection" id="rating-review0">
+                      <input
+                        type="radio"
+                        className="rating-input"
+                        id="rating-input-review-0-5"
+                        value="5"
+                        name="user_post[rate]"
+                        defaultChecked
+                      />
+                      <label
+                        htmlFor="rating-input-review-0-5"
+                        className="sprite-1star rating-star"
+                      ></label>
+
+                      <input
+                        type="radio"
+                        className="rating-input"
+                        id="rating-input-review-0-4"
+                        value="4"
+                        name="user_post[rate]"
+                      />
+                      <label
+                        htmlFor="rating-input-review-0-4"
+                        className="sprite-1star rating-star"
+                      ></label>
+
+                      <input
+                        type="radio"
+                        className="rating-input"
+                        id="rating-input-review-0-3"
+                        value="3"
+                        name="user_post[rate]"
+                      />
+                      <label
+                        htmlFor="rating-input-review-0-3"
+                        className="sprite-1star rating-star"
+                      ></label>
+
+                      <input
+                        type="radio"
+                        className="rating-input"
+                        id="rating-input-review-0-2"
+                        value="2"
+                        name="user_post[rate]"
+                      />
+                      <label
+                        htmlFor="rating-input-review-0-2"
+                        className="sprite-1star rating-star"
+                      ></label>
+
+                      <input
+                        type="radio"
+                        className="rating-input"
+                        id="rating-input-review-0-1"
+                        value="1"
+                        name="user_post[rate]"
+                      />
+                      <label
+                        htmlFor="rating-input-review-0-1"
+                        className="sprite-1star rating-star"
+                      ></label>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+
+              <tr className="flex items-center">
+                <td>Tên bạn</td>
+                <td>
+                  <input
+                    type="text"
+                    id="rating-name"
+                    name="user_post[user_name]"
+                    className="form-control"
+                    defaultValue=""
+                  />
+                </td>
+              </tr>
+
+              <tr className="flex items-center">
+                <td>Email</td>
+                <td>
+                  <input
+                    type="text"
+                    id="rating-email"
+                    name="user_post[user_email]"
+                    className="form-control"
+                    defaultValue=""
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <p
+          id="js-review-note"
+          className="font-weight-700 flex"
+          style={{ color: 'red', maxWidth: '100%' }}
+        ></p>
+
+        <button
+          type="button"
+          className="btn-review send_form mt-12 mb-10"
+          onClick={() => {
+            // TODO: viết hàm send_vote() trong React
+            console.log('Send vote clicked');
+          }}
+        >
+          Gửi đánh giá
+        </button>
+      </div>
+    </div>
+  );
+};

src/components/product/ProductDetail/ProductReview/ListReview/index.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { ListReviewData } from '@/data/ListReview';
+import Image from 'next/image';
+
+export const ListReview = () => {
+  const [showAll, setShowAll] = useState(false);
+  const visibleReviews = showAll ? ListReviewData : ListReviewData.slice(0, 3);
+
+  return (
+    <div className="list-review">
+      {visibleReviews.map((review) => {
+        const avatarLetter = review.user_name.charAt(0).toUpperCase();
+        const date = new Date(Number(review.post_time) * 1000).toLocaleDateString('vi-VN');
+
+        return (
+          <div key={review.id} className="item-comment">
+            <div className="form-reply-comment">
+              {/* header */}
+              <div className="comment-name flex items-center justify-between">
+                <div className="comment-form-left flex items-center gap-2">
+                  {review.user_avatar ? (
+                    <b className="avatar-user js-avatar-user flex items-center justify-center">
+                      <Image src={review.user_avatar} alt={review.user_name} />
+                    </b>
+                  ) : (
+                    <b className="avatar-user js-avatar-user flex items-center justify-center">
+                      {avatarLetter}
+                    </b>
+                  )}
+                  <b className="user-name flex items-center gap-2">{review.user_name}</b>
+                </div>
+                <div className="comment-form-right flex items-center gap-2">
+                  <i className="fa-regular fa-clock"></i>
+                  <span style={{ color: '#787878', fontSize: 12, marginRight: 4 }}>{date}</span>
+                </div>
+              </div>
+
+              {/* content */}
+              <div className="comment-content boder-radius-10 relative mt-3">
+                <div className="text-review flex flex-col gap-2">
+                  <p className="flex items-center">
+                    <b>Đánh giá:</b> <i className={`sprite-star-5 star${review.rate}`}></i>
+                  </p>
+                  <p className="flex items-center">
+                    <b>Nhận xét:</b>
+                    <span style={{ width: '80%' }}>{review.content}</span>
+                  </p>
+                </div>
+
+                {/* feedback actions */}
+                <div className="info_feeback flex items-center gap-2">
+                  <i className="sprite sprite-icon-reply-detail"></i>
+                  <button className="write_reply btn-reply font-weight-500">Trả lời</button>
+                </div>
+
+                {/* images nếu có */}
+                <div className="jd-img-review flex flex-col gap-2">
+                  {review.files.map((file) => (
+                    <Image
+                      key={file.id}
+                      src={file.file_path}
+                      alt={file.title}
+                      width={100}
+                      height={60}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              {/* reply list */}
+              <div className="reply-holder reply-list-container">
+                {review.new_replies.map((reply) => (
+                  <div key={reply.id} className="item_reply mt-3">
+                    <div className="flex items-center justify-between">
+                      <div className="comment-left-form item-center flex gap-2">
+                        <b className="avatar-user avatar-admin">
+                          {reply.user_avatar !== '0' ? (
+                            <img src={reply.user_avatar} alt={reply.user_name} />
+                          ) : (
+                            reply.user_name.charAt(0)
+                          )}
+                        </b>
+                        <div className="comment-name mb-10">
+                          <b className="user-name">{reply.user_name}</b>
+                          {reply.is_user_admin === '1' && <i className="note font-[500]">QTV</i>}
+                        </div>
+                      </div>
+                      <div className="info_feeback comment-right-form">
+                        <span style={{ color: '#787878', fontSize: 12 }}>({reply.post_time})</span>
+                      </div>
+                    </div>
+                    <div className="comment-content boder-radius-10">{reply.content}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+
+      {!showAll && ListReviewData.length > 3 && (
+        <button
+          id="first-review"
+          className="btn-more cursor-pointer"
+          onClick={() => setShowAll(true)}
+        >
+          Xem thêm đánh giá
+        </button>
+      )}
+
+      {showAll && (
+        <button
+          id="hide-review"
+          className="btn-more cursor-pointer"
+          onClick={() => setShowAll(false)}
+        >
+          Thu gọn
+        </button>
+      )}
+    </div>
+  );
+};

src/components/product/ProductDetail/ProductReview/index.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { Review } from '@/types';
+import { FaStar } from 'react-icons/fa6';
+import { FormReview } from './FormReview';
+import { ListReview } from './ListReview';
+
+interface Props {
+  ItemReview: Review;
+}
+
+export const ProductReview: React.FC<Props> = ({ ItemReview }) => {
+  const [showForm, setShowForm] = useState(false);
+
+  const { summary } = ItemReview;
+  const totalRate = summary.list_rate.reduce((acc, item) => acc + Number(item.total), 0);
+
+  // Tạo object chứa số lượng và phần trăm cho từng sao const
+  const rates = {
+    rate1: Number(summary.list_rate.find((r) => r.rate === '1')?.total || 0),
+    rate2: Number(summary.list_rate.find((r) => r.rate === '2')?.total || 0),
+    rate3: Number(summary.list_rate.find((r) => r.rate === '3')?.total || 0),
+    rate4: Number(summary.list_rate.find((r) => r.rate === '4')?.total || 0),
+    rate5: Number(summary.list_rate.find((r) => r.rate === '5')?.total || 0),
+  };
+  const percents = {
+    percent1: totalRate > 0 ? (rates.rate1 / totalRate) * 100 : 0,
+    percent2: totalRate > 0 ? (rates.rate2 / totalRate) * 100 : 0,
+    percent3: totalRate > 0 ? (rates.rate3 / totalRate) * 100 : 0,
+    percent4: totalRate > 0 ? (rates.rate4 / totalRate) * 100 : 0,
+    percent5: totalRate > 0 ? (rates.rate5 / totalRate) * 100 : 0,
+  };
+
+  return (
+    <div className="box-review">
+      <p className="title-review font-[600]">Bình luận và đánh giá</p>
+      <div className="review-customer-detail">
+        <form
+          action="/ajax/post_comment.php"
+          method="post"
+          encType="multipart/form-data"
+          className="form-post"
+        >
+          <div className="review-info boder-radius-10 flex">
+            <div className="avgRate flex flex-col items-center justify-center">
+              <span className="font-bold">{summary.avgRate}/5</span>
+              <i className={`sprite-star-5 star${summary.avgRate} icon-star-detail`}></i>
+              <p className="mt-3">{summary.total} đánh giá và nhận xét</p>
+            </div>
+            <div className="box-avg-rate-count">
+              <div className="avg-rate-count">
+                {[5, 4, 3, 2, 1].map((rate) => {
+                  const percent = percents[`percent${rate}` as keyof typeof percents];
+                  const total = rates[`rate${rate}` as keyof typeof rates];
+                  return (
+                    <div key={rate} className="avg-rate-item mt-2 flex items-center justify-center">
+                      <span className="rate-number flex items-center gap-1">
+                        {rate} <FaStar className="text-yellow-500" />
+                      </span>
+                      <div className="nhan-xet-bar">
+                        <div
+                          className={`percent percent${rate}`}
+                          style={{ width: `${percent}%` }}
+                        ></div>
+                      </div>
+                      <span className="total-avg-rate">
+                        <strong>{total}</strong> đánh giá
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+          <p className="text-danh-gia mb-5">Bạn đánh giá sao sản phẩm này</p>
+          {!showForm ? (
+            <div
+              className="button-review mx-auto flex cursor-pointer items-center justify-center"
+              onClick={() => setShowForm(true)}
+            >
+              {' '}
+              Đánh giá ngay{' '}
+            </div>
+          ) : (
+            <div
+              className="button-review mx-auto flex cursor-pointer items-center justify-center"
+              onClick={() => setShowForm(false)}
+            >
+              {' '}
+              Đóng lại{' '}
+            </div>
+          )}
+
+          {/* form */}
+          {showForm && <FormReview />}
+        </form>
+      </div>
+      <ListReview />
+    </div>
+  );
+};

src/components/product/ProductDetail/ProductSpec/index.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { FaAngleDown, FaAngleUp } from 'react-icons/fa6';
+import useFancybox from '@/hooks/useFancybox';
+
+interface Props {
+  ItemSpec: string;
+}
+
+export const ProductSpec: React.FC<Props> = ({ ItemSpec }) => {
+  const [fancyboxRef] = useFancybox({
+    closeButton: 'auto',
+    dragToClose: true,
+  });
+
+  return (
+    <div className="box-spec">
+      <h2 className="title font-[600]">Thông số kỹ thuật</h2>
+      <div className="content-spec relative" dangerouslySetInnerHTML={{ __html: ItemSpec }} />
+      <div id="product-spec" style={{ display: 'none' }} ref={fancyboxRef}>
+        <div className="box-top-centent-spec d-flex justify-content-between hide">
+          <h2 className="font-weight-600">Thông số kỹ thuật</h2>
+          <p
+            className="delelte-content-spec d-flex justify-content-center align-items-center"
+            data-fancybox-close
+          >
+            <i className="fa-solid fa-xmark"></i>
+          </p>
+        </div>
+        <div className="content-spec">
+          {/* thay vì {{ page.product_info.productSpec }} bạn truyền từ props */}
+          {ItemSpec}
+        </div>
+      </div>
+      <a
+        data-fancybox
+        data-options='{"src": "#product-spec", "touch": false, "smallBtn": false}'
+        href="javascript:;"
+        className="btn-article-col font-weight-500 flex items-center justify-center gap-2"
+      >
+        Xem đầy đủ thông số kỹ thuật
+        <FaAngleDown />
+      </a>
+    </div>
+  );
+};

src/components/product/ProductDetail/index.tsx

@@ -1,16 +1,28 @@
 'use client';
 import React from 'react';
 import Link from 'next/link';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation, Pagination } from 'swiper/modules';
+
+// type
 import type { ProductDetailData } from '@/types';
+
+// data
 import { productDetailData } from '@/data/product/detail';
+import { productData } from '@/data/ListProduct';
+
 import { findProductDetailBySlug } from '@/lib/product/productdetail';
 import { ErrorLink } from '@/components/Common/error';
-
 import { Breadcrumb } from '@/components/Common/Breadcrumb';
 import { ImageProduct } from './ImageProduct';
 import { ProductSummary } from './ProductSummary';
 import { ComboSetBox } from './ComboSet';
 import { BoxInfoRight } from './BoxInfoRight';
+import ItemProduct from '@/components/Common/ItemProduct';
+import { ProductDescription } from './ProductDescription';
+import { ProductSpec } from './ProductSpec';
+import { ProductReview } from './ProductReview';
+import { ProductComment } from './ProductComment';
 
 interface ProductDetailPageProps {
   slug: string;
@@ -51,6 +63,65 @@ const ProductDetailPage: React.FC<ProductDetailPageProps> = ({ slug }) => {
               <BoxInfoRight {...Products} />
             </div>
           </div>
+          {/* sản phẩm tương tự */}
+          <div className="box-relative-product box-history-product page-hompage">
+            <div className="box-product-category">
+              <div className="title-box">
+                <h2 className="title title-box font-[600]">Sản phẩm tương tự</h2>
+              </div>
+              <div className="box-list-history-product">
+                <Swiper
+                  modules={[Autoplay, Navigation, Pagination]}
+                  spaceBetween={12}
+                  slidesPerView={5}
+                  loop={true}
+                >
+                  {productData.map((item, index) => (
+                    <SwiperSlide key={index}>
+                      <ItemProduct item={item} />
+                    </SwiperSlide>
+                  ))}
+                </Swiper>
+              </div>
+            </div>
+          </div>
+
+          {/* nội dung chi tiết sản phẩm */}
+          <div className="box-read-product-detail flex justify-between gap-3">
+            <div className="box-left">
+              {/* mô tả chi tiết sản phẩm */}
+              <ProductDescription {...Products} />
+              {/* đánh giá sản phẩm */}
+              <ProductReview ItemReview={Products.product_info.review} />
+              {/* bình luận sản phẩm */}
+              <ProductComment />
+            </div>
+            <div className="box-right">
+              <ProductSpec ItemSpec={Products.product_info.productSpec} />
+            </div>
+          </div>
+          {/* sản phẩm đã xem */}
+          <div className="box-history-product page-hompage mt-5">
+            <div className="box-product-category">
+              <div className="title-box">
+                <h2 className="title title-box font-[600]">Sản phẩm đã xem</h2>
+              </div>
+              <div className="box-list-history-product">
+                <Swiper
+                  modules={[Autoplay, Navigation, Pagination]}
+                  spaceBetween={12}
+                  slidesPerView={5}
+                  loop={true}
+                >
+                  {productData.map((item, index) => (
+                    <SwiperSlide key={index}>
+                      <ItemProduct item={item} />
+                    </SwiperSlide>
+                  ))}
+                </Swiper>
+              </div>
+            </div>
+          </div>
         </div>
       </section>
     </>

src/data/ListComment/index.tsx

@@ -0,0 +1,647 @@
+import { ProductCommentData } from '@/types/Comment';
+
+export const ListCommentData: ProductCommentData[] = [
+  {
+    id: '2434',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Nguyễn Thanh Tùng',
+    rate: '5',
+    title: 'Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA 4GB [TẶNG MÀN HÌNH]',
+    content: 'Cây này treo được bao nhiêu tab giả lập vậy ạ',
+    files: [],
+    approved: '1',
+    post_time: '1766807320',
+    counter: 1,
+    new_replies: [
+      {
+        id: '1616',
+        comment_id: '2434',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content:
+          'Bạn vui lòng liên hệ 0828.333.363, nhân viên kinh doanh bên mình sẽ tư vấn cụ thể nhé',
+        post_time: '1766824192',
+      },
+    ],
+  },
+  {
+    id: '2389',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Lưu Gia Dân ',
+    rate: '5',
+    title: 'Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB [TẶNG MÀN HÌNH]',
+    content: 'Bộ pc tặng màn hình này có ở sài gòn 0? Cụ thể là quận 10 cũ. ',
+    files: [],
+    approved: '1',
+    post_time: '1764736998',
+    counter: 2,
+    new_replies: [
+      {
+        id: '1579',
+        comment_id: '2389',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content:
+          'Dạ bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB sẵn hàng tại HCM ạ',
+        post_time: '1764745059',
+      },
+    ],
+  },
+  {
+    id: '2377',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Phan Van Manh',
+    rate: '5',
+    title: 'Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB [TẶNG MÀN HÌNH]',
+    content: 'mình có như cầu mua, cần tư vấn thêm',
+    files: [],
+    approved: '1',
+    post_time: '1764322841',
+    counter: 3,
+    new_replies: [
+      {
+        id: '1571',
+        comment_id: '2377',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content:
+          'Bạn vui lòng liên hệ 0828.333.363, nhân viên kinh doanh bên mình sẽ tư vấn cụ thể nhé',
+        post_time: '1764383633',
+      },
+    ],
+  },
+  {
+    id: '2368',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Nguyen Van Phung',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content: 'Bộ này em có sẵn màn  LG UltraGear 24GS50F-B 24 inch Gắn dc kh ạ',
+    files: [],
+    approved: '1',
+    post_time: '1764167165',
+    counter: 4,
+    new_replies: [
+      {
+        id: '1563',
+        comment_id: '2368',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content: 'Dạ bộ Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB gắn được ạ',
+        post_time: '1764211206',
+      },
+    ],
+  },
+  {
+    id: '2362',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Xuân hữu',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content: 'Bộ này chơi TFT FPS CÓ BỊ TỤT KHÔNG SHOP',
+    files: [],
+    approved: '1',
+    post_time: '1763897716',
+    counter: 5,
+    new_replies: [
+      {
+        id: '1557',
+        comment_id: '2362',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content:
+          'Dạ bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB chơi TFT thoải mái ạ',
+        post_time: '1763950132',
+      },
+    ],
+  },
+  {
+    id: '2341',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'dat phan',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content: 'Bộ này dùng để code được kh ạ\n',
+    files: [],
+    approved: '1',
+    post_time: '1763463359',
+    counter: 6,
+    new_replies: [
+      {
+        id: '1546',
+        comment_id: '2341',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content:
+          'Dạ code được ạ. Bạn vui lòng liên hệ 0828.333.363, nhân viên kinh doanh bên mình sẽ tư vấn cụ thể nhé',
+        post_time: '1763536700',
+      },
+    ],
+  },
+  {
+    id: '2291',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Tú nè nè',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content: 'Có giảm gì không anh em còn đúng 10tr',
+    files: [],
+    approved: '1',
+    post_time: '1762067763',
+    counter: 7,
+    new_replies: [
+      {
+        id: '1506',
+        comment_id: '2291',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content: 'Dạ bộ PC có chương trình tặng màn hình ạ.',
+        post_time: '1762136212',
+      },
+    ],
+  },
+  {
+    id: '2282',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Nguyễn Văn Sáu',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content:
+      'Shop ơi mình chưa lắp pc bao giờ shop có hỗ trợ lắp đặt ở Phú Thọ k ạ, mình ở Phú Thọ',
+    files: [],
+    approved: '1',
+    post_time: '1761828423',
+    counter: 8,
+    new_replies: [
+      {
+        id: '1499',
+        comment_id: '2282',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content:
+          'Bạn vui lòng liên hệ 0828.333.363, nhân viên kinh doanh bên mình sẽ tư vấn cụ thể nhé',
+        post_time: '1761875528',
+      },
+    ],
+  },
+  {
+    id: '2260',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '0',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Trần Huy',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content:
+      'Mình đặt hàng từ lúc giá là 10tr9 mà không được liên hệ tư vấn, đến nay lên 11tr4 rồi thì giá lúc đặt hàng vẫn áp dụng chứ ?',
+    files: [],
+    approved: '0',
+    post_time: '1761133383',
+    counter: 9,
+    new_replies: [],
+  },
+  {
+    id: '2253',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Minh Hải Nguyễn',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content: 'Shop ơi bộ này kèm cả case và màn đúng không ạ?\n',
+    files: [],
+    approved: '1',
+    post_time: '1760971409',
+    counter: 10,
+    new_replies: [
+      {
+        id: '1473',
+        comment_id: '2253',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content: 'Dạ bộ PC đã kèm vỏ ạ và được tặng màn hình ạ',
+        post_time: '1761011806',
+      },
+    ],
+  },
+  {
+    id: '2222',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'thái 0507',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content: 'bộ này có màn k ạ\n',
+    files: [],
+    approved: '1',
+    post_time: '1759637210',
+    counter: 11,
+    new_replies: [
+      {
+        id: '1449',
+        comment_id: '2222',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content: 'Dạ bộ này có tặng màn hình ạ',
+        post_time: '1759715368',
+      },
+    ],
+  },
+  {
+    id: '2161',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Hải Đăng',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content: 'Shop có quyẹt thẻ tín dụng tốn phí ko nhỉ',
+    files: [],
+    approved: '1',
+    post_time: '1757032318',
+    counter: 12,
+    new_replies: [
+      {
+        id: '1393',
+        comment_id: '2161',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content:
+          'Bạn vui lòng liên hệ 0828.333.363, nhân viên kinh doanh bên mình sẽ tư vấn cụ thể nhé',
+        post_time: '1757038972',
+      },
+    ],
+  },
+  {
+    id: '2096',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Bui Van Giang',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content: 'shop co mua dc phu kien roi ko',
+    files: [],
+    approved: '1',
+    post_time: '1755095868',
+    counter: 13,
+    new_replies: [
+      {
+        id: '1336',
+        comment_id: '2096',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content:
+          'Bạn vui lòng liên hệ 0828.333.363, nhân viên kinh doanh bên mình sẽ tư vấn cụ thể nhé',
+        post_time: '1755135208',
+      },
+    ],
+  },
+  {
+    id: '1991',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'phạm long',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content:
+      'bên shop  miễn phí lắp đặt nhà ở hà nội ko shop hay tính bao nhiêu phí nữa như là vânhj chuyển  ',
+    files: [],
+    approved: '1',
+    post_time: '1751287702',
+    counter: 14,
+    new_replies: [
+      {
+        id: '1247',
+        comment_id: '1991',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content: 'Chào bạn, shop miễn phí lắp đặt bán kính 20km nội thành ạ',
+        post_time: '1751334482',
+      },
+    ],
+  },
+  {
+    id: '1978',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Nguyễn Xuân Hùng ',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content: 'Giá 10tr590 là kèm màn hình luôn hả shop ',
+    files: [],
+    approved: '1',
+    post_time: '1751003230',
+    counter: 15,
+    new_replies: [
+      {
+        id: '1237',
+        comment_id: '1978',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content:
+          'Dạ đúng rồi ạ. Bạn vui lòng liên hệ 0828.333.363, nhân viên kinh doanh bên mình sẽ tư vấn cụ thể nhé',
+        post_time: '1751006270',
+      },
+    ],
+  },
+  {
+    id: '1977',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Nguyễn Xuân Hùng ',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content:
+      'Mình mua kèm card wifi thì shop gắn vào pc luôn hay là mình nhận được hàng rồi tự gắn vậy shop',
+    files: [],
+    approved: '1',
+    post_time: '1750987766',
+    counter: 16,
+    new_replies: [
+      {
+        id: '1236',
+        comment_id: '1977',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content:
+          'Chào bạn, bạn vui lòng liên hệ 0828.333.363, nhân viên kinh doanh bên mình sẽ tư vấn cụ thể nhé',
+        post_time: '1750988487',
+      },
+    ],
+  },
+  {
+    id: '1974',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Nguyễn hải Dăng ',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content: 'vga chuyển từ rx 6500 xt sang  1660ti thì bộ này nhiêu v shop ',
+    files: [],
+    approved: '1',
+    post_time: '1750897125',
+    counter: 17,
+    new_replies: [
+      {
+        id: '1231',
+        comment_id: '1974',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content:
+          'Bạn vui lòng liên hệ 0828.333.363, nhân viên kinh doanh bên mình sẽ tư vấn cụ thể nhé',
+        post_time: '1750902650',
+      },
+    ],
+  },
+  {
+    id: '1972',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'La Thanh Ki ',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB',
+    content: 'bộ này chuyển từ rx 6500xt sang 1660super thì nhiêu shop ',
+    files: [],
+    approved: '1',
+    post_time: '1750862925',
+    counter: 18,
+    new_replies: [
+      {
+        id: '1232',
+        comment_id: '1972',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content:
+          'Bạn vui lòng liên hệ 0828.333.363, nhân viên kinh doanh bên mình sẽ tư vấn cụ thể nhé',
+        post_time: '1750902659',
+      },
+    ],
+  },
+  {
+    id: '1941',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Minh Tú',
+    rate: '5',
+    title: '[TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA 4GB',
+    content: 'Màn tặng hả shop',
+    files: [],
+    approved: '1',
+    post_time: '1749125191',
+    counter: 19,
+    new_replies: [
+      {
+        id: '1205',
+        comment_id: '1941',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content: 'Dạ, mua PC được tặng màn hình ạ',
+        post_time: '1749184735',
+      },
+    ],
+  },
+  {
+    id: '1757',
+    item_type: 'product',
+    item_id: '25404',
+    people_like_count: '0',
+    people_dislike_count: '0',
+    reply_count: '1',
+    is_user_admin: '0',
+    user_avatar: '',
+    user_name: 'Hoang ky',
+    rate: '5',
+    title: 'BỘ PC GAMING AMD Ryzen 5 5500/  RAM 16GB/ VGA 4G ',
+    content: 'ổ có cài win sẵn không ạ',
+    files: [],
+    approved: '1',
+    post_time: '1741874131',
+    counter: 20,
+    new_replies: [
+      {
+        id: '1113',
+        comment_id: '1757',
+        user_avatar: '0',
+        user_name: 'Trần Mạnh',
+        is_user_admin: '1',
+        people_like_count: '0',
+        approved: '0',
+        people_dislike_count: '0',
+        content: 'Dạ có ạ',
+        post_time: '1748338266',
+      },
+    ],
+  },
+];

src/data/ListReview/index.ts

@@ -0,0 +1,277 @@
+
+import { ProductReviewData } from '@/types/Review'
+
+export const ListReviewData: ProductReviewData[] = [
+    {
+        "id": "758",
+        "item_type": "product",
+        "item_id": "25404",
+        "people_like_count": "0",
+        "people_dislike_count": "0",
+        "reply_count": "0",
+        "is_user_admin": "0",
+        "user_avatar": "",
+        "user_name": "Đỗ Văn Bính",
+        "rate": "5",
+        "title": "Đánh giá sản phẩm Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA 4GB [TẶNG MÀN HÌNH]",
+        "content": "đến tận showroom ở HCM mua cho yên tâm, được unbox đồ nhé mọi người. Cảm quan ban đầu thấy showroom rất to , sạch, nhân viên nhiệt tình, giá tốt, quà tặng màn hình là tặng thật,",
+        "files": [
+            {
+                "id": "375",
+                "title": "",
+                "file_path": "https://nguyencongpc.vn/media/user_upload/19-12-2025/MzK0dsw3o8EaSfOUnuhn/2114970452708823840.jpg",
+                "width": "600",
+                "height": "338",
+                "approved": "0",
+                "create_time": "1766118957"
+            }
+        ],
+        "approved": "1",
+        "post_time": "1766119040",
+        "counter": 1,
+        "new_replies": []
+    },
+    {
+        "id": "741",
+        "item_type": "product",
+        "item_id": "25404",
+        "people_like_count": "0",
+        "people_dislike_count": "0",
+        "reply_count": "1",
+        "is_user_admin": "0",
+        "user_avatar": "",
+        "user_name": "Duy trường",
+        "rate": "5",
+        "title": "Đánh giá sản phẩm Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB [TẶNG MÀN HÌNH]",
+        "content": "Ai mua rồi cho mình hỏi valorant dc bao nhiêu fps ạ",
+        "files": [],
+        "approved": "1",
+        "post_time": "1765170972",
+        "counter": 2,
+        "new_replies": [
+            {
+                "id": "51",
+                "comment_id": "741",
+                "user_avatar": "0",
+                "user_name": "Trần Mạnh",
+                "is_user_admin": "1",
+                "people_like_count": "0",
+                "approved": "0",
+                "people_dislike_count": "0",
+                "content": "Dạ khoảng 170-180fps ở 1080P ạ",
+                "post_time": "1765277614"
+            }
+        ]
+    },
+    {
+        "id": "707",
+        "item_type": "product",
+        "item_id": "25404",
+        "people_like_count": "0",
+        "people_dislike_count": "0",
+        "reply_count": "0",
+        "is_user_admin": "0",
+        "user_avatar": "",
+        "user_name": "Phong Nguyễn",
+        "rate": "5",
+        "title": "Đánh giá sản phẩm Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB [TẶNG MÀN HÌNH]",
+        "content": "giá tốt, con màn trên bàn là con được tặng luôn nha",
+        "files": [
+            {
+                "id": "328",
+                "title": "",
+                "file_path": "https://nguyencongpc.vn/media/user_upload/01-12-2025/FC5YOYSvCSQtAD6ukdTy/f9a2f40c6fb2e3ecbaa3.jpg",
+                "width": "500",
+                "height": "646",
+                "approved": "0",
+                "create_time": "1764586266"
+            }
+        ],
+        "approved": "1",
+        "post_time": "1764586309",
+        "counter": 3,
+        "new_replies": []
+    },
+    {
+        "id": "690",
+        "item_type": "product",
+        "item_id": "25404",
+        "people_like_count": "0",
+        "people_dislike_count": "0",
+        "reply_count": "0",
+        "is_user_admin": "0",
+        "user_avatar": "",
+        "user_name": "Quang Bình",
+        "rate": "5",
+        "title": "Đánh giá sản phẩm Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB [TẶNG MÀN HÌNH]",
+        "content": "Ryzen 5 5500 chơi game làm việc ổn, giá tốt và có tặng màn hình như thông báo nhé , 5 SAO",
+        "files": [
+            {
+                "id": "311",
+                "title": "",
+                "file_path": "https://nguyencongpc.vn/media/user_upload/29-11-2025/PiKzIDmPTSvb0ngJbVAV/e1b569fd265aaa04f34b-2.jpg",
+                "width": "500",
+                "height": "375",
+                "approved": "0",
+                "create_time": "1764387131"
+            }
+        ],
+        "approved": "1",
+        "post_time": "1764387192",
+        "counter": 4,
+        "new_replies": []
+    },
+    {
+        "id": "674",
+        "item_type": "product",
+        "item_id": "25404",
+        "people_like_count": "0",
+        "people_dislike_count": "0",
+        "reply_count": "0",
+        "is_user_admin": "0",
+        "user_avatar": "",
+        "user_name": "Đình Ấn",
+        "rate": "5",
+        "title": "Đánh giá sản phẩm [TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB",
+        "content": "Pc có sử dụng wifi được không shop, hay cần phải gắn dây mạng",
+        "files": [],
+        "approved": "1",
+        "post_time": "1764170309",
+        "counter": 5,
+        "new_replies": []
+    },
+    {
+        "id": "673",
+        "item_type": "product",
+        "item_id": "25404",
+        "people_like_count": "0",
+        "people_dislike_count": "0",
+        "reply_count": "0",
+        "is_user_admin": "0",
+        "user_avatar": "",
+        "user_name": "Nguyen Van Thinh",
+        "rate": "5",
+        "title": "Đánh giá sản phẩm [TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB",
+        "content": "Bỏ màn giá sao ạ",
+        "files": [],
+        "approved": "1",
+        "post_time": "1764164501",
+        "counter": 6,
+        "new_replies": []
+    },
+    {
+        "id": "672",
+        "item_type": "product",
+        "item_id": "25404",
+        "people_like_count": "0",
+        "people_dislike_count": "0",
+        "reply_count": "0",
+        "is_user_admin": "0",
+        "user_avatar": "",
+        "user_name": "Nguyen Van Thinh",
+        "rate": "5",
+        "title": "Đánh giá sản phẩm [TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB",
+        "content": "Bỏ màn giá sao ạ",
+        "files": [],
+        "approved": "1",
+        "post_time": "1764164500",
+        "counter": 7,
+        "new_replies": []
+    },
+    {
+        "id": "653",
+        "item_type": "product",
+        "item_id": "25404",
+        "people_like_count": "0",
+        "people_dislike_count": "0",
+        "reply_count": "1",
+        "is_user_admin": "0",
+        "user_avatar": "",
+        "user_name": "Phụng ",
+        "rate": "5",
+        "title": "Đánh giá sản phẩm [TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB",
+        "content": "Dùng loại tai nghe kh chụp tai dc kh ạ ",
+        "files": [],
+        "approved": "1",
+        "post_time": "1763484666",
+        "counter": 8,
+        "new_replies": [
+            {
+                "id": "46",
+                "comment_id": "653",
+                "user_avatar": "0",
+                "user_name": "Trần Mạnh",
+                "is_user_admin": "1",
+                "people_like_count": "0",
+                "approved": "0",
+                "people_dislike_count": "0",
+                "content": "dạ được ạ",
+                "post_time": "1763541896"
+            }
+        ]
+    },
+    {
+        "id": "626",
+        "item_type": "product",
+        "item_id": "25404",
+        "people_like_count": "0",
+        "people_dislike_count": "0",
+        "reply_count": "1",
+        "is_user_admin": "0",
+        "user_avatar": "",
+        "user_name": "Văn đạt",
+        "rate": "5",
+        "title": "Đánh giá sản phẩm [TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB",
+        "content": "Bộ này chơi dc gta5 k shop",
+        "files": [],
+        "approved": "1",
+        "post_time": "1759751921",
+        "counter": 9,
+        "new_replies": [
+            {
+                "id": "44",
+                "comment_id": "626",
+                "user_avatar": "0",
+                "user_name": "Trần Mạnh",
+                "is_user_admin": "1",
+                "people_like_count": "0",
+                "approved": "0",
+                "people_dislike_count": "0",
+                "content": "dạ được ạ, nhưng setting thấp ạ",
+                "post_time": "1759974716"
+            }
+        ]
+    },
+    {
+        "id": "625",
+        "item_type": "product",
+        "item_id": "25404",
+        "people_like_count": "0",
+        "people_dislike_count": "0",
+        "reply_count": "1",
+        "is_user_admin": "0",
+        "user_avatar": "",
+        "user_name": "thái 0507",
+        "rate": "5",
+        "title": "Đánh giá sản phẩm [TẶNG MÀN HÌNH] Bộ PC Gaming AMD Ryzen 5 5500, RAM 16GB, VGA RX 6500 XT 4GB",
+        "content": "shop ơi bộ này có kèm màn k ạ\n",
+        "files": [],
+        "approved": "1",
+        "post_time": "1759626317",
+        "counter": 10,
+        "new_replies": [
+            {
+                "id": "43",
+                "comment_id": "625",
+                "user_avatar": "0",
+                "user_name": "Trần Mạnh",
+                "is_user_admin": "1",
+                "people_like_count": "0",
+                "approved": "0",
+                "people_dislike_count": "0",
+                "content": "Dạ bộ này được tặng màn hình ạ",
+                "post_time": "1759736954"
+            }
+        ]
+    }
+]

src/styles/globals.css

@@ -3732,7 +3732,6 @@ textarea::placeholder {
 .page-product-detail .box-read-product-detail .box-descreption-detail .content-descreption-detail {
   padding: 18px 12px;
   overflow: hidden;
-  height: 500px;
 }
 .page-product-detail
   .box-read-product-detail
@@ -3742,6 +3741,9 @@ textarea::placeholder {
   display: block;
   width: auto;
 }
+.content-spec td {
+  border: 1px solid #000;
+}
 .page-product-detail
   .box-read-product-detail
   .box-descreption-detail
@@ -3907,7 +3909,7 @@ textarea::placeholder {
   text-align: center;
   margin-top: 12px;
 }
-.page-product-detail .box-review .button-review a {
+.page-product-detail .box-review .button-review {
   line-height: 30px;
   color: #fff;
   padding: 5px 20px;
@@ -5976,9 +5978,6 @@ textarea::placeholder {
   background: #1781e0;
   color: #fff;
 }
-.box-review .item-comment:nth-child(n + 3) {
-  display: none;
-}
 .overlay {
   position: fixed;
   width: 100%;

src/types/Comment/index.ts

@@ -0,0 +1,42 @@
+export interface ItemComment {
+    id: string;
+    title: string;
+    file_path: string;
+    width: string;
+    height: string;
+    approved: string;
+    create_time: string;
+}
+
+export interface CommentReply {
+    id: string;
+    comment_id: string;
+    user_avatar: string;
+    user_name: string;
+    is_user_admin: string;
+    people_like_count: string;
+    approved: string;
+    people_dislike_count: string;
+    content: string;
+    post_time: string;
+}
+
+export interface ProductCommentData {
+    id: string;
+    item_type: string;
+    item_id: string;
+    people_like_count: string;
+    people_dislike_count: string;
+    reply_count: string;
+    is_user_admin: string;
+    user_avatar: string;
+    user_name: string;
+    rate: string; // số sao, dạng chuỗi
+    title: string;
+    content: string;
+    files: ItemComment[];
+    approved: string;
+    post_time: string;
+    counter: number;
+    new_replies: CommentReply[];
+}

src/types/Review/index.ts

@@ -0,0 +1,42 @@
+export interface ItemReview {
+    id: string;
+    title: string;
+    file_path: string;
+    width: string;
+    height: string;
+    approved: string;
+    create_time: string;
+}
+
+export interface ReviewReply {
+    id: string;
+    comment_id: string;
+    user_avatar: string;
+    user_name: string;
+    is_user_admin: string;
+    people_like_count: string;
+    approved: string;
+    people_dislike_count: string;
+    content: string;
+    post_time: string;
+}
+
+export interface ProductReviewData {
+    id: string;
+    item_type: string;
+    item_id: string;
+    people_like_count: string;
+    people_dislike_count: string;
+    reply_count: string;
+    is_user_admin: string;
+    user_avatar: string;
+    user_name: string;
+    rate: string; // số sao, dạng chuỗi
+    title: string;
+    content: string;
+    files: ItemReview[];
+    approved: string;
+    post_time: string;
+    counter: number;
+    new_replies: ReviewReply[];
+}

src/types/product/detail/index.ts

@@ -117,11 +117,11 @@ interface ReviewSummary {
   total: string;
 }
 
-interface Review {
+export interface Review {
   summary: ReviewSummary;
 }
 
-interface Comment {
+export interface Comment {
   summary: ReviewSummary;
 }