export default function ArticleHome({ slug }: { slug: string }) {
    return(
        <>
        <h1 className="absolute top-[-999px] z-[-1]"> tin tức </h1>
        <div className="article-page static">
            {/* <style>body{background: #F5F8FF}</style> */}
            <div className="top-article-container container flex flex-wrap gap-6 !mb-2 lg:!mb-6">
            <div
                className="col-left w-full lg:w-[718px] swiper overflow-hidden relative"
                id="js-top-article-slide"
            >
                <div className="swiper-wrapper">
                <div className="swiper-slide">
                    <a href="">
                    <img
                        src="https://hoanghapccdn.com/media/news/18_c___u_h__nh_m__y_t__nh_ch___y_gi____l___p_nox_player__ldplayer.jpg"
                        className="block w-full rounded-[16px]"
                    />
                    </a>
                </div>
                <div className="swiper-slide">
                    {" "}
                    <a href="">
                    {" "}
                    <img
                        src="https://hoanghapccdn.com/media/news/19_100__c___u_h__nh_m__y_t__nh_d___ng_phim__render_edit_video_theo_ng__n_s__ch_2024.jpg"
                        className="block w-full rounded-[16px]"
                    />{" "}
                    </a>{" "}
                </div>
                </div>
            </div>
            <div className="col-right w-full lg:w-[calc(100%-742px)]">
                <p className="font-600 text-20 leading-6 lg:text-[24px] lg:leading-8 mb-3">
                {" "}
                Tin nổi bật{" "}
                </p>
                {/* Limit: 3 */}
                <div className="flex flex-col gap-4">
                <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>
            <div className="article-categories-group bg-[#F5F8FF] sticky top-[68px] lg:top-[76px] left-0 right-0 z-[2] pt-5">
            <div className="container flex justify-between relative overflow-auto whitespace-nowrap uppercase font-500 leading-[18px] text-[#828282] gap-5 lg:gap-1 no-scroll border-b border-[#C5CBD8]">
                <a href="#js-category-1" className="js-category-tab">
                {" "}
                MÁY KHỎE - ĐẸP{" "}
                </a>
                <a href="#js-category-2" className="js-category-tab">
                {" "}
                TIN CÔNG NGHỆ{" "}
                </a>
                <a href="#js-category-3" className="js-category-tab">
                {" "}
                REVIEW SẢN PHẨM{" "}
                </a>
                <a href="#js-category-4"> BENCHMARKS </a>
                <a href="#js-category-5"> THỦ THUẬT </a>
                <a href="#js-category-6"> KHUYẾN MÃI </a>
                <a href="#js-category-7"> WIKI </a>
                <a href="#js-category-8"> tin game </a>
            </div>
            </div>
            {/* Danh mục */}
            <div>
            <div className="article-category-container" id="js-category-1">
                <div className="container">
                <div className="group-title flex flex-wrap items-center justify-between gap-4 mb-4 lg:mb-6">
                    <div className="flex items-center gap-2 lg:gap-3">
                    <h2 className="m-0 font-600 text-[#004BA4] text-20 leading-6 lg:leading-10 lg:text-[32px]">
                        {" "}
                        Danh mục tin{" "}
                    </h2>
                    <a
                        href=""
                        className="bx bx-chevron-right border-[1.5px] border-[#0677DB4D] rounded-full w-5 lg:w-8 h-5 lg:h-8 flex items-center justify-center text-[#0678DB] text-18 lg:text-[24px] hover:bg-[#0678DB] hover:text-white"
                    >
                        {" "}
                    </a>
                    </div>
                    <div className="w-full lg:w-auto flex gap-2 leading-[30px] text-[#0678DB] font-600 text-16 overflow-auto whitespace-nowrap no-scroll">
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        {" "}
                        Laptop{" "}
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        {" "}
                        Màn Hình{" "}
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        {" "}
                        Vỏ Case{" "}
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        {" "}
                        HDD - SSD{" "}
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        {" "}
                        Ram PC{" "}
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        {" "}
                        Card Đồ Họa{" "}
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        {" "}
                        Mainboard{" "}
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        {" "}
                        CPU - Vi Xử Lý{" "}
                    </a>
                    </div>
                </div>
                <div className="article-category-holder grid lg:grid-cols-2 gap-5 lg:gap-8">
                    <div className="first-item">
                    <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>
                    {/* limit: 4 */}
                    <div className="grid grid-cols-2 gap-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>
            </div>
            <div className="article-category-container" id="js-category-2">
                <div className="container">
                <div className="group-title flex flex-wrap items-center justify-between gap-4 mb-4 lg:mb-6">
                    <div className="flex items-center gap-2 lg:gap-3">
                    <h2 className="m-0 font-600 text-[#004BA4] text-20 leading-6 lg:leading-10 lg:text-[32px]">
                        Danh mục tin
                    </h2>
                    <a
                        href=""
                        className="bx bx-chevron-right border-[1.5px] border-[#0677DB4D] rounded-full w-5 lg:w-8 h-5 lg:h-8 flex items-center justify-center text-[#0678DB] text-18 lg:text-[24px] hover:bg-[#0678DB] hover:text-white"
                    />
                    </div>
                    <div className="w-full lg:w-auto flex gap-2 leading-[30px] text-[#0678DB] font-600 text-16 overflow-auto whitespace-nowrap no-scroll">
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        Laptop
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        Màn Hình
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        Vỏ Case
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        HDD - SSD
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        Ram PC
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        Card Đồ Họa
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        Mainboard
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        CPU - Vi Xử Lý
                    </a>
                    </div>
                </div>
                <div className="article-category-holder grid lg:grid-cols-2 gap-5 lg:gap-8">
                    <div className="first-item">
                    <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 className="grid grid-cols-2 gap-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>
            </div>
            <div className="article-category-container" id="js-category-3">
                <div className="container">
                <div className="group-title flex flex-wrap items-center justify-between gap-4 mb-4 lg:mb-6">
                    <div className="flex items-center gap-2 lg:gap-3">
                    <h2 className="m-0 font-600 text-[#004BA4] text-20 leading-6 lg:leading-10 lg:text-[32px]">
                        Danh mục tin
                    </h2>
                    <a
                        href=""
                        className="bx bx-chevron-right border-[1.5px] border-[#0677DB4D] rounded-full w-5 lg:w-8 h-5 lg:h-8 flex items-center justify-center text-[#0678DB] text-18 lg:text-[24px] hover:bg-[#0678DB] hover:text-white"
                    />
                    </div>
                    <div className="w-full lg:w-auto flex gap-2 leading-[30px] text-[#0678DB] font-600 text-16 overflow-auto whitespace-nowrap no-scroll">
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        Laptop
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        Màn Hình
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        Vỏ Case
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        HDD - SSD
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        Ram PC
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        Card Đồ Họa
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        Mainboard
                    </a>
                    <a
                        href=""
                        className="bg-[#EAF1FF] px-2 rounded-[30px] hover:bg-[#0678DB] hover:text-white"
                    >
                        CPU - Vi Xử Lý
                    </a>
                    </div>
                </div>
                <div className="article-category-holder grid lg:grid-cols-2 gap-5 lg:gap-8">
                    <div className="first-item">
                    <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 className="grid grid-cols-2 gap-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>
            </div>
            </div>
            {/* Video + tiktok */}
            <div className="container">
            <div className="article-video-container lg:flex flex-wrap gap-4">
                <div className="lg:w-[732px] video-holder" id="js-video-holder" />
                <div className="lg:w-[calc(100%-748px)] rounded-[16px] overflow-hidden bg-[#EAF1FF]">
                <p className="group-title m-0 text-white flex items-center gap-2 lg:gap-3 font-600 p-[8px_12px] leading-[18px] lg:text-[20px] lg:leading-6 lg:p-[12px_16px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,#114CDD_100.92%)]">
                    <i
                    className="w-[18px] h-[18px] lg:w-6 lg:h-6 lazy bg-no-repeat bg-center bg-[length:100%_100%]"
                    data-bg="url(images/icon-playlist.png)"
                    />
                    <a href="/video"> Trending video </a>
                </p>
                <div className="h-[385px] p-4 pr-1 relative">
                    <div
                    className="h-full overflow-auto flex flex-col gap-4 "
                    id="js-video-list"
                    >
                    <a
                        href="javascript:void(0)"
                        data-href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
                        data-item={1}
                        className="video-item current"
                    >
                        <span className="video-img">
                        <img
                            src="https://hoanghapccdn.com/media/news/1241_pc_do_hoa_13900k_4070.jpg"
                            alt="PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070"
                            width={120}
                            height={66}
                        />
                        </span>
                        <p className="video-title m-0">
                        <span>PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070</span>
                        <span className="js-video-time" />
                        </p>
                    </a>
                    <a
                        href="javascript:void(0)"
                        data-href="https://www.youtube.com/watch?v=nwkc_lvEJMA"
                        data-item={2}
                        className="video-item"
                    >
                        {" "}
                        <span className="video-img">
                        <img
                            src="https://hoanghapccdn.com/media/news/1181_pc_mini_white_13600k.jpg"
                            alt="Mini PC White Nhỏ Gọn - Tinh Tế - Hiệu Năng Cao"
                            width={120}
                            height={66}
                        />{" "}
                        </span>{" "}
                        <p className="video-title m-0">
                        {" "}
                        <span>
                            Mini PC White Nhỏ Gọn - Tinh Tế - Hiệu Năng Cao
                        </span>{" "}
                        <span className="js-video-time" />{" "}
                        </p>{" "}
                    </a>
                    <a
                        href="javascript:void(0)"
                        data-href="https://www.youtube.com/watch?v=08varEBPXwc"
                        data-item={3}
                        className="video-item"
                    >
                        {" "}
                        <span className="video-img">
                        <img
                            src="https://hoanghapccdn.com/media/news/1180_pc_do_hoa_13900k_4070_1.jpg"
                            alt="PC Full Trắng 5x Triệu Linh Kiện Thế Hệ Mới Hiệu Năng Khủng"
                            width={120}
                            height={66}
                        />{" "}
                        </span>{" "}
                        <p className="video-title m-0">
                        {" "}
                        <span>
                            PC Full Trắng 5x Triệu Linh Kiện Thế Hệ Mới Hiệu Năng Khủng
                        </span>{" "}
                        <span className="js-video-time" />{" "}
                        </p>{" "}
                    </a>
                    <a
                        href="javascript:void(0)"
                        data-href="https://www.youtube.com/watch?v=QAwiNtcYi3M"
                        data-item={4}
                        className="video-item"
                    >
                        {" "}
                        <span className="video-img">
                        <img
                            src="https://hoanghapccdn.com/media/news/1179_pc_do_hoa_13900k_3070.jpg"
                            width={120}
                            height={66}
                        />{" "}
                        </span>{" "}
                        <p className="video-title m-0">
                        {" "}
                        <span>
                            Cấu Hình "Chất Chơi" Với i9-13900K - RTX 3070 Siêu Khỏe!
                        </span>{" "}
                        <span className="js-video-time" />{" "}
                        </p>{" "}
                    </a>
                    <a
                        href="javascript:void(0)"
                        data-href="https://www.youtube.com/watch?v=TvJQnov_Wjs"
                        data-item={5}
                        className="video-item"
                    >
                        {" "}
                        <span className="video-img">
                        <img
                            src="https://hoanghapccdn.com/media/news/1170_pc_do_hoa_13700k_4070ti.jpg"
                            alt="PC Gaming Full Trắng Siêu Đẹp Với i7-13700K vs RTX 4070"
                            width={120}
                            height={66}
                        />{" "}
                        </span>{" "}
                        <p className="video-title m-0">
                        {" "}
                        <span>
                            PC Gaming Full Trắng Siêu Đẹp Với i7-13700K vs RTX 4070
                        </span>{" "}
                        <span className="js-video-time" />{" "}
                        </p>{" "}
                    </a>{" "}
                    <a
                        href="javascript:void(0)"
                        data-href="https://www.youtube.com/watch?v=kOAs-q4Qp6k"
                        data-item={6}
                        className="video-item"
                    >
                        {" "}
                        <span className="video-img">
                        <img
                            src="https://hoanghapccdn.com/media/news/1169_pc_do_hoa_13900k_4070ti.jpg"
                            alt="Review PC Hơn 50 Triệu Cực Ngầu Full Đen"
                            width={120}
                            height={66}
                        />{" "}
                        </span>{" "}
                        <p className="video-title m-0">
                        {" "}
                        <span>Review PC Hơn 50 Triệu Cực Ngầu Full Đen</span>{" "}
                        <span className="js-video-time" />{" "}
                        </p>{" "}
                    </a>
                    </div>
                    <div className="gradient-overlay" />
                </div>
                </div>
            </div>
            <div className="article-tiktok-container py-8 lg:py-16">
                <div className="group-title flex items-center justify-between flex-wrap gap-4 mb-6">
                <h2 className="flex items-center m-0 leading-8 font-600 text-20 text-[#004BA4] gap-[10px] lg:gap-4 lg:text-[32px] lg:leading-10">
                    <i
                    className="lazy bg-no-repeat bg-center bg-[length:100%_100%] w-8 h-8 lg:w-12 lg:h-12"
                    data-bg="url(images/logo-tiktok.png)"
                    />
                    <span> Tiktok Channel </span>
                </h2>
                <div className="flex flex-wrap items-center justify-center text-center bg-[#DCE8FF] rounded-[16px_0_] leading-5 lg:leading-6 lg:text-[16px] gap-3 lg:w-[823px] w-full p-3 lg:p-4">
                    <i className="icons icon-finger !w-6 !h-6 animation-wiggle" />
                    <div className="lg:flex flex-wrap">
                    <p className="m-0 mr-1">
                        {" "}
                        Theo dõi kênh tiktok của Hoàng hà PC:{" "}
                    </p>
                    <a
                        href="https://www.tiktok.com/@hoangha.pc"
                        target="_blank"
                        rel="nofollow"
                        className="text-[#0678DB] font-600 table lg:text-[16px]"
                    >
                        {" "}
                        ORIGINAL SOUND - HOÀNG HÀ PC{" "}
                    </a>
                    </div>
                </div>
                </div>
                <div className="swiper overflow-hidden" id="js-tiktok-slide">
                <div className="swiper-wrapper">
                    <div className="swiper-slide">
                    <a href="" target="_blank" rel="nofollow">
                        <span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
                        <img
                            data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
                            alt=""
                            width={1}
                            height={1}
                            className="block lazy w-full absolute h-full object-cover"
                        />
                        </span>
                        <span className="block leading-[22px] font-600 text-16">
                        Đơn hàng đặc biệt cho khách VIP
                        </span>
                    </a>
                    </div>
                    <div className="swiper-slide">
                    <a href="" target="_blank" rel="nofollow">
                        <span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
                        <img
                            data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
                            alt=""
                            width={1}
                            height={1}
                            className="block lazy w-full absolute h-full object-cover"
                        />
                        </span>
                        <span className="block leading-[22px] font-600 text-16">
                        Đơn hàng đặc biệt cho khách VIP
                        </span>
                    </a>
                    </div>
                    <div className="swiper-slide">
                    <a href="" target="_blank" rel="nofollow">
                        <span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
                        <img
                            data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
                            alt=""
                            width={1}
                            height={1}
                            className="block lazy w-full absolute h-full object-cover"
                        />
                        </span>
                        <span className="block leading-[22px] font-600 text-16">
                        Đơn hàng đặc biệt cho khách VIP
                        </span>
                    </a>
                    </div>
                    <div className="swiper-slide">
                    <a href="" target="_blank" rel="nofollow">
                        <span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
                        <img
                            data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
                            alt=""
                            width={1}
                            height={1}
                            className="block lazy w-full absolute h-full object-cover"
                        />
                        </span>
                        <span className="block leading-[22px] font-600 text-16">
                        Đơn hàng đặc biệt cho khách VIP
                        </span>
                    </a>
                    </div>
                    <div className="swiper-slide">
                    <a href="" target="_blank" rel="nofollow">
                        <span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
                        <img
                            data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
                            alt=""
                            width={1}
                            height={1}
                            className="block lazy w-full absolute h-full object-cover"
                        />
                        </span>
                        <span className="block leading-[22px] font-600 text-16">
                        Đơn hàng đặc biệt cho khách VIP
                        </span>
                    </a>
                    </div>
                    <div className="swiper-slide">
                    <a href="" target="_blank" rel="nofollow">
                        <span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
                        <img
                            data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
                            alt=""
                            width={1}
                            height={1}
                            className="block lazy w-full absolute h-full object-cover"
                        />
                        </span>
                        <span className="block leading-[22px] font-600 text-16">
                        Đơn hàng đặc biệt cho khách VIP
                        </span>
                    </a>
                    </div>
                    <div className="swiper-slide">
                    <a href="" target="_blank" rel="nofollow">
                        <span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
                        <img
                            data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
                            alt=""
                            width={1}
                            height={1}
                            className="block lazy w-full absolute h-full object-cover"
                        />
                        </span>
                        <span className="block leading-[22px] font-600 text-16">
                        Đơn hàng đặc biệt cho khách VIP
                        </span>
                    </a>
                    </div>
                    <div className="swiper-slide">
                    <a href="" target="_blank" rel="nofollow">
                        <span className="block relative mb-2 rounded-[12px] overflow-hidden pb-[344px]">
                        <img
                            data-src="https://hoanghapccdn.com/media/lib/27-07-2023/don-hang-khach-vip.jpg"
                            alt=""
                            width={1}
                            height={1}
                            className="block lazy w-full absolute h-full object-cover"
                        />
                        </span>
                        <span className="block leading-[22px] font-600 text-16">
                        Đơn hàng đặc biệt cho khách VIP
                        </span>
                    </a>
                    </div>
                </div>
                </div>
            </div>
            </div>
        </div>
        </>

    )
}