update 18/3

src/app/article/[slug]/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { ArticlesDetailData } from "@/data/article";
+import { useParams } from "next/navigation";
+import { format } from "date-fns";
+
+const Detail = () => {
+  const { slug } = useParams();
+  const article = ArticlesDetailData.list.find(
+    (article) => article.path == slug
+  );
+
+  if (!article) {
+    return (
+      <div className="text-center text-2xl py-[50px] font-bold italic">
+        Article not found.
+      </div>
+    );
+  }
+
+  return (
+    <div className="page-article">
+      <div className="container">
+        <div className="content-article-detail">
+          <div className="time">
+            {format(new Date(article?.last_update * 1000), "dd/MM/yyyy")}
+          </div>
+          <h1 className="title-article">{article?.title}</h1>
+
+          <div className="summary">{article?.summary}</div>
+
+          <div className="thumbnail">
+            <img
+              src={`https://hurasoft8.hurasoft.com/${article?.image.large}`}
+              width="100%"
+              height="100%"
+              alt=""
+            />
+          </div>
+
+          <div
+            className="content nd"
+            dangerouslySetInnerHTML={{ __html: article?.content }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Detail;

src/app/article/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { ArticlesData } from "@/data/article";
 import { format } from "date-fns";
+import Link from "next/link";
 
 const Home = () => {
   return (
@@ -16,7 +17,7 @@ const Home = () => {
           <div className="box-big" id="js-holder-big">
             {ArticlesData.list.slice(0, 1).map((articles) => (
               <div className="item-article" key={articles.id}>
-                <a href={articles.url} className="image-article">
+                <a href={`/article/${articles.url}`} className="image-article">
                   <img
                     src={`https://hurasoft8.hurasoft.com/${articles.image.large}`}
                     width={100}
@@ -34,7 +35,10 @@ const Home = () => {
                       )}
                     </span>
                   </div>
-                  <a href={articles.url} className="name-article line-clamp-2">
+                  <a
+                    href={`/article${articles.url}`}
+                    className="name-article line-clamp-2"
+                  >
                     {articles.title}
                   </a>
                 </div>
@@ -44,7 +48,7 @@ const Home = () => {
           <div className="box-small" id="js-holder-small">
             {ArticlesData.list.slice(1, 3).map((articles) => (
               <div className="item-article" key={articles.id}>
-                <a href={articles.url} className="image-article">
+                <a href={`/article/${articles.url}`} className="image-article">
                   <img
                     src={`https://hurasoft8.hurasoft.com/${articles.image.large}`}
                     width={100}
@@ -62,7 +66,10 @@ const Home = () => {
                       )}
                     </span>
                   </div>
-                  <a href={articles.url} className="name-article line-clamp-2">
+                  <a
+                    href={`/article/${articles.url}`}
+                    className="name-article line-clamp-2"
+                  >
                     {articles.title}
                   </a>
                 </div>
@@ -77,14 +84,17 @@ const Home = () => {
           <div className="list-article flex flex-wrap" id="js-list-article">
             {ArticlesData.list.map((articles) => (
               <div className="item-article" key={articles.id}>
-                <a href={articles.url} className="image-article">
+                <Link
+                  href={`/article/${articles.url}`}
+                  className="image-article"
+                >
                   <img
                     src={`https://hurasoft8.hurasoft.com/${articles.image.large}`}
                     width={100}
                     height={100}
                     alt={articles.title}
                   />
-                </a>
+                </Link>
                 <div className="info">
                   <div className="time">
                     <i className="fa-regular fa-clock"></i>{" "}
@@ -95,9 +105,12 @@ const Home = () => {
                       )}
                     </span>
                   </div>
-                  <a href={articles.url} className="name-article line-clamp-2">
+                  <Link
+                    href={`/article/${articles.url}`}
+                    className="name-article line-clamp-2"
+                  >
                     {articles.title}
-                  </a>
+                  </Link>
                 </div>
               </div>
             ))}

src/app/job/[slug]/page.tsx

@@ -1,5 +1,8 @@
 "use client";
 import { useState } from "react";
+import { JobDataDetail } from "@/data/job";
+import { useParams } from "next/navigation";
+
 const Detail = () => {
   const [activeTab, setActiveTab] = useState("#info");
 
@@ -8,15 +11,24 @@ const Detail = () => {
     setActiveTab(tab);
   };
 
+  const { slug } = useParams();
+  const job = JobDataDetail.list.find((job) => job.path == slug);
+  if (!job) {
+    return (
+      <div className="text-center text-2xl py-[50px] font-bold italic">
+        Công việc này đã dừng tuyển dụng.
+      </div>
+    );
+  }
   return (
     <div className="page-job detail">
       <div className="container-job">
-        <h2 className="title">Nhân viên phát triển thị trường</h2>
+        <h2 className="title">{job?.title}</h2>
         <div className="content-job flex">
           <div className="left-job">
             <div className="item">
               <p>Địa điểm</p>
-              <b>Hà Nội</b>
+              <b>{job?.location}</b>
             </div>
             <div className="item">
               <p>Hình thức làm việc</p>
@@ -24,7 +36,7 @@ const Detail = () => {
             </div>
             <div className="item">
               <p>Số lượng tuyển</p>
-              <b>7</b>
+              <b>{job?.applicant_count}</b>
             </div>
           </div>
           <div className="right-job">
@@ -50,80 +62,7 @@ const Detail = () => {
               className={`content-tab ${activeTab === "#info" ? "active" : ""}`}
               id="info"
             >
-              <b>Vị trí: Nhân viên phát triển thị trường</b>
+              <div dangerouslySetInnerHTML={{ __html: job.description }} />
-
-              <h2 className="title">Mô tả công việc</h2>
-              <ul>
-                <li>
-                  Tìm kiếm khách hàng mới, tiếp cận khai thác Khách hàng tiềm
-                  năng.
-                </li>
-                <li>Tư vấn khách hàng về sản phẩm, dịch vụ của công ty.</li>
-                <li>
-                  Chốt hợp đồng khách hàng, triển khai quy trình làm việc với
-                  khách hàng.
-                </li>
-                <li>
-                  Hỗ trợ và chăm sóc khách hàng (tiềm năng, hiện tại, cũ) tạo
-                  mối quan hệ với khách hàng.
-                </li>
-                <li>
-                  Tiếp thu ý kiến khách hàng, phối hợp với các bộ phận khác để
-                  khai thác tối đa lợi ích của dịch vụ, khách hàng.
-                </li>
-                <li>
-                  Hoàn thành chỉ tiêu kinh doanh nhóm và chỉ tiêu cá nhân.
-                </li>
-              </ul>
-              <p>&nbsp;</p>
-              <h2 className="title">Yêu cầu ứng viên:</h2>
-              <ul>
-                <li>
-                  Tốt nghiệp Cao Đẳng trở lên các trường đào tạo chuyên ngành
-                  quản trị kinh doanh, CNTT hoặc các ngành liên quan.
-                </li>
-                <li>
-                  Đặc biệt ưu tiên có kinh nghiệm làm việc ở các lĩnh vực kinh
-                  doanh phần mềm, bán hàng, tư vấn, tiếp thị các sản phẩm về
-                  CNTT là 1 lợi thế.
-                </li>
-                <li>
-                  Có kỹ năng giao tiếp thuyết phục đàm phán tốt , năng động, cải
-                  tiến, sáng tạo, chủ động trong công việc.
-                </li>
-                <li>
-                  Tinh thần trách nhiệm trong công việc. Yêu thích công việc
-                  kinh doanh và không ngừng học hỏi, sẵn sàng tiếp thu các kiến
-                  thức mới.
-                </li>
-                <li>Có laptop, có phương tiện đi lại.</li>
-              </ul>
-              <p>&nbsp;</p>
-              <h2 className="title">Quyền lợi:</h2>
-              <ul>
-                <li>
-                  Môi trường làm việc chuyên nghiệp, năng động, thân thiện
-                </li>
-                <li>Luôn được tiếp xúc với công nghệ và thử thách mới.</li>
-                <li>
-                  Lương: Lương cứng + hoa hồng + phụ cấp xăng xe, điện thoại
-                </li>
-                <li>Thưởng theo ngày lễ, tết</li>
-                <li>
-                  Được đào tạo kĩ năng mềm ( kỹ năng giao tiếp, xử lý tình
-                  huống…..)
-                </li>
-                <li>Làm việc từ T2 – sáng T7</li>
-                <li>Đóng bảo hiểm theo quy định của Nhà nước</li>
-                <li>
-                  Được hưởng đầy đủ các chế độ theo quy định của luật lao động
-                </li>
-              </ul>
-              <p>
-                Ứng viên vui lòng gửi hồ sơ cho chúng tôi qua email{" "}
-                <a href="mailto:info@hurasoft.com">info@hurasoft.com</a>
-              </p>
-
               <a
                 href="javascript:void(0)"
                 onClick={() => showTab("#formjob")}

src/app/job/detail/page.tsx

@@ -1,234 +0,0 @@
-"use client";
-import { useState } from "react";
-const Detail = () => {
-  const [activeTab, setActiveTab] = useState("#info");
-
-  const showTab = (tab: string) => {
-    console.log(`Tab clicked: ${tab}`);
-    setActiveTab(tab);
-  };
-
-  return (
-    <div className="page-job detail">
-      <div className="container-job">
-        <h2 className="title">Nhân viên phát triển thị trường</h2>
-        <div className="content-job flex">
-          <div className="left-job">
-            <div className="item">
-              <p>Địa điểm</p>
-              <b>Hà Nội</b>
-            </div>
-            <div className="item">
-              <p>Hình thức làm việc</p>
-              <b>Toàn thời gian cố định</b>
-            </div>
-            <div className="item">
-              <p>Số lượng tuyển</p>
-              <b>7</b>
-            </div>
-          </div>
-          <div className="right-job">
-            <div className="list-tab flex items-center">
-              <div
-                onClick={() => showTab("#info")}
-                data-id="#info"
-                className={`item-tab ${activeTab === "#info" ? "active" : ""}`}
-              >
-                Chi tiết
-              </div>
-              <div
-                onClick={() => showTab("#formjob")}
-                data-id="#formjob"
-                className={`item-tab ${
-                  activeTab === "#formjob" ? "active" : ""
-                }`}
-              >
-                Nộp hồ sơ
-              </div>
-            </div>
-            <div
-              className={`content-tab ${activeTab === "#info" ? "active" : ""}`}
-              id="info"
-            >
-              <b>Vị trí: Nhân viên phát triển thị trường</b>
-
-              <h2 className="title">Mô tả công việc</h2>
-              <ul>
-                <li>
-                  Tìm kiếm khách hàng mới, tiếp cận khai thác Khách hàng tiềm
-                  năng.
-                </li>
-                <li>Tư vấn khách hàng về sản phẩm, dịch vụ của công ty.</li>
-                <li>
-                  Chốt hợp đồng khách hàng, triển khai quy trình làm việc với
-                  khách hàng.
-                </li>
-                <li>
-                  Hỗ trợ và chăm sóc khách hàng (tiềm năng, hiện tại, cũ) tạo
-                  mối quan hệ với khách hàng.
-                </li>
-                <li>
-                  Tiếp thu ý kiến khách hàng, phối hợp với các bộ phận khác để
-                  khai thác tối đa lợi ích của dịch vụ, khách hàng.
-                </li>
-                <li>
-                  Hoàn thành chỉ tiêu kinh doanh nhóm và chỉ tiêu cá nhân.
-                </li>
-              </ul>
-              <p>&nbsp;</p>
-              <h2 className="title">Yêu cầu ứng viên:</h2>
-              <ul>
-                <li>
-                  Tốt nghiệp Cao Đẳng trở lên các trường đào tạo chuyên ngành
-                  quản trị kinh doanh, CNTT hoặc các ngành liên quan.
-                </li>
-                <li>
-                  Đặc biệt ưu tiên có kinh nghiệm làm việc ở các lĩnh vực kinh
-                  doanh phần mềm, bán hàng, tư vấn, tiếp thị các sản phẩm về
-                  CNTT là 1 lợi thế.
-                </li>
-                <li>
-                  Có kỹ năng giao tiếp thuyết phục đàm phán tốt , năng động, cải
-                  tiến, sáng tạo, chủ động trong công việc.
-                </li>
-                <li>
-                  Tinh thần trách nhiệm trong công việc. Yêu thích công việc
-                  kinh doanh và không ngừng học hỏi, sẵn sàng tiếp thu các kiến
-                  thức mới.
-                </li>
-                <li>Có laptop, có phương tiện đi lại.</li>
-              </ul>
-              <p>&nbsp;</p>
-              <h2 className="title">Quyền lợi:</h2>
-              <ul>
-                <li>
-                  Môi trường làm việc chuyên nghiệp, năng động, thân thiện
-                </li>
-                <li>Luôn được tiếp xúc với công nghệ và thử thách mới.</li>
-                <li>
-                  Lương: Lương cứng + hoa hồng + phụ cấp xăng xe, điện thoại
-                </li>
-                <li>Thưởng theo ngày lễ, tết</li>
-                <li>
-                  Được đào tạo kĩ năng mềm ( kỹ năng giao tiếp, xử lý tình
-                  huống…..)
-                </li>
-                <li>Làm việc từ T2 – sáng T7</li>
-                <li>Đóng bảo hiểm theo quy định của Nhà nước</li>
-                <li>
-                  Được hưởng đầy đủ các chế độ theo quy định của luật lao động
-                </li>
-              </ul>
-              <p>
-                Ứng viên vui lòng gửi hồ sơ cho chúng tôi qua email{" "}
-                <a href="mailto:info@hurasoft.com">info@hurasoft.com</a>
-              </p>
-
-              <a
-                href="javascript:void(0)"
-                onClick={() => showTab("#formjob")}
-                className="btn apply-job"
-              >
-                Ứng tuyển ngay
-              </a>
-            </div>
-            <div
-              className={`content-tab ${
-                activeTab === "#formjob" ? "active" : ""
-              }`}
-              id="formjob"
-            >
-              <input type="hidden" id="js-job_id" value="13" />
-              <div className="item-upload d-flex flex-wrap align-items">
-                <div className="upload-left">
-                  <div className="d-flex align-items">
-                    <i className="fa-solid fa-cloud-arrow-up"></i>
-                    <p className="name-up">Tải lên sơ yếu lý lịch</p>
-                  </div>
-                  <p className="gray">
-                    Tải sơ yếu lý lịch của bạn lên đây để tự động điền các thông
-                    tin chính.
-                  </p>
-                </div>
-                <div className="upload-right">
-                  <input id="js-file-upload-id" type="hidden" value="" />
-                  <div id="js-container-selector">
-                    <a
-                      id="js-select-file"
-                      href="javascript:void(0);"
-                      className="btn-upload d-block dz-clickable"
-                    >
-                      Upload file
-                    </a>
-                  </div>
-                </div>
-                <div className="pd-preview-file-upload">
-                  <div id="js-file-uploaded-list"></div>
-                  <div id="js-preview-file-upload"></div>
-                </div>
-              </div>
-              <div className="item-form">
-                <label>
-                  Tên <span>*</span>
-                </label>
-                <input
-                  type="text"
-                  className="input-item"
-                  name="name"
-                  id="js-user_name"
-                  placeholder="Nhập họ và tên"
-                />
-                <div className="note-error"></div>
-              </div>
-              <div className="item-form">
-                <label>
-                  Email <span>*</span>
-                </label>
-                <input
-                  type="text"
-                  className="input-item"
-                  name="email"
-                  id="js-user_email"
-                  placeholder="Nhập địa chỉ email"
-                />
-                <div className="note-error"></div>
-              </div>
-              <div className="item-form">
-                <label>
-                  Số điện thoại <span>*</span>
-                </label>
-                <input
-                  type="text"
-                  className="input-item"
-                  name="phone"
-                  id="js-user_mobile"
-                  placeholder="Nhập số điện thoại"
-                />
-                <div className="note-error"></div>
-              </div>
-              <div className="item-form">
-                <label>Thông tin bổ sung</label>
-                <span className="ghichu">
-                  Vui lòng chia sẻ bất kỳ điều gì khác bạn muốn chúng tôi biết,
-                  chẳng hạn như động lực của bạn khi ứng tuyển hoặc các bối cảnh
-                  bổ sung liên quan đến hồ sơ của bạn.
-                </span>
-                <textarea
-                  className="input-item"
-                  name="messenger"
-                  id="js-user_note"
-                  placeholder="Nhập nội dung bổ sung"
-                ></textarea>
-              </div>
-              <a href="javascript:void(0)" className="btn btn-submit">
-                Nộp đơn <i className="fa-regular fa-paper-plane"></i>
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Detail;

src/app/job/page.tsx

@@ -10,14 +10,14 @@ const Home = () => {
           {JobData.list.map((job) => (
             <div className="item-job" key={job.id}>
               <div className="job-left">
-                <Link href="/job/detail" className="name line-clamp-1">
+                <Link href={`${job.url}`} className="name line-clamp-1">
                   {job.title}
                 </Link>
                 <div className="time">{job.end_date}</div>
               </div>
               <div className="job-right flex items-center">
                 <div className="localhost">{job.location}</div>
-                <Link href="/job/detail" className="more">
+                <Link href={`${job.url}`} className="more">
                   Ứng tuyển ngay <i className="fa-solid fa-angle-right"></i>
                 </Link>
               </div>

src/app/page/page_job/page.tsx

@@ -11,7 +11,7 @@ const Page_job = () => {
           Nếu bạn là người đam mê công nghệ và yêu thử thách, hãy gia nhập cùng
           chúng tôi.
         </div>
-        <Link href="/job/home" className="btn btn-job">
+        <Link href="/job" className="btn btn-job">
           Xem các vị trí <i className="fa-solid fa-arrow-right"></i>
         </Link>
 
@@ -65,7 +65,7 @@ const Page_job = () => {
           />
           <div className="title">
             <h3>Sẵn sàng tham gia cùng chúng tôi?</h3>
-            <Link href="/job/home" className="btn btn-job">
+            <Link href="/job" className="btn btn-job">
               Xem các vị trí <i className="fa-solid fa-arrow-right"></i>
             </Link>
           </div>

src/components/Header.tsx

@@ -110,7 +110,7 @@ export default function Header() {
                   </div>
                 </div>
               </div>
-              <Link href="/job/page_job_introduction" className="item">
+              <Link href="/page/page_job" className="item">
                 Tuyển dụng
               </Link>
               <Link href="/article" className="item">

src/data/article.ts

@@ -261,7 +261,8 @@ export const ArticlesDetailData = {
                 "large": "/media/article/l-cyber-security-concept-digital-art_23-2151637760.jpg"
             },
             "canonical": "https://hurasoft8.hurasoft.com/an-toan-thong-tin-website",
-            "path": "/an-toan-thong-tin-website"
+            "url": "/an-toan-thong-tin-website",
+            "path": "an-toan-thong-tin-website"
         },
         {
             "id": 724,
@@ -295,7 +296,8 @@ export const ArticlesDetailData = {
                 "large": "/media/article/l-3d-representation-reselling-market_23-2150473097.jpg"
             },
             "canonical": "/xu-huong-ca-nhan-hoa-trai-nghiem-nguoi-dung-trong-thuong-mai-dien-tu",
-            "path": "/xu-huong-ca-nhan-hoa-trai-nghiem-nguoi-dung-trong-thuong-mai-dien-tue"
+            "url": "/xu-huong-ca-nhan-hoa-trai-nghiem-nguoi-dung-trong-thuong-mai-dien-tue",
+            "path": "xu-huong-ca-nhan-hoa-trai-nghiem-nguoi-dung-trong-thuong-mai-dien-tue"
         },
         {
             "id": 723,
@@ -348,7 +350,8 @@ export const ArticlesDetailData = {
                 "large": "/media/article/l-lucky-dice-game-background_23-2150971831.jpg"
             },
             "canonical": "/marketing-bang-minigame-tren-website",
-            "path": "/marketing-bang-minigame-tren-website"
+            "url": "/marketing-bang-minigame-tren-website",
+            "path": "marketing-bang-minigame-tren-website"
         },
     ]
 }

src/data/job.ts

@@ -76,5 +76,135 @@ export const JobData: JobType = {
             "url": "\/job\/thiet-ke-do-hoa-website-mobile-ux-designer.html"
         }
     ]
+}
 
+
+export const JobDataDetail = {
+    "total": 4,
+    "list": [
+        {
+            "title": "Nhân viên phát triển thị trường",
+            "path": "nhan-vien-phat-trien-thi-truong.html",
+            "salary": "Thỏa thuận",
+            "end_date": "31-12-2024",
+            "location": "Hà Nội",
+            "applicant_count": 7,
+            "description": ` <h2 class="title">Mô tả công việc</h2>
+<ul>
+<li>Tìm kiếm khách hàng mới, tiếp cận khai thác Khách hàng tiềm năng.</li>
+<li>Tư vấn khách hàng về sản phẩm, dịch vụ của công ty.</li>
+<li>Chốt hợp đồng khách hàng, triển khai quy trình làm việc với khách hàng.</li>
+<li>Hỗ trợ và chăm sóc khách hàng (tiềm năng, hiện tại, cũ) tạo mối quan hệ với khách hàng.</li>
+<li>Tiếp thu ý kiến khách hàng, phối hợp với các bộ phận khác để khai thác tối đa lợi ích của dịch vụ, khách hàng.</li>
+<li>Hoàn thành chỉ tiêu kinh doanh nhóm và chỉ tiêu cá nhân.</li>
+</ul>
+<p> </p>
+<h2 class="title">Yêu cầu ứng viên:</h2>
+<ul>
+<li>Tốt nghiệp Cao Đẳng trở lên các trường đào tạo chuyên ngành quản trị kinh doanh, CNTT hoặc các ngành liên quan.</li>
+<li>Đặc biệt ưu tiên có kinh nghiệm làm việc ở các lĩnh vực kinh doanh phần mềm, bán hàng, tư vấn, tiếp thị các sản phẩm về CNTT là 1 lợi thế.</li>
+<li>Có kỹ năng giao tiếp thuyết phục đàm phán tốt , năng động, cải tiến, sáng tạo, chủ động trong công việc.</li>
+<li>Tinh thần trách nhiệm trong công việc. Yêu thích công việc kinh doanh và không ngừng học hỏi, sẳn sàng tiếp thu các kiến thức mới.</li>
+<li>Có laptop, có phương tiện đi lại.</li>
+</ul>
+<p> </p>
+<h2 class="title">Quyền lợi:</h2>
+<ul>
+<li>Môi trường làm việc chuyên nghiệp, năng động, thân thiện</li>
+<li>Luôn được tiếp xúc với công nghệ và thử thách mới.</li>
+<li>Lương: Lương cứng + hoa hồng + phụ cấp xăng xe, điện thoại</li>
+<li>Thưởng theo ngày lễ, tết</li>
+<li>Được đào tạo kĩ năng mềm ( kỹ năng giao tiếp, xử lý tình huống…..)</li>
+<li>Làm việc từ T2 – sáng T7</li>
+<li>Đóng bảo hiểm theo quy định của Nhà nước</li>
+<li>Được hưởng đầy đủ các chế độ theo quy định của luật lao động</li>
+</ul>
+<p>Ứng viên vui lòng gửi hồ sơ cho chúng tôi qua email <a href="mailto:info@hurasoft.com">info@hurasoft.com</a></p>`
+        }, {
+            "title": "Nhân viên chăm sóc khách hàng",
+            "path": "nhan-vien-cham-soc-khach-hang.html",
+            "salary": "Thỏa thuận",
+            "end_date": "31-12-2024",
+            "location": "Hà Nội",
+            "applicant_count": 1,
+            "description": ` <h2><strong>MÔ TẢ CÔNG VIỆC</strong></h2>
+<p>- Tư vấn các khách hàng tiềm năng sản phẩm, dịch vụ của công ty ( sản phẩm phần mềm)</p>
+<p>- Chốt hợp đồng khách hàng, triển khai quy trình làm việc với khách hàng.</p>
+<p>- Hỗ trợ và chăm sóc khách hàng để đảm bảo khách hàng khai thác tối đa lợi ích của sản phẩm.</p>
+<p>- Làm việc với các phòng ban liên quan để liên tục cải thiện, nâng cao chất lượng sản phẩm</p>
+<p> </p>
+<h2><strong>YÊU CẦU CÔNG VIỆC</strong></h2>
+<p>- Nữ từ 1992 - 2002</p>
+<p>- Ưu tiên ứng viên được đào tạo chuyên ngành quản trị kinh doanh, CNTT, Thương mại điện tử, marketing hoặc các ngành liên quan.</p>
+<p>- Không có kinh nghiệm sẽ được đào tạo, nhưng đã có kinh nghiệm làm việc ở môi trường doanh nghiệp là một lợi thế</p>
+<p>- Ứng viên muốn tìm một nơi gắn bó lâu dài, được đào tạo để phát triển sự nghiệp</p>
+<p>- Tinh thần trách nhiệm trong công việc. Yêu thích công việc làm việc với khách hàng, sẳn sàng tiếp thu các kiến thức mới</p>
+<p> </p>
+<h2><strong>QUYỀN LỢI ĐƯỢC HƯỞNG</strong></h2>
+<p>- Môi trường trẻ, năng động, được đào tạo kiến thức về sản phẩm TMĐT, công nghệ</p>
+<p>- Thưởng theo ngày lễ, tết</p>
+<p>- Được đào tạo kĩ năng mềm ( kỹ năng giao tiếp, xử lý tình huống…..)</p>
+<p>- Thời gian làm việc: 8h30 - 17h30 (từ T2 – sáng T7 )</p>
+<p>- Đóng bảo hiểm theo quy định của Nhà nước</p>
+<p>- Được hưởng đầy đủ các chế độ theo quy định của luật lao động</p>
+<p> </p>
+<h2 class="jd-row-heading flex-center mb-2"><strong><span class="text-uppercase bold">LIÊN HỆ</span></strong></h2>
+<p>Ứng viên vui lòng gửi hồ sơ đến email <a href="mailto:info@hurasoft.com">info@hurasoft.com</a>.</p>`
+        },
+        {
+            "title": "Lập trình viên front-end",
+            "path": "lap-trinh-vien-front-end",
+            "salary": "Thỏa thuận",
+            "end_date": "31-12-2024",
+            "location": "Hà Nội",
+            "applicant_count": 2,
+            "description": `<h2><strong>Mô tả công việc:</strong></h2>
+<ul>
+<li>Tham gia phát triển các sản phẩm web/app của công ty.</li>
+<li>Phối hợp với các bộ phận liên quan để đảm bảo tiến độ bàn giao website được triển khai theo đúng cam kết và chất lượng website bàn giao.</li>
+<li>Công việc sẽ được trao đổi cụ thể hơn trong quá trình phỏng vấn.</li>
+</ul>
+<p> </p>
+<h2><strong>Yêu cầu ứng viên:</strong></h2>
+<ul>
+<li>Có kinh nghiệm từ 1 năm trở lên phát triển website.</li>
+<li>Thành thạo HTML, CSS, Bootstrap.</li>
+<li>Biết cơ bản Javascript trở lên (sẽ được đào tạo thêm)</li>
+<li>Có kiến thức về chuẩn SEO onpage.</li>
+<li>Có khả năng làm việc độc lập.</li>
+<li>Có tinh thần trách nhiệm trong công việc.</li>
+</ul>
+<p> </p>
+<h2><strong>Quyền lợi:</strong></h2>
+<ul>
+<li>Lương + hoa hồng dự án theo năng lực.</li>
+<li>Review tăng lương 3-6 tháng/ lần.</li>
+<li>BHXH BHYT theo quy định.</li>
+<li>Được làm việc trong môi trường năng động, có cơ hội học hỏi, phát triển nhanh.</li>
+</ul>
+<p> </p>
+<h2><strong>Liên hệ:</strong></h2>
+<p>Ứng viên vui lòng gửi hồ sơ cho chúng tôi qua email <a href="mailto:info@hurasoft.com">info@hurasoft.com</a></p>`
+        }, {
+            "title": "Thiết kế đồ họa Website, Mobile (UX Designer)",
+            "path": "thiet-ke-do-hoa-website-mobile-ux-designer",
+            "salary": "$500-1,000/tháng",
+            "end_date": "31-12-2024",
+            "location": "Hà Nội",
+            "applicant_count": 2,
+            "description": `<h2><strong>Mô tả công việc:</strong></h2>
+<p>- Tham gia thiết kế các sản phẩm của công ty (bao gồm website, mobile web, mobile app)</p>
+<p>- Nghiên cứu các xu hướng thiết kế mới để liên tục cải thiện, nâng cao chất lượng sản phẩm</p>
+<p>- Phối hợp với các phòng ban liên quan để hoàn thành nhiệm vụ được giao</p>
+<p> </p>
+<h2><strong>Yêu cầu công việc:</strong></h2>
+<p>- Thành thạo Figma, Photoshop</p>
+<p>- Tiếng Anh đọc hiểu tài liệu</p>
+<p>- Ưu tiên ứng viên có hiểu biết về HTML/CSS và các thư viện Ant Design, Material Design, Tailwind CSS ..</p>
+<p>- Năng động, tinh thần làm việc tốt.</p>
+<p> </p>
+<h2><strong>Liên hệ:</strong></h2>
+<p>Ứng viên vui lòng gửi hồ sơ cho chúng tôi qua email <a href="mailto:info@hurasoft.com">info@hurasoft.com</a></p>`
+        }
+    ]
 }

src/styles/style.css

@@ -35,6 +35,10 @@ body {
   background: #f4f8fb;
   font-weight: 400;
   font-size: 14px;
+  min-width: 1220px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 html {
@@ -76,7 +80,9 @@ table {
   padding: 0;
   list-style: none;
 }
-
+main {
+  flex: 1;
+}
 .container {
   width: 1220px;
   padding: 0 10px;
@@ -188,15 +194,19 @@ table {
   flex-wrap: wrap;
   opacity: 0;
   visibility: hidden;
+  z-index: 9999;
 }
 .header .item-menu {
   width: 50%;
   border-right: 1px solid #f4f8fb;
-  border-bottom: 1px solid #f4f8fb;
+  border-top: 1px solid #f4f8fb;
   padding: 10px;
   display: flex;
   align-items: center;
 }
+.header .item-menu:first-child {
+  border: 0;
+}
 .header .item-menu.chatngay .icon {
   height: 22px;
 }
@@ -964,7 +974,41 @@ table {
   text-align: center;
   margin-bottom: 30px;
 }
-
+.page-article .content-article-detail .summary {
+  padding: 0 100px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 500;
+}
+.page-article .content-article-detail .thumbnail {
+  display: block;
+  margin: 30px 0;
+}
+.page-article .content-article-detail .thumbnail img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+}
+.page-article .content-article-detail .nd p {
+  font-size: 16px;
+}
+.nd p,
+.nd h1,
+.nd h2,
+.nd h3,
+.nd h4,
+.nd h5,
+.nd h6 {
+  margin: 1em 0;
+  margin-top: 1em;
+  margin-right: 0px;
+  margin-bottom: 1em;
+  margin-left: 0px;
+}
+.nd * {
+  line-height: 24px;
+}
 .item-article {
   width: calc(33.3333333333% - 15px);
   margin-right: 15px;