export default function ArticleDetail({ slug }: { slug: string }) {
    return(
        <>
  <link
    href="https://cdn.boxicons.com/fonts/brands/boxicons-brands.min.css"
    rel="stylesheet"
  />
  <div className="container !mt-8 mt-6">
    {/* <style> body{background: #fff;} </style> */}
    <div className="article-detail-page max-w-[824px] m-auto my-8">
      <a
        href=""
        target="_blank"
        rel="nofollow"
        className="table border border-[#76BBFF80] rounded-[30px] bg-[#EAF1FF] px-5 leading-8 mb-3"
      >
        <span className="text-[#004BA4]"> Hoàng Hà PC trên </span>
        <span className="text-[#4285F4]">G</span>
        <span className="text-[#EA4335]">o</span>
        <span className="text-[#FBBC05]">o</span>
        <span className="text-[#4285F4]">g</span>
        <span className="text-[#34A853]">l</span>
        <span className="text-[#EA4335]">e</span>
        <span className="text-[#5F6368]"> News </span>
      </a>
      <h1 className="font-600 text-[#004BA4] text-20 leading-6 lg:leading-10 lg:text-[32px] mb-3">
        {" "}
        {"{"}
        {"{"} page.article_detail.title {"}"}
        {"}"}{" "}
      </h1>
      <div className="lg:text-[16px] lg:leading-[22px] flex items-center gap-1 mb-6 lg:mb-8">
        <i className="icons icon-time mr-1" />
        <span> Thứ sáu 25/07/2025 </span>
        <span>|</span>
        <a href=""> Mai Văn Học </a>
      </div>
      <div className="article-content lg:leading-6 lg:text-[18px]">
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur
          quaerat vero itaque voluptatum? Repellendus laudantium est doloribus
          saepe accusantium, illo numquam ullam deserunt expedita repudiandae
          ipsam libero, temporibus soluta eius.
        </p>
      </div>
      <div className="flex items-center flex-wrap lg:gap-[30px] gap-5 mb-8">
        <p className="m-0">SHARE</p>
        <div className="flex flex-wrap gap-2">
          <a
            href=""
            rel="nofollow"
            className="bx bx-share w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
          />
          <a
            href=""
            rel="nofollow"
            className="bxl bx-facebook w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
          />
          <a
            href=""
            rel="nofollow"
            className="bxl bx-youtube w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
          />
          <a
            href=""
            rel="nofollow"
            className="bxl bx-instagram-alt w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
          />
          <a
            href=""
            rel="nofollow"
            className="bxl bx-tiktok w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
          />
        </div>
      </div>
    </div>
    <div className="mt-10 lg:mt-12">
      <p className="font-600 text-[32px] leading-10 mb-6 lg:text-[40px] lg:leading-12 lg:mb-8">
        {" "}
        Bài viết liên quan{" "}
      </p>
      {/* Limit: 4 */}
      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4 lg:gap-6">
        <div className="art-item">
          <a href="" className="art-img">
            <img
              src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
              alt=""
              width={1}
              height={1}
            />
          </a>
          <div className="art-text">
            <a href="" className="art-title">
              <h3>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
                quidem asperiores provident dicta veniam deleniti eaque
                repudiandae cum esse, ducimus officiis quibusdam pariatur neque
                voluptates voluptas. Quisquam qui minus dolorum?
              </h3>
            </a>
            <div className="art-summary">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
              obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
              nostrum fugit facere illo quos. Ad error suscipit, quidem optio
              aut laudantium at!
            </div>
            <div className="art-time">
              <i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
              <time>23/4/2024</time>
              <i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
              <span>Mai Văn Học</span>
            </div>
          </div>
        </div>
        <div className="art-item">
          <a href="" className="art-img">
            <img
              src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
              alt=""
              width={1}
              height={1}
            />
          </a>
          <div className="art-text">
            <a href="" className="art-title">
              <h3>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
                quidem asperiores provident dicta veniam deleniti eaque
                repudiandae cum esse, ducimus officiis quibusdam pariatur neque
                voluptates voluptas. Quisquam qui minus dolorum?
              </h3>
            </a>
            <div className="art-summary">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
              obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
              nostrum fugit facere illo quos. Ad error suscipit, quidem optio
              aut laudantium at!
            </div>
            <div className="art-time">
              <i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
              <time>23/4/2024</time>
              <i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
              <span>Mai Văn Học</span>
            </div>
          </div>
        </div>
        <div className="art-item">
          <a href="" className="art-img">
            <img
              src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
              alt=""
              width={1}
              height={1}
            />
          </a>
          <div className="art-text">
            <a href="" className="art-title">
              <h3>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
                quidem asperiores provident dicta veniam deleniti eaque
                repudiandae cum esse, ducimus officiis quibusdam pariatur neque
                voluptates voluptas. Quisquam qui minus dolorum?
              </h3>
            </a>
            <div className="art-summary">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
              obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
              nostrum fugit facere illo quos. Ad error suscipit, quidem optio
              aut laudantium at!
            </div>
            <div className="art-time">
              <i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
              <time>23/4/2024</time>
              <i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
              <span>Mai Văn Học</span>
            </div>
          </div>
        </div>
        <div className="art-item">
          <a href="" className="art-img">
            <img
              src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
              alt=""
              width={1}
              height={1}
            />
          </a>
          <div className="art-text">
            <a href="" className="art-title">
              <h3>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
                quidem asperiores provident dicta veniam deleniti eaque
                repudiandae cum esse, ducimus officiis quibusdam pariatur neque
                voluptates voluptas. Quisquam qui minus dolorum?
              </h3>
            </a>
            <div className="art-summary">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
              obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
              nostrum fugit facere illo quos. Ad error suscipit, quidem optio
              aut laudantium at!
            </div>
            <div className="art-time">
              <i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
              <time>23/4/2024</time>
              <i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
              <span>Mai Văn Học</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</>

    )
}