upload 29/12
This commit is contained in:
43
src/app/[slug]/page.tsx
Normal file
43
src/app/[slug]/page.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { findBySlug } from "@/lib/slugMap";
|
||||
|
||||
import ProductCategory from "@/components/product/Category";
|
||||
import ProductDetail from "@/components/product/ProductDetail";
|
||||
import ArticleHome from "@/components/article/Home";
|
||||
import ArticleCategory from "@/components/article/Category";
|
||||
import ArticleDetail from "@/components/article/ArticleDetail";
|
||||
|
||||
|
||||
export default async function SlugPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
|
||||
if (!slug) return notFound();
|
||||
|
||||
const result = findBySlug(slug);
|
||||
|
||||
if (!result) return notFound();
|
||||
|
||||
switch (result.type) {
|
||||
case "product_category":
|
||||
return <ProductCategory slug={slug} />;
|
||||
|
||||
case "product_detail":
|
||||
return <ProductDetail slug={slug} />;
|
||||
|
||||
case "article_home":
|
||||
return <ArticleHome slug={slug} />;
|
||||
|
||||
case "article_category":
|
||||
return <ArticleCategory slug={slug} />;
|
||||
|
||||
case "article_detail":
|
||||
return <ArticleDetail slug={slug} />;
|
||||
|
||||
default:
|
||||
return notFound();
|
||||
}
|
||||
}
|
||||
BIN
src/app/favicon.ico
Normal file
BIN
src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
28
src/app/layout.tsx
Normal file
28
src/app/layout.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import type { Metadata } from "next";
|
||||
import type { ReactNode } from 'react';
|
||||
import Header from "@/components/other/Header";
|
||||
import Footer from "@/components/other/Footer";
|
||||
import '../styles/globals.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Local Pc",
|
||||
description: "hoanghapc",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="vi">
|
||||
<body>
|
||||
<Header />
|
||||
|
||||
{children}
|
||||
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
8
src/app/not-found.tsx
Normal file
8
src/app/not-found.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div style={{ padding: 40 }}>
|
||||
<h1>404</h1>
|
||||
<p>Trang không tồn tại</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
src/app/page.tsx
Normal file
10
src/app/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
|
||||
import Home from "@/components/home";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<Home />
|
||||
</>
|
||||
)
|
||||
}
|
||||
218
src/components/article/ArticleDetail/index.tsx
Normal file
218
src/components/article/ArticleDetail/index.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
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>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
313
src/components/article/Category/index.tsx
Normal file
313
src/components/article/Category/index.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
export default function ArticleCategory({ slug }: { slug: string }) {
|
||||
return(
|
||||
<>
|
||||
<h1 className="absolute top-[-999px] z-[-1]"> Danh mục tin </h1>
|
||||
<div className="article-page container !mt-8 mt-6">
|
||||
{/* <style>body{background: #F5F8FF}</style> */}
|
||||
<div className="article-categories-group bg-[#F5F8FF] 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="" className="active">
|
||||
{" "}
|
||||
MÁY KHỎE - ĐẸP{" "}
|
||||
</a>
|
||||
<a href=""> TIN CÔNG NGHỆ </a>
|
||||
<a href=""> REVIEW SẢN PHẨM </a>
|
||||
<a href=""> BENCHMARKS </a>
|
||||
<a href=""> THỦ THUẬT </a>
|
||||
<a href=""> KHUYẾN MÃI </a>
|
||||
<a href=""> WIKI </a>
|
||||
<a href=""> tin game </a>
|
||||
</div>
|
||||
{/* Tin tức */}
|
||||
<div className="article-holder grid lg:grid-cols-3 grid-cols-2 gap-4 lg:gap-6 my-5">
|
||||
<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 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>
|
||||
{/* Video */}
|
||||
<div className="article-holder article-video-holder grid lg:grid-cols-3 grid-cols-2 gap-4 lg:gap-6 my-5">
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
|
||||
data-fancybox=""
|
||||
className="video-item"
|
||||
>
|
||||
<span className="item-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}
|
||||
/>
|
||||
<i className="bx bxs-play-circle" />
|
||||
</span>
|
||||
<span className="item-title">
|
||||
{" "}
|
||||
PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070{" "}
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
|
||||
data-fancybox=""
|
||||
className="video-item"
|
||||
>
|
||||
<span className="item-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}
|
||||
/>
|
||||
<i className="bx bxs-play-circle" />{" "}
|
||||
</span>
|
||||
<span className="item-title">
|
||||
PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
|
||||
data-fancybox=""
|
||||
className="video-item"
|
||||
>
|
||||
<span className="item-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}
|
||||
/>
|
||||
<i className="bx bxs-play-circle" />{" "}
|
||||
</span>
|
||||
<span className="item-title">
|
||||
PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
|
||||
data-fancybox=""
|
||||
className="video-item"
|
||||
>
|
||||
<span className="item-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}
|
||||
/>
|
||||
<i className="bx bxs-play-circle" />{" "}
|
||||
</span>
|
||||
<span className="item-title">
|
||||
PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
|
||||
data-fancybox=""
|
||||
className="video-item"
|
||||
>
|
||||
<span className="item-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}
|
||||
/>
|
||||
<i className="bx bxs-play-circle" />{" "}
|
||||
</span>
|
||||
<span className="item-title">
|
||||
PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
{/* Paging */}
|
||||
<div className="my-10 flex flex-wrap items-center justify-center gap-4 leading-10 text-center text-16 font-500">
|
||||
<a
|
||||
href=""
|
||||
className="w-10 rounded-full border border-[#DDDDDD] hover:bg-[#004BA4] hover:text-white hover:border-transparent bg-[#004BA4] text-white border-transparent"
|
||||
>
|
||||
{" "}
|
||||
1{" "}
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
className="w-10 rounded-full border border-[#DDDDDD] hover:bg-[#004BA4] hover:text-white hover:border-transparent"
|
||||
>
|
||||
{" "}
|
||||
2{" "}
|
||||
</a>{" "}
|
||||
<a
|
||||
href=""
|
||||
className="w-10 rounded-full border border-[#DDDDDD] hover:bg-[#004BA4] hover:text-white hover:border-transparent"
|
||||
>
|
||||
{" "}
|
||||
3{" "}
|
||||
</a>{" "}
|
||||
<a
|
||||
href=""
|
||||
className="w-10 rounded-full border border-[#DDDDDD] hover:bg-[#004BA4] hover:text-white hover:border-transparent"
|
||||
>
|
||||
{" "}
|
||||
4{" "}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
1202
src/components/article/Home/index.tsx
Normal file
1202
src/components/article/Home/index.tsx
Normal file
File diff suppressed because it is too large
Load Diff
210
src/components/cart/Home/index.tsx
Normal file
210
src/components/cart/Home/index.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
export default function SendCart() {
|
||||
return(
|
||||
<div className="cart-page container">
|
||||
<div className="text-center px-3">
|
||||
<div className="mb-4">
|
||||
<img src="images/cart-empty.png" className="block m-auto" />
|
||||
</div>
|
||||
<p className="mt-10 mb-6 text-20 font-600">
|
||||
{" "}
|
||||
Không có sản phẩm nào trong giỏ hàng của bạn !
|
||||
</p>
|
||||
<a
|
||||
href="/"
|
||||
className="inline-flex items-center bg-btn text-white leading-[52px] font-500 text-18 rounded-[50px] px-6"
|
||||
>
|
||||
{" "}
|
||||
VỀ TRANG CHỦ <i className="bx bx-arrow-up-right-stroke text-30" />{" "}
|
||||
</a>
|
||||
</div>
|
||||
<h1 className="text-[#004BA4] leading-10 text-[32px] font-600 mb-6">
|
||||
{" "}
|
||||
Giỏ hàng của tôi{" "}
|
||||
</h1>
|
||||
<div className="lg:flex flex-wrap items-start justify-between gap-6">
|
||||
<div className="col-left w-[calc(100%-464px)]">
|
||||
<div className="hidden lg:flex flex-wrap items-center justify-between gap-4 bg-white rounded-[12px] mb-3 py-3 px-4 lg:text-[16px] font-500 leading-10">
|
||||
<p className="m-0 text-16 lg:text-[18px]"> 5 sản phẩm </p>
|
||||
<button
|
||||
type="button"
|
||||
className="h-10 border border-[#0678DB] bg-white rounded-[40px] text-[#0678DB] px-6 transition-all duration-100 hover:bg-[#0678DB] hover:text-white"
|
||||
aria-label="Xóa sản phẩm"
|
||||
>
|
||||
{" "}
|
||||
LÀM TRỐNG GIỎ HÀNG{" "}
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-white rounded-[16px] lg:rounded-[12px] mb-3 p-4">
|
||||
<div className="cart-item mb-5 last:mb-0">
|
||||
<a href="" className="item-img">
|
||||
{" "}
|
||||
<img src="images/product-5.jpg" />{" "}
|
||||
</a>
|
||||
<div className="item-text">
|
||||
<div className="item-name">
|
||||
<a
|
||||
href=""
|
||||
className="table uppercase font-500 lg:text-[16px] text-12"
|
||||
>
|
||||
HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB
|
||||
</a>
|
||||
<div className="group mt-2 table">
|
||||
<p className="m-0 text-[#0678DB] font-500 cursor-pointer">
|
||||
<span> Chi tiết khuyến mại </span>
|
||||
<i className="bx bx-chevron-down text-[#A0A5AC] text-16 align-middle transition-all group-hover:rotate-[-180deg]" />
|
||||
</p>
|
||||
<div className="item-offer group-hover:opacity-100 group-hover:z-[5] group-hover:visible">
|
||||
<div className="item">
|
||||
<p>
|
||||
<span style={{ fontSize: "12pt", color: "#ff0000" }}>
|
||||
<strong>⭐ Tặng Balo Laptop Hoàng Hà PC</strong>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<p>
|
||||
<span style={{ fontSize: "12pt", color: "#ff0000" }}>
|
||||
<strong>⭐ Tặng Chuột không dây</strong>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="item">
|
||||
<p>
|
||||
<span style={{ fontSize: "12pt", color: "#ff0000" }}>
|
||||
<strong>⭐ Tặng Bàn di chuột</strong>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-quantiy">
|
||||
<button
|
||||
type="button"
|
||||
className="js-quantity-change bx bx-minus"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
defaultValue={1}
|
||||
min={1}
|
||||
data-stock={998}
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
className="js-buy-quantity js-quantity-change text-center"
|
||||
/>
|
||||
<button type="button" className="js-quantity-change bx bx-plus" />
|
||||
</div>
|
||||
<div className="item-price text-right lg:text-left">
|
||||
<p className="text-[#FF4E2A] font-bold mb-0 lg:mb-1 lg:text-[16px] lg:leading-5 text-13 leading-4">
|
||||
{" "}
|
||||
42.000.000 đ{" "}
|
||||
</p>
|
||||
<del className="block text-[#A0A5AC] lg:text-[13px] lg:leading-4 text-10 leading-3">
|
||||
{" "}
|
||||
52.000.000 đ{" "}
|
||||
</del>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="item-delete bx bx-trash w-8 h-8 lg:w-10 lg:h-10 rounded-full border border-[#E7D9D9] bg-[#F8F3F3] text-[#BE1F2D] text-16 lg:text-[20px] hover:text-white hover:bg-[#BE1F2D] hover:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white p-4 lg:pt-5 rounded-[16px] lg:rounded-[12px]">
|
||||
<p className="font-600 text-16 lg:text-[18px] mb-2 lg:mb-4 leading-5 lg:leading-6">
|
||||
{" "}
|
||||
Thông tin đơn hàng{" "}
|
||||
</p>
|
||||
<div className="flex items-center justify-between gap-3 border-b border-[#D2DAE3] border-dashed pb-4 mb-3 lg:mb-5 leading-5 lg:leading-6 lg:text-[16px]">
|
||||
<p className="m-0"> Tổng tiền </p>
|
||||
<p className="m-0 font-500 text-15 lg:text-[18px]"> 50.000.000 đ </p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3 leading-5 lg:leading-6">
|
||||
<p className="m-0 flex items-center gap-2">
|
||||
<i className="bx bxs-credit-card-alt text-20 text-[#B5BAC1]" />
|
||||
<span> Tổng thanh toán </span>
|
||||
</p>
|
||||
<p className="m-0 text-16 text-[#FF4E2A] font-bold lg:text-[20px]">
|
||||
{" "}
|
||||
41.450.000 <u>đ</u>{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form className="col-right w-[440px] bg-white rounded-[16px] px-5 py-6 sticky top-[90px] z-[1] shadow-[0px_4px_20px_0px_#0615070D] lg:shadow-[none]">
|
||||
<p className="font-600 text-18 text-[#004BA4] leading-6 mb-1">
|
||||
{" "}
|
||||
Thông tin nhận hàng{" "}
|
||||
</p>
|
||||
<div className="leading-[18px] text-[#474747] mb-4">
|
||||
Để tiếp tục đặt hàng, quý khách xin vui lòng
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Đăng nhập"
|
||||
className="font-500 text-[#0678DB]"
|
||||
>
|
||||
{" "}
|
||||
đăng nhập{" "}
|
||||
</button>
|
||||
hoặc nhập thông tin bên dưới. Tư vấn viên sẽ liên hệ theo thông tin bạn
|
||||
cung cấp để xác nhận, không mua không sao
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
id=""
|
||||
className="block w-full h-[50px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
|
||||
placeholder="Họ và tên"
|
||||
/>
|
||||
<input
|
||||
type="tel"
|
||||
id=""
|
||||
className="block w-full h-[50px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]{10,11}"
|
||||
maxLength={11}
|
||||
placeholder="Số điện thoại"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
id=""
|
||||
className="block w-full h-[50px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
|
||||
maxLength={254}
|
||||
placeholder="Nhập email"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id=""
|
||||
className="block w-full h-[50px] mb-2 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
|
||||
placeholder="Địa chỉ nhận hàng"
|
||||
/>
|
||||
<p className="text-[#757575] mb-4">
|
||||
{" "}
|
||||
<i className="bx bx-info-circle text-16 text-[#0678DB] mr-1 align-text-top" />{" "}
|
||||
<span> Nhập Số nhà, Đường, Phường/xã, Quận, Tỉnh </span>{" "}
|
||||
</p>
|
||||
<textarea
|
||||
id=""
|
||||
className="block w-full h-[112px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4 pt-[12px] resize-none outline-none"
|
||||
placeholder="Ghi chú"
|
||||
defaultValue={""}
|
||||
/>
|
||||
</div>
|
||||
<div className="red font-600 my-4"> </div>
|
||||
<div className="mt-5">
|
||||
<button
|
||||
type="submit"
|
||||
className="block w-full bg-btn text-white h-[52px] rounded-[50px] font-500 text-18"
|
||||
>
|
||||
{" "}
|
||||
ĐẶT HÀNG{" "}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
55
src/components/cart/Send/index.tsx
Normal file
55
src/components/cart/Send/index.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
export default function SendCart() {
|
||||
return(
|
||||
<div className="max-w-[656px] m-auto my-10">
|
||||
<div>
|
||||
<img
|
||||
src="images/send-cart-image.png"
|
||||
alt="send-cart"
|
||||
width={1}
|
||||
height={1}
|
||||
className="block m-auto w-auto h-auto"
|
||||
/>
|
||||
<h1 className="mt-10 mb-5 font-600 text-center text-[40px] text-[#004BA4] leading-12">
|
||||
{" "}
|
||||
Bạn đã đặt hàng thành công{" "}
|
||||
</h1>
|
||||
<div className="text-justify lg:text-[18px] lg:leading-6">
|
||||
<p className="mb-4">
|
||||
Chúng tôi vừa nhận được đơn đặt hàng của quý khách trên website
|
||||
HOANGHAPC <br />
|
||||
Đơn hàng này đang được xử lý. Trong vòng{" "}
|
||||
<b className="font-600"> 30 phút (giờ làm việc) </b>, bộ phận bán hàng
|
||||
trực tuyến sẽ liên hệ lại Quý khách để xác nhận thời gian và địa điểm
|
||||
giao hàng.
|
||||
</p>
|
||||
<p className="mb-8">
|
||||
Cảm ơn quý khách đã mua sắm tại Trung tâm thiết bị số HOANGHAPC. Hi vọng
|
||||
chúng tôi đã mang lại cho quý khách những trải nghiệm mua sắm thật tuyệt
|
||||
vời.
|
||||
</p>
|
||||
<div className="text-center">
|
||||
<a
|
||||
href="/"
|
||||
className="inline-flex items-center bg-btn text-white leading-[52px] font-500 text-18 rounded-[50px] px-6"
|
||||
>
|
||||
{" "}
|
||||
VỀ TRANG CHỦ <i className="bx bx-arrow-up-right-stroke text-30" />{" "}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center text-16 lg:text-[18px]">
|
||||
<i className="bx bx-x-circle text-[red] text-[110px]" />
|
||||
<p className="font-bold text-20 mt-5"> Có lỗi xảy ra khi gửi đơn hàng </p>
|
||||
<p className="mb-4">
|
||||
{" "}
|
||||
Đơn hàng của quý khách chưa được gửi. Vui lòng quay lại giỏ hàng để thử
|
||||
gửi lại hoặc liên hệ với chúng tôi để được trợ giúp.{" "}
|
||||
</p>
|
||||
<p className="mb-4"> Cảm ơn quý khách !</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
52
src/components/home/Article/index.tsx
Normal file
52
src/components/home/Article/index.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
export default function Article() {
|
||||
return(
|
||||
<div className="home-article-container bg-white rounded-[24px] p-6 my-8">
|
||||
<div className="mb-8 promotion-news-group">
|
||||
<div className="flex items-center justify-between flex-wrap mb-4 leading-9 gap-4 text-16 font-600">
|
||||
<h2 className="text-[28px] m-0 text-[#004BA4] leading-9"> Chuyên trang Khuyến mãi </h2>
|
||||
<a href="/tin-khuyen-mai" className="text-[#0678DB]"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px] text-18"></i> </a>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 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]'></i>
|
||||
<time> 23/4/2024 </time>
|
||||
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i>
|
||||
<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"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC] mx-1"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between flex-wrap mb-4 leading-9 gap-4 text-16 font-600">
|
||||
<h2 className="text-[28px] m-0 text-[#004BA4] leading-9"> Tin tức Công nghệ </h2>
|
||||
<a href="/tin-cong-nghe" className="text-[#0678DB]"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px] text-18"></i> </a>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 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"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC] mx-1"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
16
src/components/home/Category/index.tsx
Normal file
16
src/components/home/Category/index.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
export default function FeaturedProductCategories() {
|
||||
return (
|
||||
<div className="home-categories-container bg-white rounded-[24px] my-10 p-6 pb-8">
|
||||
<h2 className="group-title font-600 text-[28px] text-[#004BA4] mb-5 leading-9"> Danh mục nổi bật </h2>
|
||||
|
||||
<div className="grid grid-cols-10 gap-6">
|
||||
<a href="" className="item">
|
||||
<i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-3.png)' }}></i>
|
||||
<span className="block"> PC Thiết Kế Đồ Họa </span>
|
||||
</a>
|
||||
|
||||
<a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-1.png)' }}></i><span className="block">PC Thiết</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-2.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-4.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-5.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-7.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-8.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-9.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-11.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-12.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-13.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
88
src/components/home/Deal/index.tsx
Normal file
88
src/components/home/Deal/index.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
'use client';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
|
||||
|
||||
export default function Deal() {
|
||||
return (
|
||||
<div className="home-deal-container my-[3rem]">
|
||||
<div className="deal-container p-4 pt-6 rounded-[12px]" style={{ backgroundImage: 'url(images/bg-deal-home.png)' }}>
|
||||
<div className="group-title flex items-center justify-between mb-6 text-white relative z-[1]">
|
||||
<div className="flex items-center flex items-center">
|
||||
<div className="flex items-center">
|
||||
<i className="icon-bolt lazy mr-2" style={{ backgroundImage: 'url(images/icon-bolt.png)' }}></i>
|
||||
<p className="m-0 mr-5 font-600 text-[32px]"> Cấu hình Flash Sale </p>
|
||||
</div>
|
||||
|
||||
<div className="deal-time-holder">
|
||||
<p> 00 </p> <p> 00 </p> <p> 00 </p> <p> 00 </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/deal" className="text-16 font-600"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px]"></i> </a>
|
||||
</div>
|
||||
|
||||
<div className="group relative z-[1] bg-white rounded-[12px] relative min-h-[450px] px-4 pt-6 pb-8">
|
||||
<div className="custom-nav hidden">
|
||||
<div className="button-icon swiper-button-prev"></div>
|
||||
<div className="button-icon swiper-button-next"></div>
|
||||
</div>
|
||||
|
||||
<Swiper
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
spaceBetween={24}
|
||||
slidesPerView={5}
|
||||
loop={true}
|
||||
autoplay={{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
navigation={{
|
||||
prevEl: '.custom-nav .swiper-button-prev',
|
||||
nextEl: '.custom-nav .swiper-button-next',
|
||||
}}
|
||||
breakpoints={{
|
||||
1600: {
|
||||
slidesPerView: 6,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<div className="deal-item">
|
||||
<a href="" className="deal-img">
|
||||
<img src="images/product-1.jpg" alt="" width="1" height="1" className="fit-img"/>
|
||||
</a>
|
||||
|
||||
<div className="deal-text">
|
||||
<a href="" className="deal-name"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia </a>
|
||||
|
||||
<div className="deal-price-holder">
|
||||
<div>
|
||||
<p className="deal-price"> 48.990.000 đ </p>
|
||||
<del> 52.000.000 đ </del>
|
||||
<span className="deal-discount"> -6% </span>
|
||||
</div>
|
||||
|
||||
<button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button>
|
||||
</div>
|
||||
|
||||
<div className="deal-count">
|
||||
<i className="deal-line" style={{ width: '30%' }}></i>
|
||||
<span> Còn: 3/5 sản phẩm </span>
|
||||
</div>
|
||||
|
||||
<div className="deal-offer">
|
||||
<span className="text-[#BE1F2D]"> Quà tặng: </span>
|
||||
Màn hình Coolest Maste và chuột không dây Logitech
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-2.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '0%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"></div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-3.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '70%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste và chuột không dây Logitech</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-4.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste và chuột không dây Logitech</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-5.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-6.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"></div></div></div></SwiperSlide>
|
||||
</Swiper>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
169
src/components/home/Product/index.tsx
Normal file
169
src/components/home/Product/index.tsx
Normal file
File diff suppressed because one or more lines are too long
91
src/components/home/Slider/index.tsx
Normal file
91
src/components/home/Slider/index.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
'use client';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
|
||||
|
||||
export default function Slider() {
|
||||
return(
|
||||
<div className="home-banner-container mb-10 min-h-[845px]">
|
||||
<div className="banner-slider gap-4 grid grid-cols-3 w-[932px] m-[auto_0_auto_auto]">
|
||||
<div className="home-banner-left col-span-2 custom-dots relative group ">
|
||||
<Swiper
|
||||
spaceBetween={50}
|
||||
slidesPerView={1}
|
||||
loop={true}
|
||||
autoplay={{ delay: 3000 }}
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
navigation={{
|
||||
prevEl: ".custom-nav .swiper-button-prev",
|
||||
nextEl: ".custom-nav .swiper-button-next",
|
||||
}}
|
||||
pagination={{ clickable: true }}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<a href="">
|
||||
<img src="/images/homepage/home-slide.png" alt="" width={100} height={100} className="block w-full lazy"/>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<a href="">
|
||||
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<a href="">
|
||||
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide>
|
||||
<a href="">
|
||||
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
|
||||
<div className="custom-nav hidden">
|
||||
<div
|
||||
className="button-icon swiper-button-prev"
|
||||
role="button"
|
||||
aria-label="Previous slide"
|
||||
/>
|
||||
<div
|
||||
className="button-icon swiper-button-next"
|
||||
role="button"
|
||||
aria-label="Next slide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="home-banner-right col-span-1">
|
||||
<a href="" className="last:mb-0 mb-4">
|
||||
<img src="images/homepage/right-1.png" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
|
||||
<a href="" className="last:mb-0 mb-4">
|
||||
<img src="images/homepage/right-2.png" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="home-banner-right grid grid-cols-3 gap-4 col-span-3">
|
||||
<a href="">
|
||||
<img src="images/homepage/under-slide-1.png" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
|
||||
<a href=""> <img src="images/homepage/under-slide-2.png" alt="" width="" height="" className="block w-full lazy"/> </a> <a href=""> <img src="images/homepage/under-slide-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-4 mt-4">
|
||||
<a href="">
|
||||
<img src="images/homepage/under-1.png" alt="" width="" height="" className="block w-full lazy"/>
|
||||
</a>
|
||||
|
||||
<a href=""> <img src="images/homepage/under-2.png" alt="" width="" height="" className="block w-full lazy"/> </a>
|
||||
<a href=""> <img src="images/homepage/under-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
|
||||
<a href=""> <img src="images/homepage/under-4.png" alt="" width="" height="" className="block w-full lazy"/> </a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
23
src/components/home/index.tsx
Normal file
23
src/components/home/index.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import Slider from "./Slider";
|
||||
import Deal from "./Deal";
|
||||
import FeaturedProductCategories from "./Category";
|
||||
import ProductCategories from "./Product";
|
||||
import Article from "./Article";
|
||||
|
||||
export default function Home() {
|
||||
return(
|
||||
<div className="home-page !-mt-5 pt-6">
|
||||
<div className="container">
|
||||
<Slider />
|
||||
|
||||
<Deal />
|
||||
|
||||
<FeaturedProductCategories />
|
||||
|
||||
<ProductCategories />
|
||||
|
||||
<Article />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
105
src/components/other/Footer/Info.tsx
Normal file
105
src/components/other/Footer/Info.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
export default function PageInfo(){
|
||||
return(
|
||||
<div className="global-footer-container bg-[#0719A7] relative py-16 text-white text-14 lg:text-[16px] leading-[18px] lg:leading-[22px]">
|
||||
<div className="bg-oval"></div>
|
||||
<div className="container relative z-[2]">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6 mb-8 lg:mb-10">
|
||||
<div className="footer-item">
|
||||
<p className="uppercase font-600 mb-4"> Về Hoàng Hà PC </p>
|
||||
|
||||
<div className="inline-grid gap-3 font-500">
|
||||
<a href="/gioi-thieu"> Về Chúng Tôi </a>
|
||||
<a href="/tuyen-dung"> Tuyển Dụng </a>
|
||||
<a href="/he-thong-cua-hang"> Hệ thống showroom </a>
|
||||
<a href="/tin-tuc"> Tin tức </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer-item">
|
||||
<p className="uppercase font-600 mb-4"> Hỗ trợ khách hàng </p>
|
||||
|
||||
<div className="inline-grid gap-3 font-500">
|
||||
<a href="/huong-dan-mua-hang-online">Hướng dẫn mua hàng Online</a>
|
||||
<a href="/phuong-thuc-thanh-toan">Hướng dẫn thanh toán</a>
|
||||
<a href="/huong-dan-mua-tra-gop">Hướng dẫn mua trả góp</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer-item">
|
||||
<p className="uppercase font-600 mb-4"> Chính sách </p>
|
||||
|
||||
<div className="inline-grid gap-3 font-500">
|
||||
<a href="/chinh-sach-bao-hanh">Chính sách bảo hành</a>
|
||||
<a href="/chinh-sach-bao-mat">Chính sách bảo mật</a>
|
||||
<a href="/van-chuyen-giao-nhan">Chính sách vận chuyển, giao nhận</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer-item">
|
||||
<p className="uppercase font-600 mb-4"> Cộng đồng </p>
|
||||
|
||||
<div className="inline-grid gap-3 font-500">
|
||||
<a href="https://www.facebook.com/hoanghapc" target="_blank" rel="nofollow noopener noreferrer"> Hoàng Hà PC Fanpage </a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer"> Phát Triển Hệ Thống Dữ Liệu </a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer"> Phát Triển Trải nghiệm Người dùng </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer-contact-info mb-8 lg:mb-10">
|
||||
<p className="mb-2 font-600 lg:text-[16px] lg:mb-4 uppercase"> Email liên hệ </p>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-2 lg:gap-6">
|
||||
<div className="rounded-[12px] lg:rounded-[16px] bg-[rgba(255,255,255,0.1)] p-4 lg:p-6">
|
||||
<p className="flex items-center gap-2 font-500 uppercase mb-2">
|
||||
<i className="icons icon-puzzle rounded-full !w-6 !h-6"></i>
|
||||
<span > Hợp Tác Phát Triển: </span>
|
||||
</p>
|
||||
|
||||
<a href="mailto:hoanghapcws@gmail.com" className="opacity-[0.8] transition-all hover:opacity-[1] text-16"> hoanghapcws@gmail.com </a>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[12px] lg:rounded-[16px] bg-[rgba(255,255,255,0.1)] p-4 lg:p-6">
|
||||
<p className="flex items-center gap-2 font-500 uppercase mb-2">
|
||||
<i className="icons icon-discount rounded-full !w-6 !h-6"></i>
|
||||
<span > Liên Hệ Báo Giá: </span>
|
||||
</p>
|
||||
|
||||
<a href="mailto:kinhdoanh@hoanghapc.vn" className="opacity-[0.8] transition-all hover:opacity-[1] text-16"> kinhdoanh@hoanghapc.vn </a>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[12px] lg:rounded-[16px] bg-[rgba(255,255,255,0.1)] p-4 lg:p-6">
|
||||
<p className="flex items-center gap-2 font-500 uppercase mb-2">
|
||||
<i className="icons icon-shield rounded-full !w-6 !h-6"></i>
|
||||
<span > Hỗ Trợ Bảo Hành: </span>
|
||||
</p>
|
||||
|
||||
<a href="mailto:baohanh@hoanghapc.vn" className="opacity-[0.8] transition-all hover:opacity-[1] text-16"> baohanh@hoanghapc.vn </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-4 lg:gap-8">
|
||||
<div className="flex items-center gap-4 lg:gap-8">
|
||||
<p className="m-0 text-12 leading-[15px] lg:text-[14px] lg:leading-[18px] opacity-80">
|
||||
CÔNG TY TNHH DỊCH VỤ VÀ CÔNG NGHỆ HOÀNG HÀ<br/>
|
||||
Giấy chứng nhận đăng ký kinh doanh số: 0107406972, được Sở Kế hoạch và Đầu tư Tp. Hà Nội cấp
|
||||
</p>
|
||||
|
||||
<a href="http://online.gov.vn/Home/WebDetails/46319" target="_blank" rel="nofollow noopener noreferrer" className="w-[120px]">
|
||||
<img src="/images/global-footer-bct.png" loading="lazy" alt="Bct" width="1" height="1" className="lazy d-block w-auto h-auto" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer" className="icons icon-linkedin !w-6 !h-6" aria-label="Social Media"></a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer" className="icons icon-facebook !w-6 !h-6" aria-label="Social Media"></a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer" className="icons icon-zalo !w-6 !h-6" aria-label="Social Media"></a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer" className="icons icon-gmail !w-6 !h-6" aria-label="Social Media"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
20
src/components/other/Footer/Newsletter.tsx
Normal file
20
src/components/other/Footer/Newsletter.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
export default function Newsletter() {
|
||||
return (
|
||||
<div className="footer-newsletter-container py-12 mt-16">
|
||||
<div className="container flex flex-wrap items-center justify-between gap-12 relative z-[1]">
|
||||
<i className="lazy icon-newsletter" style={{ backgroundImage: 'url(images/footer-newsletter.png)' }}></i>
|
||||
|
||||
<p className="m-0 text-white font-600 text-20">Hãy để lại Email để nhận thông báo Khuyến mại hấp dẫn hoặc tư vấn miễn phí từ Hoàng Hà PC!</p>
|
||||
|
||||
<form className="w-[756px] flex items-center flex-wrap justify-between gap-3 text-16 font-500">
|
||||
<input type="text" placeholder="Địa chỉ email của bạn" className="border-2 border-transparent bg-white w-[576px] rounded-[40px] h-[52px] px-4 placeholder:font-normal placeholder:text-[#718096] placeholder:text-[16px]" />
|
||||
<button type="button" aria-label="Đăng ký nhận tin" className="uppercase w-[168px] h-[52px] rounded-[40px] bg-white text-[#0678DB] gap-2 flex items-center justify-center border-0">
|
||||
Gửi ngay <i className="icons icon-plane"></i>
|
||||
</button>
|
||||
|
||||
<p className="m-0 text-[#ffc403]"> </p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
159
src/components/other/Footer/Showroom.tsx
Normal file
159
src/components/other/Footer/Showroom.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
export default function Showroom(){
|
||||
return(
|
||||
<div className="global-showroom-container bg-[#E8ECF6] py-16 text-16 leading-[22px]">
|
||||
<div className="container">
|
||||
<p className="text-center col-span-4 text-[#004BA4] text-[40px] font-600 mb-8 leading-[48px]"> Hệ thống Showroom </p>
|
||||
|
||||
<div className="grid grid-cols-4 gap-5">
|
||||
<div className="showroom-item bg-white overflow-hidden relative">
|
||||
<div className="item-triangle"> </div>
|
||||
|
||||
<div className="image">
|
||||
<img src="images/hoang-ha-pc-cau-giay.png" alt="HoangHaPc Cầu Giấy" width="1" height="1" className="block lazy"/>
|
||||
</div>
|
||||
|
||||
<div className="text">
|
||||
<p className="mb-2 uppercase text-[#004BA4] font-600"> QUẬN CẦU GIẤY, HÀ NỘI </p>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-location"></i>
|
||||
<p className="mb-0">
|
||||
<b>Địa chỉ:</b> Số 41 Khúc Thừa Dụ, Phường Cầu Giấy, Hà Nội
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-phone"></i>
|
||||
<p className="mb-0">
|
||||
<b>Hotline:</b> 0969123666
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex">
|
||||
<i className="icons icon-time"></i>
|
||||
<p className="mb-0">
|
||||
<b>Thời gian làm việc:</b> 8h00 - 20h00
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a href="https://goo.gl/maps/56ARHjWKoVhpWBCF6" target="_blank" rel="nofollow noopener noreferrer" className="inline-flex items-center text-linear font-600 mt-4">
|
||||
Chỉ đường tới đây <i className="bxr bx-arrow-right-stroke"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="showroom-item bg-white overflow-hidden relative">
|
||||
<div className="item-triangle"> </div>
|
||||
|
||||
<div className="image">
|
||||
<img src="images/hoang-ha-pc-dong-da-5.jpg" alt="HoangHaPc Đống Đa" width="1" height="1" className="block lazy"/>
|
||||
</div>
|
||||
|
||||
<div className="text">
|
||||
<p className="mb-2 uppercase text-[#004BA4] font-600"> QUẬN ĐỐNG ĐA, HÀ NỘI </p>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-location"></i>
|
||||
<p className="mb-0">
|
||||
<b>Địa chỉ:</b> Số 94E-94F Đường Láng, Phường Đống Đa, Hà Nội
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-phone"></i>
|
||||
<p className="mb-0">
|
||||
<b>Hotline:</b> 0969123666
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex">
|
||||
<i className="icons icon-time"></i>
|
||||
<p className="mb-0">
|
||||
<b>Thời gian làm việc:</b> 8h00 - 20h00
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a href="https://g.page/hoanghapc?share" target="_blank" rel="nofollow noopener noreferrer" className="inline-flex items-center text-linear font-600 mt-4">
|
||||
Chỉ đường tới đây <i className="bxr bx-arrow-right-stroke"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="showroom-item bg-white overflow-hidden relative">
|
||||
<div className="item-triangle"> </div>
|
||||
|
||||
<div className="image">
|
||||
<img src="images/hoang_ha_pc_vinh.jpg" alt="HoangHaPc Vinh" width="1" height="1" className="block lazy"/>
|
||||
</div>
|
||||
|
||||
<div className="text">
|
||||
<p className="mb-2 uppercase text-[#004BA4] font-600"> TP. VINH, NGHỆ AN </p>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-location"></i>
|
||||
<p className="mb-0">
|
||||
<b>Địa chỉ:</b> Số 72 Lê Lợi, Phường Thành Vinh, Nghệ An
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-phone"></i>
|
||||
<p className="mb-0">
|
||||
<b>Hotline:</b> 0969123666
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex">
|
||||
<i className="icons icon-time"></i>
|
||||
<p className="mb-0">
|
||||
<b>Thời gian làm việc:</b> 8h30 - 18h30
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a href="https://goo.gl/maps/1HQrD6mdf4VMYccs6" target="_blank" rel="nofollow noopener noreferrer" className="inline-flex items-center text-linear font-600 mt-4">
|
||||
Chỉ đường tới đây <i className="bxr bx-arrow-right-stroke"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="showroom-item bg-white overflow-hidden relative">
|
||||
<div className="item-triangle"> </div>
|
||||
|
||||
<div className="image">
|
||||
<img src="images/hoang-ha-pc-hcm.jpg" alt="HoangHaPc HỒ CHÍ MINH" width="1" height="1" className="block lazy"/>
|
||||
</div>
|
||||
|
||||
<div className="text">
|
||||
<p className="mb-2 uppercase text-[#004BA4] font-600"> QUẬN 10, HỒ CHÍ MINH </p>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-location"></i>
|
||||
<p className="mb-0">
|
||||
<b>Địa chỉ:</b> Số 260 Lý Thường Kiệt, Phường Diên Hồng, Hồ Chí Minh
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex mb-2">
|
||||
<i className="icons icon-phone"></i>
|
||||
<p className="mb-0">
|
||||
<b>Hotline:</b> 0969123666
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="item-info flex">
|
||||
<i className="icons icon-time"></i>
|
||||
<p className="mb-0">
|
||||
<b>Thời gian làm việc:</b> 8h00 - 20h00
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a href="https://maps.app.goo.gl/nTpvvoS6tkXBxqZg9" target="_blank" rel="nofollow noopener noreferrer" className="inline-flex items-center text-linear font-600 mt-4">
|
||||
Chỉ đường tới đây <i className="bxr bx-arrow-right-stroke"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
27
src/components/other/Footer/index.tsx
Normal file
27
src/components/other/Footer/index.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import Showroom from './Showroom';
|
||||
import PageInfo from './Info';
|
||||
import Newsletter from './Newsletter';
|
||||
import Hotline from '../Global/Hotline';
|
||||
import FeedBack from '../Global/Feedback';
|
||||
import FixedButtons from '../Global/FixedButtons';
|
||||
|
||||
export default function Footer() {
|
||||
|
||||
return(
|
||||
<>
|
||||
<Newsletter />
|
||||
|
||||
<Showroom />
|
||||
|
||||
<PageInfo />
|
||||
|
||||
<FixedButtons />
|
||||
|
||||
<FeedBack />
|
||||
|
||||
<Hotline />
|
||||
|
||||
<div id="js-tooltip" className="absolute z-[999] w-[450px]" style={{ display: 'none' }}> {/* Tooltip */} </div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
70
src/components/other/Global/Feedback.tsx
Normal file
70
src/components/other/Global/Feedback.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
export default function FeedBack(){
|
||||
return(
|
||||
<div id="fancybox-feedback" className="fancybox-content-container max-w-[800px] w-full text-16 leading-6 hidden !p-0 !bg-transparent">
|
||||
<div className="bg-white overflow-hidden rounded-[12px]">
|
||||
<div className="text-center bg-[#0676DA] uppercase font-500 text-20 p-5 relative text-white">
|
||||
<p className="m-0"> Chúng tôi luôn lắng nghe mọi ý kiến đóng góp từ Quý khách </p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 font-400">
|
||||
<p className="mb-4"> Vui lòng điền đầy đủ thông tin bên dưới để chúng tôi có thể hỗ trợ nhanh chóng và chính xác nhất. </p>
|
||||
|
||||
<div className="flex flex-wrap gap-3 lg:grid lg:gap-4 grid-cols-2 text-16 mb-4">
|
||||
<div className="col-span-1 w-full">
|
||||
<p className="font-600 mb-2"> Họ và tên <span className="red">*</span> </p>
|
||||
<input type="text" id="js-feedback-name" placeholder="Nhập họ và tên" className="block w-full h-[50px] rounded-[12px] px-4 bg-[#F3F3F3] border border-transparent placeholder:text-[#9B9B9B] placeholder:font-normal"/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 w-full">
|
||||
<p className="font-600 mb-2"> Số điện thoại <span className="red">*</span> </p>
|
||||
<input type="text" id="js-feedback-phone" placeholder="Nhập số điện thoại" className="block w-full h-[50px] rounded-[12px] px-4 bg-[#F3F3F3] border border-transparent placeholder:text-[#9B9B9B] placeholder:font-normal"/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 w-full">
|
||||
<p className="font-600 mb-2"> Email </p>
|
||||
<input type="text" id="js-feedback-email" placeholder="Nhập Email (tùy chọn)" className="block w-full h-[50px] rounded-[12px] px-4 bg-[#F3F3F3] border border-transparent placeholder:text-[#9B9B9B] placeholder:font-normal"/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 w-full">
|
||||
<p className="font-600 mb-2"> Loại yêu cầu <span className="red">*</span> </p>
|
||||
<select id="js-feedback-type" className="block w-full h-[50px] rounded-[12px] px-4 bg-[#F3F3F3] border border-transparent placeholder:text-[#9B9B9B] placeholder:font-normal">
|
||||
<option value=""> Chọn loại yêu cầu </option>
|
||||
<option value="1"> Tư vấn sản phẩm </option>
|
||||
<option value="2"> Hỗ trợ kỹ thuật </option>
|
||||
<option value="3"> Khiếu nại dịch vụ </option>
|
||||
<option value="4"> Góp ý, phản hồi </option>
|
||||
<option value="5"> Khác </option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 w-full">
|
||||
<p className="font-600 mb-2"> Nội dung chi tiết </p>
|
||||
<textarea id="js-feedback-content" placeholder="Vui lòng ghi rõ thông tin yêu cầu, góp ý hoặc khiếu nại của Quý khách." className="block w-full p-[14px_16px] min-h-[160px] border border-transparent rounded-[12px] bg-[#F3F3F3] placeholder:text-[#9B9B9B] placeholder:font-normal resize-none outline-none"></textarea>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 w-full flex items-center justify-between flex-wrap gap-2 lg:gap-4">
|
||||
<p className="m-0"> Thời gian phản hồi mong muốn </p>
|
||||
|
||||
<select id="js-feedback-time" className="w-full max-w-[400px] h-[46px] rounded-[12px] px-4 bg-[#fff] border border-[#D6DAE1]">
|
||||
<option value=""> Thời gian phản hồi </option>
|
||||
<option value="1"> Trong ngày </option>
|
||||
<option value="2"> 1-3 ngày </option>
|
||||
<option value="3"> 3-7 ngày </option>
|
||||
<option value="4"> Trên 7 ngày </option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[#757575] leading-4 my-6 flex items-center">
|
||||
<i className="bx bx-info-circle blue mr-1 text-16"></i>
|
||||
<span className="font-300"> Thông tin của Quý khách sẽ được chúng tôi bảo mật tuyệt đối và chỉ sử dụng nhằm mục đích hỗ trợ. </span>
|
||||
</p>
|
||||
|
||||
<p className="red my-4"></p>
|
||||
|
||||
<button type="button" aria-label="Gửi phản hồi" className="font-600 bg-btn border text-white block w-full max-w-[320px] mx-auto text-center mt-4 leading-[40px] rounded-[40px] uppercase border-0"> Gửi góp ý </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
40
src/components/other/Global/FixedButtons.tsx
Normal file
40
src/components/other/Global/FixedButtons.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
'use client';
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
export default function FixedButtons() {
|
||||
const [showGoTop, setShowGoTop] = useState(false);
|
||||
const [animate, setAnimate] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => {
|
||||
setShowGoTop(window.scrollY > 250);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', onScroll);
|
||||
return () => window.removeEventListener('scroll', onScroll);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setAnimate(true), 800);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const goTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`global-fixed-button-container ${animate ? 'animate__backInRight' : ''}`}>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer"> <i className="bx bxs-message-bubble-dots animation-beat"></i> </a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer" style={{ backgroundImage: 'url(/images/icon-mess.png)' }}></a>
|
||||
<a href="" target="_blank" rel="nofollow noopener noreferrer"> <i className="bx bxs-phone animation-phone-ring"></i> </a>
|
||||
</div>
|
||||
|
||||
{showGoTop && (
|
||||
<button type="button" className="icon-goTop bxr bx-arrow-up-stroke" aria-label="Lên đầu trang"
|
||||
onClick={goTop}></button>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
170
src/components/other/Global/Hotline.tsx
Normal file
170
src/components/other/Global/Hotline.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
export default function Hotline() {
|
||||
return (
|
||||
<div id="fancybox-headphone" className="fancybox-content-container max-w-[720px] w-full text-16 leading-6 hidden !p-0 !bg-transparent">
|
||||
<div className="bg-white overflow-hidden rounded-[12px]">
|
||||
<div className="text-center bg-[#0676DA] uppercase font-500 text-20 p-5 relative text-white">
|
||||
<p className="m-0"> Liên hệ hotline để nhận được tư vấn tốt nhất </p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 tooltip-content">
|
||||
|
||||
{/* HOÀNG HÀ PC HÀ NỘI */}
|
||||
<div className="last:mb-0 mb-4 bg-[#F2F6FF] rounded-[12px] p-4 grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-14">
|
||||
|
||||
<div>
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 text-18 text-[#004BA4] mb-3"> HOÀNG HÀ PC CẦU GIẤY </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0969123666"> 0969123666 </a>
|
||||
<span> Mr.Long </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0922635999"> 0922635999 </a>
|
||||
<span> Mr. Thụ </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 mb-3 text-14"> BẢO HÀNH - HỖ TRỢ KỸ THUẬT </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0976382666"> 0976382666 </a>
|
||||
<span> Mr. Dũng </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:19006100"> 19006100 </a>
|
||||
<span> Bảo hành </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 text-18 text-[#004BA4] mb-3"> HOÀNG HÀ PC ĐỐNG ĐA </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0396122999"> 0396122999 </a>
|
||||
<span> Mr.Nghĩa </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0396138999"> 0396138999 </a>
|
||||
<span> Mr. Huy </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0396178999"> 0396178999 </a>
|
||||
<span> Mr. Duy </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0397122122"> 0397122122 </a>
|
||||
<span> Mr. Tùng Anh </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* HOÀNG HÀ PC MIỀN TRUNG */}
|
||||
<div className="last:mb-0 mb-4 bg-[#F2F6FF] rounded-[12px] p-4 grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-12">
|
||||
|
||||
<div>
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 text-18 text-[#004BA4] mb-3"> HOÀNG HÀ PC MIỀN TRUNG </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0988163666"> 0988163666 </a>
|
||||
<span> Mr. Hưng </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0356072072"> 0356072072 </a>
|
||||
<span> Mr. Huy </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 mb-3 text-14"> BẢO HÀNH - HỖ TRỢ KỸ THUẬT </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0358072072"> 0358072072 </a>
|
||||
<span> Mr.Toản </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:19006100"> 19006100 </a>
|
||||
<span> Bảo hành </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* HOÀNG HÀ PC HỒ CHÍ MINH */}
|
||||
<div className="last:mb-0 mb-4 bg-[#F2F6FF] rounded-[12px] p-4 grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-12">
|
||||
|
||||
<div>
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 text-18 text-[#004BA4] mb-3"> HOÀNG HÀ PC ĐỐNG ĐA </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0968123666"> 0968123666 </a>
|
||||
<span> Mr. Bình </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0379260260"> 0379260260 </a>
|
||||
<span> Mr. Khanh </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:0359072072"> 0359072072 </a>
|
||||
<span> Mr. Kiên </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="last:mb-0 mb-10">
|
||||
<p className="border-b border-[#DEE4EC] leading-6 pb-2 font-600 mb-3 text-14"> BẢO HÀNH - HỖ TRỢ KỸ THUẬT </p>
|
||||
|
||||
<div className="hotline-list">
|
||||
<p>
|
||||
<a href="tel:0345260260"> 0345260260 </a>
|
||||
<span> Mr. Nhân </span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="tel:19006100"> 19006100 </a>
|
||||
<span> Bảo hành </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
47
src/components/other/Header/Account.tsx
Normal file
47
src/components/other/Header/Account.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
export default function Account(){
|
||||
return (
|
||||
<div className="header-account bg-[#003ED0] rounded-[30px] group">
|
||||
<button type="button" className="flex items-center justify-center gap-2 py-[6px] w-[103px]" aria-label="Tài khoản">
|
||||
<i className="icons icon-user"></i>
|
||||
<span className="text"> Đăng<br/>Nhập </span>
|
||||
</button>
|
||||
|
||||
<div className="bg-white text-[#000] text-16 leading-6 absolute top-[150%] right-0 whitespace-nowrap min-w-[220px] overflow-hidden rounded-md shadow-[0px_4px_10px_0px_#0000001a] transition-all duration-200 z-[-1] invisible opacity-0 group-hover:opacity-100 group-hover:visible group-hover:z-[9] group-hover:top-[100%] group-hover:visible">
|
||||
<a href="javascript:void(0)" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-user w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Đăng ký</span>
|
||||
</a>
|
||||
|
||||
<a href="javascript:void(0)" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-user w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Đăng nhập</span>
|
||||
</a>
|
||||
|
||||
<a href="/taikhoan?view=change-info" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-user w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Thông tin tài khoản</span>
|
||||
</a>
|
||||
|
||||
<a href="/taikhoan?view=order" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-list-ul-square w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Danh sách đơn hàng</span>
|
||||
</a>
|
||||
|
||||
<a href="/san-pham-da-xem" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-eye w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Sản phẩm đã xem</span>
|
||||
</a>
|
||||
|
||||
<a href="/taikhoan?view=change-pass" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-lock w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Thay đổi mật khẩu</span>
|
||||
</a>
|
||||
|
||||
<a href="/logout.php" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
|
||||
<i className="bx bx-arrow-out-right-square-half w-5 h-5 text-center mr-2 text-20"></i>
|
||||
<span>Thoát tài khoản</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
19
src/components/other/Header/Cart.tsx
Normal file
19
src/components/other/Header/Cart.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
export default function Cart(){
|
||||
return(
|
||||
<>
|
||||
<div className="header-cart-item" id="js-header-cart">
|
||||
<a href="/cart" rel="nofollow" className="flex items-center">
|
||||
<i className="icon-cart relative mr-[10px]">
|
||||
<b className="js-cart-count cart-count">0</b>
|
||||
</i>
|
||||
<span className="text"> Giỏ <br/>Hàng </span>
|
||||
</a>
|
||||
|
||||
<div className="header-cart-hover" id="js-header-cart-holder">
|
||||
<div className="cart-items-holder"><div className="cart-item"><a href="/o-cung-di-dong-ssd-transcend-esd310-1tb" className="cart-img"><img src="https://mygear.io.vn/media/product/75-6728-transcend-esd310-theme.jpg"/></a><div className="cart-text"><a href="/o-cung-di-dong-ssd-transcend-esd310-1tb" className="d-block font-700" style={{ marginBottom: '5px' }}>Ổ Cứng Di Động SSD Transcend ESD310 1TB</a><p className="font-300" style={{ margin: '5px 0' }}> Màu sắc : <b>Màu Đen</b></p><p className="m-0 d-flex justify-content-between"><b>x2</b><b className="red">4.580.000 đ</b></p></div></div><div className="cart-item"><a href="/msi-pro-b860-p-wifi" className="cart-img"><img src="https://mygear.io.vn/media/product/75-7042-pro-b860-p-wifi-1.jpg"/></a><div className="cart-text"><a href="/msi-pro-b860-p-wifi" className="d-block font-700" style={{ marginBottom: '5px' }}>Mainboard MSI PRO B860-P WIFI DDR5</a><p className="m-0 d-flex justify-content-between"><b>x1</b><b className="red">6.190.000 đ</b></p></div></div></div><div className="cart-price-hover"><p className="grey m-0 text-right"> Tổng tiền hàng (<span className="red"><span className="js-cart-count">3</span> sản phẩm</span>): <span className="red text-18 font-600" style={{ verticalAlign: 'top' }}> 10.770.000đ </span></p><a href="/cart" className="d-block text-center text-white btn-goCart"> THANH TOÁN NGAY </a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
7
src/components/other/Header/Logo.tsx
Normal file
7
src/components/other/Header/Logo.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function Logo(){
|
||||
return(
|
||||
<a href="/">
|
||||
<img src="/images/logo.png" alt="logo" width={1} height={1} className="block w-auto max-h-[56px]" />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
15
src/components/other/Header/Menu.tsx
Normal file
15
src/components/other/Header/Menu.tsx
Normal file
File diff suppressed because one or more lines are too long
12
src/components/other/Header/Search.tsx
Normal file
12
src/components/other/Header/Search.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export default function Search(){
|
||||
return(
|
||||
<div className="header-search-group w-[440px] relative">
|
||||
<form method="get" action="/tim" name="search" className="flex items-center justify-between p-[6px] pl-5 bg-white rounded-[30px]">
|
||||
<input type="text" id="js-global-search" name="q" placeholder="Nhập từ khóa tìm kiếm" defaultValue="" autoComplete="off" className="w-[calc(100%_-_36px)] pr-3 placeholder:!text-[#5F5F5F] placeholder:!text-[14px] h-9" />
|
||||
<button type="button" id="js-search-btn" aria-labelledby="js-global-search" className="bg-linear rounded-full w-9 h-9"><i className="block !w-full !h-full icons icon-search"></i></button>
|
||||
</form>
|
||||
|
||||
<div className="autocomplete-suggestions" id="js-search-holder"> </div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
93
src/components/other/Header/index.tsx
Normal file
93
src/components/other/Header/index.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
'use client';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Logo from "./Logo";
|
||||
import Menu from "./Menu";
|
||||
import Search from "./Search";
|
||||
import Cart from "./Cart";
|
||||
import Account from "./Account";
|
||||
import { usePathname } from 'next/navigation'
|
||||
|
||||
export default function Header() {
|
||||
const pathname = usePathname()
|
||||
const isHome = pathname === '/';
|
||||
|
||||
const [isSticky, setIsSticky] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const scrollTop = isHome ? 800 : 400;
|
||||
const onScroll = () => {
|
||||
setIsSticky(window.scrollY > scrollTop);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', onScroll);
|
||||
return () => window.removeEventListener('scroll', onScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`global-header-container py-5 ${isSticky ? 'is-fixed' : ''} ${isHome && !isSticky ? 'header-homepage' : ''}`}>
|
||||
<div className="container flex items-center justify-between gap-5 relative">
|
||||
<div className="header-left-group w-[205px]">
|
||||
<Logo />
|
||||
</div>
|
||||
|
||||
<div className="header-middle-group w-[583px] flex items-center justify-between gap-2">
|
||||
<Menu />
|
||||
|
||||
<Search />
|
||||
</div>
|
||||
|
||||
<div className="header-right-group relative flex items-center justify-between gap-4 w-[420px] text-white leading-[18px] font-500">
|
||||
<a href="#fancybox-headphone" className="flex items-center gap-2" data-fancybox>
|
||||
<i className="icons icon-headphone"></i>
|
||||
<span className="text"> Hotline<br/> Mua Hàng </span>
|
||||
</a>
|
||||
|
||||
<a href="/he-thong-cua-hang" className="flex items-center gap-2">
|
||||
<i className="icons icon-showroom"></i>
|
||||
<span className="text"> Hệ thống<br/> Showroom </span>
|
||||
</a>
|
||||
|
||||
<Cart />
|
||||
|
||||
<Account />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow-[0px_4px_20px_0px_#004AA11A] text-16 font-500 mb-5">
|
||||
<div className="container flex items-center justify-between leading-[20px] py-[17px]">
|
||||
<a href="/buildpc" className="flex items-center gap-2 hover:text-[#0678DB]">
|
||||
<i className="icons icon-buildpc"></i>
|
||||
<span> Xây Dựng Cấu Hình </span>
|
||||
</a>
|
||||
|
||||
<a href="/designer-tool" className="flex items-center gap-2 hover:text-[#0678DB]">
|
||||
<i className="icons icon-tool"></i>
|
||||
<span> PC Đồ Họa Tool </span>
|
||||
</a>
|
||||
|
||||
<a href="/tin-khuyen-mai" className="flex items-center gap-2 hover:text-[#0678DB]">
|
||||
<i className="icons icon-promotion"></i>
|
||||
<span> Chương Trình Khuyến Mãi </span>
|
||||
</a>
|
||||
|
||||
<a href="/tin-tuc" className="flex items-center gap-2 hover:text-[#0678DB]">
|
||||
<i className="icons icon-news"></i>
|
||||
<span> Tin Tức Công Nghệ </span>
|
||||
</a>
|
||||
|
||||
<a href="/chinh-sach-bao-hanh" className="flex items-center gap-2 hover:text-[#0678DB]">
|
||||
<i className="icons icon-warranty"></i>
|
||||
<span> Bảo Hành Tận Nhà </span>
|
||||
</a>
|
||||
|
||||
<a href="#fancybox-feedback" data-fancybox="" className="flex items-center gap-2 hover:text-[#0678DB]">
|
||||
<i className="icons icon-feedback"></i>
|
||||
<span> Feedback </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
1243
src/components/product/Category/index.tsx
Normal file
1243
src/components/product/Category/index.tsx
Normal file
File diff suppressed because it is too large
Load Diff
2321
src/components/product/ProductDetail/index.tsx
Normal file
2321
src/components/product/ProductDetail/index.tsx
Normal file
File diff suppressed because it is too large
Load Diff
0
src/data/articles.ts
Normal file
0
src/data/articles.ts
Normal file
2486
src/data/categories.ts
Normal file
2486
src/data/categories.ts
Normal file
File diff suppressed because it is too large
Load Diff
2189
src/data/product-list.ts
Normal file
2189
src/data/product-list.ts
Normal file
File diff suppressed because it is too large
Load Diff
0
src/lib/helpers.ts
Normal file
0
src/lib/helpers.ts
Normal file
0
src/lib/resolveSlug.ts
Normal file
0
src/lib/resolveSlug.ts
Normal file
77
src/lib/slugMap.ts
Normal file
77
src/lib/slugMap.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
// src/lib/slugMap.ts
|
||||
import { categories } from "@/data/categories";
|
||||
|
||||
export type PageType =
|
||||
| "article_home"
|
||||
| "article_category"
|
||||
| "article_detail"
|
||||
| "product_category"
|
||||
| "product_detail";
|
||||
|
||||
export type SlugResult =
|
||||
| { type: "article_home" }
|
||||
| { type: "article_category"; slug: string }
|
||||
| { type: "article_detail"; slug: string }
|
||||
| { type: "product_category"; slug: string }
|
||||
| { type: "product_detail"; slug: string };
|
||||
|
||||
export function findBySlug(rawSlug: string): SlugResult {
|
||||
const slug = normalizeSlug(rawSlug);
|
||||
const url = "/" + slug;
|
||||
|
||||
/* 1. ARTICLE HOME */
|
||||
if (url === "/tin-tuc") {
|
||||
return { type: "article_home" };
|
||||
}
|
||||
|
||||
/* 2. ARTICLE CATEGORY */
|
||||
const articleCats = categories.article.all_category.article;
|
||||
for (const parent of articleCats) {
|
||||
if (parent.url === url) {
|
||||
return { type: "article_category", slug };
|
||||
}
|
||||
|
||||
for (const child of parent.children ?? []) {
|
||||
if (child.url === url) {
|
||||
return { type: "article_category", slug };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 3. PRODUCT CATEGORY */
|
||||
const productCats = categories.product.all_category;
|
||||
for (const cat of productCats) {
|
||||
if (cat.url === url) {
|
||||
return { type: "product_category", slug };
|
||||
}
|
||||
|
||||
for (const child of cat.children ?? []) {
|
||||
if (child.url === url) {
|
||||
return { type: "product_category", slug };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 4. PRODUCT DETAIL */
|
||||
if (isProductDetailSlug(slug)) {
|
||||
return { type: "product_detail", slug };
|
||||
}
|
||||
|
||||
/* 5. ARTICLE DETAIL (fallback) */
|
||||
return { type: "article_detail", slug };
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
* HELPERS
|
||||
* =============================== */
|
||||
function normalizeSlug(slug: string) {
|
||||
return slug.replace(/^\/+/, "").trim();
|
||||
}
|
||||
|
||||
function isProductDetailSlug(slug: string) {
|
||||
return (
|
||||
slug.startsWith("hhpc-") ||
|
||||
slug.startsWith("pc-") ||
|
||||
slug.startsWith("man-hinh-")
|
||||
);
|
||||
}
|
||||
10
src/styles/globals.css
Normal file
10
src/styles/globals.css
Normal file
@@ -0,0 +1,10 @@
|
||||
@import url('https://cdn.boxicons.com/fonts/basic/boxicons.min.css');
|
||||
@import url('https://fonts.cdnfonts.com/css/sf-pro-display');
|
||||
@import "tailwindcss";
|
||||
@import 'swiper/css';
|
||||
@import 'swiper/css/navigation';
|
||||
@import 'swiper/css/pagination';
|
||||
|
||||
@import "../../public/styles/library.css";
|
||||
@import "../../public/styles/tailwind.css";
|
||||
@import './pc_style.css';
|
||||
531
src/styles/pc_style.css
Normal file
531
src/styles/pc_style.css
Normal file
@@ -0,0 +1,531 @@
|
||||
body{min-width:1248px;background:#E8ECF6}
|
||||
.color-main,.global-breadcrumb a:hover{color:#0676DA}
|
||||
.red{color:#FA354A}
|
||||
.blue,.article-video-holder .video-item .bx,.video-item:hover,.filter-list a:hover{color:#0676DA}
|
||||
.bg-main{background-color:#0676DA}
|
||||
.bg-blue{background-color:#0676DA}
|
||||
.bg-linear{background:linear-gradient(173.39deg,#81D2FF 7.77%,#4593FF 94.81%)}
|
||||
.bg-btn{background:linear-gradient(165.29deg,#259AFF 8.53%,#114CDD 93.19%)}
|
||||
.text-linear,.cart-item .item-name a:hover,.home-categories-container .item:hover,.art-item .art-title:hover,.p-item .p-name:hover,.deal-item .deal-name:hover{background:linear-gradient(165.29deg,#259AFF 8.53%,#114CDD 93.19%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
||||
.border-linear{-o-border-image:linear-gradient(165.29deg,#259AFF 8.53%,#114CDD 93.19%);border-image:linear-gradient(165.29deg,#259AFF 8.53%,#114CDD 93.19%);border-image-slice:1}
|
||||
.line-clamp-2,.p-item .p-name,.deal-item .deal-offer{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
|
||||
.line-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
|
||||
.line-clamp-4{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
|
||||
.line-clamp-5{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
|
||||
.scroll-bar::-webkit-scrollbar{height:10px}
|
||||
.scroll-bar::-webkit-scrollbar-track{background:#f5f5f5}
|
||||
.scroll-bar::-webkit-scrollbar-thumb{background:#606060;border-radius:10px}
|
||||
.scroll-bar::-webkit-scrollbar-thumb:hover{background:#aaa}
|
||||
.no-scroll::-webkit-scrollbar,.about-tab-container::-webkit-scrollbar{height:0}
|
||||
.fit-img{position:absolute;inset:0;max-width:100%;max-height:100%;margin:auto}
|
||||
.icons,.fancybox-content-container .hotline-list p::before,.global-breadcrumb li:first-child::before{background:url(/images/sprite.png) no-repeat;background-size:200px 250px;width:20px;height:20px}
|
||||
.swiper{position:relative}
|
||||
.global-breadcrumb{color:#4B4954;font-size:16px;line-height:30px;font-weight:500;margin:0 0 24px}
|
||||
.global-breadcrumb ol,.global-breadcrumb ul{display:flex;flex-wrap:wrap}
|
||||
.global-breadcrumb li{display:flex;align-items:center;margin:0 2px}
|
||||
.global-breadcrumb li:first-child{border-radius:30px;border:1px solid #D2DFF9;background:#F2F6FF;padding:0 12px 0 34px;color:#0678DB;position:relative}
|
||||
.global-breadcrumb li:first-child::before{content:"";background-position:-77px -155px;height:30px;position:absolute;left:11px;margin:0}
|
||||
.global-breadcrumb li:last-child::after{content:none}
|
||||
.global-breadcrumb li::before{content:"\f2a1";font-family:boxicons!important;font-size:20px;color:#A9A9A9;margin-right:4px}
|
||||
.container{max-width:1248px;margin:auto}
|
||||
.icon-buildpc{background-position:0 -45px}
|
||||
.icon-tool{background-position:-27px -45px}
|
||||
.icon-promotion{background-position:-60px -46px}
|
||||
.icon-news{background-position:-95px -45px}
|
||||
.icon-warranty{background-position:-130px -45px}
|
||||
.icon-feedback{background-position:-165px -45px}
|
||||
.icon-search{background-position:-25px .5px}
|
||||
.icon-menu{background-position:-3px -8px}
|
||||
.icon-headphone{background-position:-64px -5px}
|
||||
.icon-showroom{background-position:-101px -5px}
|
||||
.icon-user{background-position:-135px -8px}
|
||||
.icon-cart{background:url(/images/icon-cart.png) no-repeat;background-size:contain;width:24px;height:24px}
|
||||
.icon-plane{width:24px;height:24px;background-position:-148px -118px}
|
||||
.icon-location{background-position:-62px -82px}
|
||||
.icon-phone{background-position:-4px -82px}
|
||||
.icon-time{background-position:-32px -81px}
|
||||
.icon-puzzle{background-position:-144px -153.5px}
|
||||
.icon-discount{background-position:-139.5px -191.5px}
|
||||
.icon-shield{background-position:-108px -192px}
|
||||
.icon-linkedin{background-position:-5px -119px}
|
||||
.icon-facebook{background-position:-41px -119px}
|
||||
.icon-zalo{background-position:-78px -119px}
|
||||
.icon-gmail{background-position:-114px -119px}
|
||||
.icon-wallet{background-position:-6px -222px}
|
||||
.icon-truck{background-position:-77px -223px}
|
||||
.icon-truck-2{background-position:-110px -157px}
|
||||
.icon-world{background-position:-41px -222px}
|
||||
.icon-medal{background-position:-114px -223px}
|
||||
.icon-screen{background-position:-4px -157px}
|
||||
.icon-gift{background-position:-40px -159px}
|
||||
.icon-card{background-position:-5px -193px}
|
||||
.icon-flame{background-position:-40px -194px}
|
||||
.icon-goTop{position:fixed;bottom:100px;right:10px;width:48px;height:48px;line-height:46px;border-radius:50%;border:1px solid #E0E0E0;color:#fff;background:#3947b9;font-size:28px;z-index:8;}
|
||||
.icon-finger{background-position:-155px -222px}
|
||||
.inherit,.art-item .art-title *,.p-item .p-name *,.deal-item .deal-name *{font-weight:inherit!important;font-size:inherit!important;line-height:inherit!important;margin:0}
|
||||
.custom-dots .swiper-pagination-bullet{width:20px;height:6px;border:2px solid rgba(255,255,255,0.7);border-radius:8px 0 8px 0;background:transparent;opacity:1;margin:0 3px!important;transition:.15s all}
|
||||
.custom-dots .swiper-pagination-bullet:hover,.custom-dots .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#fff;border-color:#fff}
|
||||
.deal-item{position:relative;overflow:hidden;background:#fff;font-size:14px;line-height:18px}
|
||||
.deal-item .deal-img{display:block;position:relative;padding-bottom:100%;margin:0 0 12px;overflow:hidden}
|
||||
.deal-item img{display:block;width:auto;height:auto}
|
||||
.deal-item .deal-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0 0 6px;min-height:36px;font-weight:500;text-transform: uppercase}
|
||||
.deal-item .deal-price-holder{margin:6px 0 15px;display:flex;align-items:center;justify-content:space-between;color:#A0A5AC}
|
||||
.deal-item .deal-price{line-height:28px;font-weight:600;font-size:22px;margin:0 0 2px;color:#333}
|
||||
.deal-item del{display:inline-block;margin:0 6px 0 0}
|
||||
.deal-item .deal-discount{color:#fff;text-align:center;background:#FA354A;border-radius:30px;font-weight:500;font-size:13px;padding:0 6px;display:inline-block;vertical-align:bottom}
|
||||
.deal-item .deal-btn{background:linear-gradient(165.29deg,#259AFF 8.53%,#114CDD 93.19%);color:#fff;width:38px;height:38px;border-radius:50%;font-size:20px}
|
||||
.deal-item .deal-offer{font-weight:500}
|
||||
.deal-item .deal-offer * {font-family: inherit !important;line-height: inherit !important;margin: 0 !important;font-size: inherit !important;display: inline}
|
||||
.deal-item .deal-count{margin:15px 0 11px 8px;background:#EBEBEB;border-radius:30px;line-height:22px;font-size:13px;font-weight:500;text-align:center;min-height:22px;position:relative}
|
||||
.deal-item .deal-count::before{content:"";width:22px;height:26px;position:absolute;left:-6px;top:-3px;z-index:1;background:url(/images/deal-icon-bolt.png) no-repeat;background-size:contain}
|
||||
.deal-item .deal-count span{position:relative;z-index:1}
|
||||
.deal-item .deal-line{position:absolute;inset:0;background:#FFE078;border-radius:inherit;max-width:100%}
|
||||
.p-item{background:#fff;overflow:hidden;position:relative;font-size: 14px}
|
||||
.p-item img{position:absolute;inset:0;width:auto;height:auto;margin:auto}
|
||||
.p-item .p-img{position:relative;padding-bottom:100%;margin:0 0 12px;overflow:hidden;display:block}
|
||||
.p-item .p-price-group{min-height:48px;margin:0 0 4px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px;line-height:18px}
|
||||
.p-item del{margin:0 4px 0 0;color:#A0A5AC}
|
||||
.p-item .p-discount{color:#fff;line-height:18px;border-radius:30px;background:#FA354A;font-weight:500;font-size:11px;text-align:center;padding:0 6px}
|
||||
.p-item .p-price{width:100%;margin:0;color:#FF4E2A;font-size:22px;font-weight:700;line-height:28px}
|
||||
.p-item .p-name{min-height:36px;line-height:18px;font-weight:500;margin:4px 0 8px;text-transform:uppercase}
|
||||
.p-item .p-btn-group{min-height:46px}
|
||||
.tooltip-content .icons,.tooltip-content .fancybox-content-container .hotline-list p::before,.fancybox-content-container .hotline-list .tooltip-content p::before,.tooltip-content .global-breadcrumb li:first-child::before,.global-breadcrumb .tooltip-content li:first-child::before{margin:0 6px 0 0;width:22px;height:22px}
|
||||
.tooltip-content .item{margin:0 0 8px}
|
||||
.tooltip-content .item:last-child{margin:0}
|
||||
.tooltip-content .item *{margin:0;padding:0;list-style:none;line-height:inherit!important;font-family:inherit!important;font-size:inherit!important}
|
||||
.tooltip-content .tooltip-spec{line-height:18px}
|
||||
.tooltip-content .tooltip-spec .item{position:relative;padding-left:14px}
|
||||
.tooltip-content .tooltip-spec .item::before{content:"";position:absolute;top:4px;left:0;border-radius:50%;background:linear-gradient(173.39deg,#81D2FF 7.77%,#4593FF 94.81%);width:8px;height:8px}
|
||||
.tooltip-content .tooltip-spec .item::after{content:"";background:#fff;width:3.5px;height:3.5px;border-radius:50%;position:absolute;left:2.5px;top:6px}
|
||||
.art-item{position:relative;background:#fff;overflow:hidden;font-size:14px;line-height:18px;padding-bottom:12px}
|
||||
.art-item .art-img{position:relative;margin:0 0 12px;display:block;padding-bottom:56%;border-radius:8px;overflow:hidden}
|
||||
.art-item img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:100%;height:100%}
|
||||
.art-item .art-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:16px;font-weight:600;line-height:21px;min-height:42px;margin:0 0 4px}
|
||||
.art-item .art-summary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0 0 8px;color:#4B4954}
|
||||
.art-item .art-time{line-height:17px;display:flex;align-items:center;gap:6px;color:#505050;font-size:13px;font-weight:500;text-transform:capitalize}
|
||||
.faq-item{background:#fff;border-radius:12px;overflow:hidden;padding:24px 84px 24px 20px;position:relative;margin:0 0 16px}
|
||||
.faq-item.active .faq-answer{display:block}
|
||||
.faq-item.active button{background:#0678DB;border-color:transparent;color:#fff}
|
||||
.faq-item.active button::before{content:"\f525"}
|
||||
.faq-item .faq-answer{display:none}
|
||||
.static-container .bg-content{overflow:hidden}
|
||||
.static-container .bg-content::after{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#FFF 100%)}
|
||||
.static-container .static-btn{display:flex;justify-content:center;margin-top:16px;position:relative;z-index:2}
|
||||
.static-container .static-btn button{border:1px solid #0678DB;color:#0678DB;background:#fff;text-transform:uppercase;border-radius:30px;min-width:150px;height:38px;font-weight:500;font-size:16px;transition:.1s all;display:none}
|
||||
.static-container .static-btn button:hover{color:#fff;background:#0678DB}
|
||||
.static-container .static-btn i{font-size:20px;margin-left:-1px;vertical-align:sub}
|
||||
.global-header-container{background:linear-gradient(180.3deg,#259AFF -18.56%,#114CDD 100.92%);top:-50px;transition:.3s all}
|
||||
.global-header-container.is-fixed{position:fixed;left:0;right:0;top:0;z-index:99;padding:10px 0}
|
||||
.header-right-group .icons,.header-right-group .fancybox-content-container .hotline-list p::before,.fancybox-content-container .hotline-list .header-right-group p::before,.header-right-group .global-breadcrumb li:first-child::before,.global-breadcrumb .header-right-group li:first-child::before{width:24px;height:24px}
|
||||
.header-right-group .cart-count{width:14px;height:14px;line-height:14px;border-radius:50%;color:#fff;background:#FF4E2A;font-weight:500;font-size:10px;position:absolute;top:-5px;right:-5px;text-align:center;font-style:normal}
|
||||
.header-account .icons,.header-account .fancybox-content-container .hotline-list p::before,.fancybox-content-container .hotline-list .header-account p::before,.header-account .global-breadcrumb li:first-child::before,.global-breadcrumb .header-account li:first-child::before{width:20px;height:20px}
|
||||
.header-cart-hover{border-radius:10px;overflow:hidden;color:#222;padding:10px 0 0;transition:.2s all;position:absolute;top:calc(100% + 30px);right:0;z-index:9;box-shadow:0 3px 8px 1px rgba(0,0,0,0.2);background:#fff;opacity:0;visibility:hidden;width:400px;text-align:left}
|
||||
.header-cart-hover *{line-height:20px}
|
||||
.header-cart-hover .cart-item{padding:19px 12px;border-bottom:1px solid #e1e1e1;display:flex;flex-wrap:wrap;gap:0;align-items:unset}
|
||||
.header-cart-hover .cart-item:last-child{border:0}
|
||||
.header-cart-hover .cart-items-holder{max-height:330px;overflow:auto;margin:0 0 12px}
|
||||
.header-cart-hover .cart-item .cart-img{width:85px;margin-right:12px}
|
||||
.header-cart-hover .cart-item .cart-text{width:calc(100% - 97px);font-weight:lighter}
|
||||
.header-cart-hover .cart-item a{display:block;color:#222}
|
||||
.header-cart-hover .cart-item .cart-text a{margin-bottom:10px}
|
||||
.header-cart-hover .cart-price-hover{padding:12px 20px 15px 15px;box-shadow:0 -4px 10px 0 #e9e9e9}
|
||||
.header-cart-hover .cart-price-hover .btn-goCart{border-radius:5px;margin-top:10px;background:#0676DA;font-weight:700;line-height:42px}
|
||||
.header-cart-item:hover .header-cart-hover{transition:.2s all;top:101%;opacity:1;visibility:visible}
|
||||
.header-cart-hover .cart-price-hover p{margin:10px 0 15px!important}
|
||||
.fancybox-content-container .f-button.is-close-btn{top:15px!important;opacity:1!important;background:transparent}
|
||||
.fancybox-content-container svg{color:#Fff}
|
||||
.fancybox-content-container .hotline-list p{margin:0 0 16px;font-size:16px;line-height:23px;position:relative;padding:0 0 0 28px;display:flex;align-items:center}
|
||||
.fancybox-content-container .hotline-list p:last-child{margin:0}
|
||||
.fancybox-content-container .hotline-list p::before{content:"";position:absolute;left:0;background-position:-4px -83px}
|
||||
.fancybox-content-container .hotline-list a{font-size:18px;font-weight:500;color:#FF4E2A;margin:0 8px 0 0;min-width:114px}
|
||||
.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn{padding-top:4px}
|
||||
.global-menu-container:hover .global-sub-container{display:block}
|
||||
.global-menu-container .group-title{white-space:nowrap;position:relative}
|
||||
.global-menu-container .group-title::after{content:"";position:absolute;left:-10px;bottom:-10px;width:calc(100% + 10px);height:10px}
|
||||
.global-menu-container ul{list-style:none;margin:0;padding:0}
|
||||
.global-sub-container{width:300px;height:645px;background:#fff;z-index:99;position:absolute;border-radius:12px;top:100%;left:0;font-size:16px;font-weight:500;display:none;box-shadow:0 0 6px 0 rgba(0,0,0,0.3)}
|
||||
.global-sub-container ul{height:100%}
|
||||
.global-sub-container li:hover > .submenu{opacity:1;visibility:visible;z-index:4;left:100%;box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);}
|
||||
.global-sub-container li > a{display:flex;align-items:center;padding:0 8px 0 16px}
|
||||
.global-sub-container .submenu{position:absolute;top:0;left:calc(100% + 10px);width:940px;background:#fff;border-left:1px solid #DFE4EC;gap: 20px;transition:.2s all;z-index:-2;opacity:0;visibility:hidden;border-radius: 8px !important;display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));grid-auto-rows: max-content;}
|
||||
.global-sub-container .submenu:not(:has(.submenu)){border-radius:0 12px 12px 0}
|
||||
.global-sub-container .submenu:not(:has(.submenu)) li:first-child {border-top-right-radius: 12px;}
|
||||
.global-sub-container .submenu a{display:table;padding: 0;margin-bottom: 14px;font-weight: normal}
|
||||
.global-sub-container .submenu a:hover{color: #0676DA}
|
||||
.global-sub-container .submenu li{/*width: calc(100% / 4 - 15px);*/height:fit-content;padding: 16px}
|
||||
.global-sub-container .submenu .sub-list li {width: 100%;height: auto;padding: 0}
|
||||
.global-sub-container .submenu .cat-2{font-weight: 600}
|
||||
.global-sub-container .item{flex:1 1 0}
|
||||
.global-sub-container .item::after{content:"";position:absolute;top:0;bottom:0;width:10px;right:-10px}
|
||||
.global-sub-container .item:hover {background: #EAF1FF;}
|
||||
.global-sub-container .item:hover .cat-1{position:relative;overflow:hidden}
|
||||
.global-sub-container .item:hover .cat-1::before{content:"";width:3px;height:100%;position:absolute;left:0;background:#0678DB}
|
||||
.global-sub-container .item:first-child,.global-sub-container .item:first-child .cat-1{border-radius:12px 12px 0 0}
|
||||
.global-sub-container .item:last-child,.global-sub-container .item:last-child .cat-1{border-radius:0 0 12px 12px}
|
||||
.global-sub-container .item > .submenu{margin-left:8px;border:0;border-radius:12px 0 0 12px}
|
||||
.global-sub-container .item > .submenu > li:first-child{border-radius:12px 0 0 0}
|
||||
.global-sub-container .has-children{padding-right:30px}
|
||||
.global-sub-container .has-children::after{content:"\f298";font-family:boxicons!important;position:absolute;right:8px;color:#A0A5AC;font-size:26px;width:20px}
|
||||
.global-sub-container .cat-1{height:100%;font-weight:400;display:flex;align-items:center}
|
||||
.global-sub-container .cat-thumb{width:22px;height:22px;margin:0 8px 0 0;background-repeat:no-repeat;background-size:contain;background-position:center}
|
||||
.global-sub-container .cat-title{width:calc(100% - 30px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.global-sub-container .sub-menu-logo .flex li {padding: 0;width: auto;}
|
||||
.global-sub-container .sub-menu-logo .flex li a {margin: 0;}
|
||||
.global-sub-container .sub-menu-logo {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));grid-auto-rows: max-content}
|
||||
.global-sub-container .sub-menu-logo li {width: 100%}
|
||||
.header-homepage .global-menu-container{width:0;overflow:hidden}
|
||||
.header-homepage .global-sub-container{top:calc(100% + 98px);display:block;box-shadow:unset}
|
||||
.header-homepage .header-search-group{width:100%}
|
||||
.footer-newsletter-container{background:linear-gradient(90deg,#055EDD 0%,#1F3AB2 100%);position:relative;overflow:hidden}
|
||||
.footer-newsletter-container::before,.footer-newsletter-container::after{content:"";background:url(/images/footer-newsletter-bg.png) no-repeat;background-size:contain;width:500px;position:absolute;top:0;bottom:0;transform:scale(1.2)}
|
||||
.footer-newsletter-container::before{left:0;transform:rotate(180deg) scale(1.2)}
|
||||
.footer-newsletter-container::after{right:0}
|
||||
.footer-newsletter-container .icon-newsletter{width:89px;height:89px;background-size:contain;background-repeat:no-repeat}
|
||||
.footer-newsletter-container p{width:307px;line-height:25px}
|
||||
.showroom-item{border-radius:0 0 40px;transition:.3s all;overflow:hidden;padding:8px}
|
||||
.showroom-item:hover{border-radius:0}
|
||||
.showroom-item:hover .item-triangle{width:0;height:0;border:0}
|
||||
.showroom-item:hover .item-triangle::before{left:-50px}
|
||||
.showroom-item .item-triangle{background:linear-gradient(135deg,#5198F6 0 50%,transparent 50% 100%);z-index:2;position:absolute;top:0;left:0;border-top:4px solid #dfe7f7;border-left:4px solid #dfe7f7;width:38px;height:38px;pointer-events:none;transition:.2s all}
|
||||
.showroom-item .item-triangle::before{transition:.2s all;content:"";background:#fff;height:8px;width:70px;position:absolute;top:12px;left:-15px;transform:rotate(-45deg)}
|
||||
.showroom-item img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
|
||||
.showroom-item b{font-weight:600}
|
||||
.showroom-item .image{position:relative;overflow:hidden;padding-bottom:75%}
|
||||
.showroom-item .text{padding:18px 8px 0}
|
||||
.showroom-item .item-info p{width:calc(100% - 26px)}
|
||||
.showroom-item .icons,.showroom-item .global-breadcrumb li:first-child::before,.global-breadcrumb .showroom-item li:first-child::before,.showroom-item .fancybox-content-container .hotline-list p::before,.fancybox-content-container .hotline-list .showroom-item p::before{width:20px;height:22px;margin-right:6px}
|
||||
.footer-item a{display:table}
|
||||
.footer-contact-info .icons,.footer-contact-info .global-breadcrumb li:first-child::before,.global-breadcrumb .footer-contact-info li:first-child::before,.footer-contact-info .fancybox-content-container .hotline-list p::before,.fancybox-content-container .hotline-list .footer-contact-info p::before{background-color:#C8160E}
|
||||
.global-footer-container{border-top-left-radius:64px;position:relative;overflow:hidden}
|
||||
.global-footer-container::before,.global-footer-container::after{content:"";background:url(/images/bg-footer-info.png) no-repeat;background-size:contain;width:800px;height:400px;position:absolute;opacity:.2;z-index:1}
|
||||
.global-footer-container::before{top:0;right:0}
|
||||
.global-footer-container::after{bottom:0;left:50%;transform:translateX(-50%) rotate(180deg)}
|
||||
.bg-oval{position:absolute;top:-55px;left:-67px;width:1584px;height:385.29px;background:linear-gradient(65.08deg,rgba(0,128,255,0.22) 14.11%,#0080FF 34.09%,#0C1C9A 68.43%,#0075FF 82.52%);opacity:1;filter:blur(190px);border-radius:50%;transform:rotate(-10.74deg)}
|
||||
.global-fixed-button-container{position:fixed;bottom:85px;right:10px;z-index:10000;animation-duration:1s;animation-duration:1s;animation-fill-mode:both;transform:translateX(2000px) scale(0.7);display:flex;flex-direction:column;gap:24px;top:50%}
|
||||
.global-fixed-button-container a{width:48px;height:48px;min-height:48px;font-size:30px;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:30px;color:#fff;text-align:center;display:flex;align-items:center;justify-content:center;background-color:#0677DB;box-shadow:0 0 0 4px rgba(255,255,255,0.2)}
|
||||
.home-page{background:linear-gradient(#BCD5FA,#E8ECF6);background-repeat:no-repeat}
|
||||
.home-banner-container a{border-radius:8px;overflow:hidden;display:block;position:relative}
|
||||
.home-banner-container a:hover::before{width:120%;background-color:rgba(255,255,255,0);z-index:2;transition:.45s ease-out}
|
||||
.home-banner-container a::before{content:"";position:absolute;top:0;left:-15%;bottom:0;width:0;height:100%;background-color:rgba(255,255,255,0.5);transition:none;transform:skewX(-25deg)}
|
||||
.deal-container{position:relative;/*background:linear-gradient(3.56deg,#41A7FF 16.18%,#114CDD 115.33%)*/}
|
||||
/*.deal-container::before{content:"";background:url(/images/deal-bg.png) no-repeat;z-index:1;position:absolute;top:0;right:0;height:50%;width:50%;opacity:.8;background-size:contain;background-position:bottom}*/
|
||||
.deal-container .deal-time-holder{display:flex;align-items:center;color:#333;font-weight:700;font-size:18px;gap:24px;text-align:center}
|
||||
.deal-container .deal-time-holder p{margin:0;position:relative;background:#fff;width:40px;line-height:40px;border-radius:6px}
|
||||
.deal-container .deal-time-holder p:last-child::after{content:none}
|
||||
.deal-container .deal-time-holder p::after{content:":";position:absolute;right:-13px;color:#fff}
|
||||
.deal-container .icon-bolt{width:35px;height:49px;background-position:center;background-repeat:no-repeat;background-size:contain;animation:beat .5s infinite alternate;animation-timing-function:cubic-bezier(0.19,0.96,0.65,1);transform-origin:center}
|
||||
.home-deal-container .deal-container{margin-bottom:108px}
|
||||
.home-deal-container .deal-container::after{content:"";width:100%;height:22px;background:url(/images/global-deal-line.png) no-repeat;background-size:cover;background-position:center;position:absolute;bottom:-70px;left:0;right:0}
|
||||
.home-deal-container .deal-container:last-child{margin-bottom:0}
|
||||
.home-deal-container .deal-container:last-child::after{content:none}
|
||||
.home-categories-container .item{text-align:center;font-weight:500;line-height:18px;padding:6px;text-transform:uppercase;transition:.3s all;border-radius:8px}
|
||||
.home-categories-container .item:hover{box-shadow:0 2px 6px 0 rgba(0,0,0,0.15)}
|
||||
.home-categories-container .item:nth-child(n+21) {display: none}
|
||||
.home-categories-container.active .item:nth-child(n+21) {display: block}
|
||||
.home-categories-container button {border: 1px solid #0678DB;color: #0678DB;background: #fff;text-transform: uppercase;border-radius: 30px;min-width: 150px;height: 38px;font-weight: 500;font-size: 16px;transition: 0.1s all;}
|
||||
.home-categories-container button:hover{background: #0678DB;color: #fff}
|
||||
.home-categories-container button::before {content: 'Xem thêm ';}
|
||||
.home-categories-container button::after {content: "\f292";font-family: boxicons !important;font-size: 20px;margin-left: -1px;vertical-align: sub;}
|
||||
.home-categories-container.active button::before {content: 'Thu gọn ';}
|
||||
.home-categories-container.active button::after {content: "\f29b";}
|
||||
.home-categories-container .image{display:block;padding-bottom:100%;position:relative;border-radius:8px;background-color:#EAEEF4;background-position:center;background-repeat:no-repeat;background-size:52px;margin-bottom:12px}
|
||||
.home-product-container .group-title p{display:flex;align-items:center;font-weight:500;font-size:16px;position:relative;gap:6px;padding-left:16px;margin-left:16px;line-height:24px}
|
||||
.home-product-container .group-title p::before{content:"";width:1px;height:24px;background:#DFDFDF;position:absolute;left:0}
|
||||
.home-product-container .group-title .icons,.home-product-container .group-title .global-breadcrumb li:first-child::before,.global-breadcrumb .home-product-container .group-title li:first-child::before,.home-product-container .group-title .fancybox-content-container .hotline-list p::before,.fancybox-content-container .hotline-list .home-product-container .group-title p::before{width:24px;height:24px}
|
||||
.home-product-banner img {border-radius: 24px}
|
||||
.promotion-news-group .art-summary,.promotion-news-group .art-time{display:none}
|
||||
.home-article-container .art-item:nth-child(n+5){display:none}
|
||||
.filter-list a{display:flex;justify-content:space-between;margin:0 0 12px;position:relative;padding:0 0 0 26px;gap:12px}
|
||||
.filter-list a:last-child{margin:0}
|
||||
.filter-list a::before{content:"";border-radius:4px;border:1.5px solid #DFE4EC;background:#fff;position:absolute;left:0;top:1px;width:18px;height:18px}
|
||||
.filter-list .current::before{background:#0678DB;border-color:#0678DB}
|
||||
.filter-list .current::after{content:"\f280";font-family:boxicons!important;color:#fff;position:absolute;top:-1px;left:1px;font-size:16px}
|
||||
.filter-list span:first-child{width:calc(100% - 62px)}
|
||||
.filter-list span:last-child{white-space:nowrap;width:50px;text-align:right}
|
||||
.product-detail-page .deal-time-holder p{margin:0;background:#333;position:relative;border-radius:4px;padding:0 7px;min-width: 32px; text-align:center}
|
||||
.product-detail-page .deal-time-holder p:last-child::after{content:none}
|
||||
.product-detail-page .deal-time-holder p::after{content:":";color:#333;position:absolute;right:-12px;font-size:16px;font-weight:700}
|
||||
.pd-comment-btn button.current{border-color:#0678DB;color:#0678DB}
|
||||
.pd-spec-group{overflow:hidden;border-radius:12px}
|
||||
.pd-spec-group.pd-spec-group{overflow: auto !important;}
|
||||
.pd-spec-group thead{background:#EAEDF4}
|
||||
.pd-spec-group tr:nth-child(even){background:#F2F6FF}
|
||||
.pd-spec-group td{padding:12px 8px;font-weight:500;}
|
||||
.pd-spec-group td:nth-child(1) {min-width: 50px;}
|
||||
.pd-spec-group td *{font-size:inherit!important;margin:0!important;font-family:inherit!important}
|
||||
.pd-spec-group a{color:#0678DB!important}
|
||||
.pd-article-holder .art-item{display:flex;align-items:center;gap:12px}
|
||||
.pd-article-holder .art-item .art-time{display:none}
|
||||
.pd-article-holder .art-item .art-img{width:38%;margin:0;padding-bottom:25.5%}
|
||||
.pd-article-holder .art-item .art-text{width:calc(62% - 12px)}
|
||||
.pd-article-holder .art-item .art-title{font-size:14px;line-height:18px;min-height:unset}
|
||||
.pd-tab-group a{position:relative}
|
||||
.pd-tab-group a::after{content:"";height:3px;background:#0678DB;position:absolute;left:0;right:0;bottom:-20px;transition:.3s all;width:0}
|
||||
.pd-tab-group a:hover,.pd-tab-group a.current{color:#0678DB}
|
||||
.pd-tab-group a:hover::after,.pd-tab-group a.current::after{width:100%}
|
||||
.item-circle{position:relative;padding-left:18px;margin:0 0 8px}
|
||||
.item-circle:last-child{margin:0}
|
||||
.item-circle::before{content:"";position:absolute;top:4px;left:4px;border-radius:50%;background:linear-gradient(173.39deg,#81D2FF 7.77%,#4593FF 94.81%);width:8px;height:8px}
|
||||
.item-circle::after{content:"";background:#fff;width:3.5px;height:3.5px;border-radius:50%;position:absolute;left:6.5px;top:6px}
|
||||
.item-circle * {margin: 0;}
|
||||
.pd-gallery-list a{border:2px solid transparent;overflow:hidden;display:block;pointer-events:auto!important}
|
||||
.pd-gallery-list img{filter:unset!important;display:block;margin:auto;max-width:100%;max-height:100%}
|
||||
.pd-gallery-list .mz-thumb-selected{border-color:#0678DB}
|
||||
.pd-offer-group .icon-discount{background-position:-76px -194px}
|
||||
.pd-offer-group .item{margin:0 0 8px}
|
||||
.pd-offer-group .item:last-child{margin:0}
|
||||
.pd-offer-group .item * {margin: 0;line-height: inherit !important;font-family: inherit !important}
|
||||
.pd-offer-group .item-product {display: flex;flex-wrap: wrap;align-items: flex-start;gap: 12px;font-weight: 500;}
|
||||
.pd-offer-group .item-product:hover{color: #0676DA}
|
||||
.pd-offer-group .item-product .img {width: 60px}
|
||||
.pd-offer-group .item-product .text {width: calc(100% - 72px)}
|
||||
.pd-offer-group .item::after {width: 4px;height: 4px;left: 6px;}
|
||||
.pd-offer-group .item img {display: block;margin: auto;max-height: 50px;}
|
||||
.pd-box-group .pd-spec-group tr:nth-child(n+11) {display: none;}
|
||||
.pd-rating-conatiner.active .rating-btn::before{content:"Đóng lại !"}
|
||||
.pd-rating-conatiner.active .pd-rating-form{display:block}
|
||||
.pd-rating-conatiner .rating-btn::before{content:"Đánh giá sản phẩm";display:block}
|
||||
.rating-star{position:relative;float:right;display:block;width:17px;height:17px;background:url(/images/star_rating.png) 0 0;margin:0 3px;cursor:pointer}
|
||||
.rating-input{float:right;width:16px;height:16px;padding:0;margin:0 0 0 -16px;opacity:0}
|
||||
.rating-star:hover{background-position:0 0}
|
||||
.rating-star:hover,.rating-star:hover ~ .rating-star{background-position:0 0}
|
||||
.rating-input:checked ~ .rating-star,.rating-star:hover,.rating-star:hover ~ .rating-star{background-position:0 0}
|
||||
.rating-input:checked ~ .rating-star,.rating:hover .rating-star:hover,.rating:hover .rating-star:hover ~ .rating-star{background-position:0 0}
|
||||
.rating-comment:hover .rating-star,.rating-star{position:relative;float:right;display:block;background:url(/images/star_rating.png) 0 -28px}
|
||||
.rating-comment:hover .rating-star:hover,.rating-comment:hover .rating-star:hover ~ .rating-star{background-position:0 -56px!important}
|
||||
.star-tip::before{content:" ";right:100%;top:50%;border:solid transparent;height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(82,184,88,0);border-right-color:#2b8ae0;border-width:6px;margin-top:-6px}
|
||||
.cart-item{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
|
||||
.cart-item img{display:block;max-width:100%;margin:auto}
|
||||
.cart-item .item-img{width:88px;display:block}
|
||||
.cart-item .item-text{width:calc(100% - 100px);display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}
|
||||
.cart-item .item-offer{background:#fff;box-shadow:0 1px 4px 0 rgba(0,0,0,0.2);border-radius:12px;padding:16px 12px;font-size:16px;line-height:22px;position:absolute;top:100%;margin-top:10px;transition:.1s all;opacity:0;visibility:hidden;z-index:-8;min-width: 400px}
|
||||
.cart-item .item-offer::before{content:"";position:absolute;top:-15px;left:19px;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:15px solid rgba(0,0,0,0.04)}
|
||||
.cart-item .item-offer::after{content:"";position:absolute;top:-11px;left:21px;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:13px solid #FFF}
|
||||
.cart-item .item-offer .item{margin:0 0 8px}
|
||||
.cart-item .item-offer .item:last-child{margin:0}
|
||||
.cart-item .item-offer .item *{font-family:inherit!important;line-height:inherit!important;margin:0;font-size: inherit !important;}
|
||||
.cart-item .item-name{position:relative;width:308px;margin-right:24px}
|
||||
.cart-item .item-name a{display:table;line-height:20px;font-size:16px;font-weight:500}
|
||||
.cart-item .item-quantiy{width:96px;overflow:hidden;border-radius:40px;display:flex;text-align:center;background:#f5f5f5;margin-right:24px}
|
||||
.cart-item .item-quantiy *{height:38px}
|
||||
.cart-item .item-quantiy input{width:52px;background:transparent;text-align:center}
|
||||
.cart-item .item-quantiy button{width:22px;font-size:12px;text-align:right}
|
||||
.cart-item .item-quantiy button:last-child{text-align:left}
|
||||
.cart-item .item-price{width:117px;margin-right:24px}
|
||||
.article-page .art-item{background:transparent;padding:0}
|
||||
.article-page .art-item .art-img{padding-bottom:68%}
|
||||
.top-article-container .art-item{display:flex;flex-wrap:wrap;gap:12px}
|
||||
.top-article-container .art-item .art-img{margin:0;width:192px;padding-bottom:130px}
|
||||
.top-article-container .art-item .art-text{width:calc(100% - 204px)}
|
||||
.article-categories-group {z-index: 12}
|
||||
.article-categories-group a{text-align:center;flex:1;padding-bottom:20px;position:relative}
|
||||
.article-categories-group a::after{content:"";position:absolute;left:0;bottom:0;right:0;max-width:100%;height:3px;background:transparent;transition:.25s all;width:0}
|
||||
.article-categories-group a:hover,.article-categories-group a.active{color:#0678DB}
|
||||
.article-categories-group a:hover::after,.article-categories-group a.active::after{background:#0678DB;width:100%}
|
||||
.article-category-container{padding:64px 0}
|
||||
.article-category-container:nth-child(even){background:#E8ECF6}
|
||||
.article-category-container .art-summary{display:none}
|
||||
.article-category-container .first-item .art-img{margin:0 0 24px}
|
||||
.article-category-container .first-item .art-title{font-size:20px;line-height:25px;min-height:unset;margin:0 0 12px}
|
||||
.article-category-container .first-item .art-summary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;line-height:22px;font-size:16px;margin:12px 0}
|
||||
.article-category-container .first-item .art-time{font-size:14px;line-height:20px}
|
||||
.video-item{display:flex;flex-wrap:wrap;gap:12px}
|
||||
.video-item .video-img{display:block;width:160px;position:relative;padding-bottom:90px}
|
||||
.video-item .video-img img{display:block;position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
|
||||
.video-item .video-title{width:calc(100% - 172px);line-height:21px;font-size:16px;font-weight:600;margin-top:16px}
|
||||
.gradient-overlay{position:absolute;bottom:0;left:0;right:0;height:53px;background:linear-gradient(180deg,rgba(234,241,255,0) 0%,#EAF1FF 100%);pointer-events:none;z-index:10}
|
||||
.article-video-container iframe{width:100%;height:100%;display:block;border-radius:16px}
|
||||
.article-video-holder .video-item{display:block;font-size:16px;font-weight:500;line-height:22px}
|
||||
.article-video-holder .video-item *{display:block}
|
||||
.article-video-holder .video-item:hover .item-img::before{background:rgba(0,0,0,0.2)}
|
||||
.article-video-holder .video-item img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
|
||||
.article-video-holder .video-item .item-img{position:relative;overflow:hidden;border-radius:12px;margin-bottom:16px;padding-bottom:58%}
|
||||
.article-video-holder .video-item .item-img::before{content:"";position:absolute;inset:0;z-index:1;transition:.2s all}
|
||||
.article-video-holder .video-item .bx{font-size:60px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#fff;text-align:center}
|
||||
.tool-search-container::before{content:"";background:url(/images/bg-footer-info.png) no-repeat;background-size:cover;background-position:-684px 20px;position:absolute;bottom:0;right:0;width:400px;top:0;transform:rotate(183deg);opacity:.04}
|
||||
.tool-btn-list button,.tool-btn-list a{position:relative;overflow:hidden;border:1px solid transparent;border-radius:8px}
|
||||
.tool-btn-list button:hover,.tool-btn-list button.current,.tool-btn-list a:hover,.tool-btn-list a.current{background:#fff;color:#004BA4;border-color:#81D2FF}
|
||||
.tool-btn-list button:hover .icon,.tool-btn-list button.current .icon,.tool-btn-list a:hover .icon,.tool-btn-list a.current .icon{filter:invert(35%) sepia(44%) saturate(4377%) hue-rotate(192deg) brightness(91%) contrast(95%)}
|
||||
.software-list{margin-bottom:72px}
|
||||
.tool-product-holder .p-item{border-radius:12px;box-shadow:0 2px 10px 0 rgba(0,0,0,0.0784313725);padding:12px 12px 24px}
|
||||
.tool-product-holder .p-item .p-name{font-size:16px;line-height:21px;min-height:42px;font-weight:600}
|
||||
.tool-product-holder .p-item .p-price-group{align-items:center;gap:4px;margin:0 0 12px;min-height:unset}
|
||||
.tool-product-holder .p-item .p-price{width:auto;font-size:18px;line-height:28px;margin:0}
|
||||
.tool-product-holder .p-item .p-summary{line-height:18px}
|
||||
.global-popup-login .global-popup-content{width:800px;margin:auto;background:#fff;border-radius:16px;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:100;display:-webkit-box;display:-ms-flexbox;display:flex;color:#404d5f}
|
||||
.global-popup-login .item-left{width:299px;background-position:center;border-right:1px solid #e5eaf1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
|
||||
.global-popup-login .item-right{width:calc(100% - 300px);padding:21px 40px 25px;position:relative}
|
||||
.global-popup-login .close-popup{color:#404d5f;font-size:21px;margin-right:-20px}
|
||||
.global-popup-login .box-title{line-height:20px;margin:24px 0;font-size:16px}
|
||||
.global-popup-login .box-title a{color:#1988ec;text-decoration:underline;font-weight:600}
|
||||
.global-popup-login .box-title p{margin:0}
|
||||
.global-popup-login .box-title p:first-child{margin-bottom:4px;font-weight:700;font-size:28px;line-height:32px}
|
||||
.global-popup-login .input-box{position:relative;margin-bottom:16px}
|
||||
.global-popup-login .input-box input{width:100%;margin:0;padding:0 20px 0 5px;height:40px;border:0;border-bottom:1px solid #e1e9ec;font-size:16px}
|
||||
.global-popup-login .icon-eye{width:12px;height:12px;position:absolute;right: 13px;top: 13px;font-size: 18px;}
|
||||
.global-popup-login .icon-google{background-position:-8px -186px}
|
||||
.global-popup-login .icon-facebook{background-position:-64px -186px}
|
||||
.global-popup-login .btn-forgot-password{color:#697789;font-weight:600;font-size:14px;line-height:18px}
|
||||
.global-popup-login .popup-btn{width:100%;background:#1988ec;border-radius:8px;text-align:center;color:#fff;margin:16px 0 24px;line-height:40px;font-weight:600;font-size:16px;display:block}
|
||||
.global-popup-login .popup-icons-group{margin:24px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
|
||||
.global-popup-login .popup-icons-group .icons{width:40px;height:40px;margin:0 8px}
|
||||
.global-popup-login .popup-btn-direction{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
|
||||
.global-popup-login .btn-back{width:10px;height:10px;border:2px solid #404d5f;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-right:0;border-top:0}
|
||||
.global-popup-login .popup-registor-group .input-box{margin-bottom:32px}
|
||||
.global-popup-login .popup-registor-group .popup-btn{margin-top:40px}
|
||||
.pd-product-holder {display: none}
|
||||
.deal-page .deal-time-holder{display:flex;align-items:center;gap:10px}
|
||||
.deal-page .deal-time-holder p{margin:0;background:#000;color:#fff;font-weight:500;position:relative;border-radius:4px;min-width:24px;text-align:center;line-height:24px}
|
||||
.deal-page .deal-time-holder p::after{content:':';color:#000;position:absolute;right:-7px}
|
||||
.deal-page .deal-time-holder p:last-child::after{content:none}
|
||||
.deal-page .product-holder {grid-template-columns: repeat(5, minmax(0, 1fr));gap: 16px}
|
||||
.article-author-page{padding-bottom:40px}
|
||||
.article-author-page .container{max-width:1220px!important;min-width:1220px!important}
|
||||
.article-author-page .author-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:20px;margin-top:29px;margin-bottom:69px;padding:27px 40px 26px 80px;border-width:2px;border-style:solid;border-color:transparent;-o-border-image:-o-linear-gradient(0.62deg,#0038ff -3.69%,#27f2d5 96.93%);border-image:linear-gradient(89.38deg,#0038ff -3.69%,#27f2d5 96.93%);border-image-slice:2;-webkit-box-shadow:0 4px 14px rgba(0,0,0,.1);box-shadow:0 4px 14px rgba(0,0,0,.1)}
|
||||
.article-author-page .author-box:nth-child(2n){-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-o-border-image:-o-linear-gradient(0.62deg,#27f2d5 -3.69%,#0038ff 96.93%);border-image:linear-gradient(89.38deg,#27f2d5 -3.69%,#0038ff 96.93%);border-image-slice:2}
|
||||
.article-author-page .author-box:last-child{margin-bottom:0}
|
||||
.article-author-page .author-box img{display:-webkit-box;display:-ms-flexbox;display:flex}
|
||||
.article-author-page .author-avatar{width:190px;height:190px;margin:0 auto;border-radius:50%}
|
||||
.article-author-page .author-info{margin-top:-56px}
|
||||
.article-author-page .author-name{font-size:24px;line-height:32px;font-weight:600;text-align:center;color:#0676da;margin:16px 0 0}
|
||||
.article-author-page .author-lorem{font-size:16px;line-height:20px;font-weight:400;text-align:justify;color:#717171;max-width:700px;-webkit-box-flex:1;-ms-flex:1;flex:1}
|
||||
.article-author-page .author-socials{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px}
|
||||
.article-author-page .author-paging .paging{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:10px 0 0 0}
|
||||
.article-author-page .author-heading .a-routting{background:url(/images/hoanghapc-author-bg-2.png) no-repeat;background-size:cover;background-position:left;height:304px}
|
||||
.article-author-page .author-heading .a-routting-text{font-size:16px;line-height:20px;padding-top:24px;color:#fff}
|
||||
.article-author-page .author-heading .a-routting-text a{color:#fff}
|
||||
.article-author-page .author-heading .a-routting-text a:hover,.article-author-page .author-heading .a-routting-text a:last-child{color:rgb(255,255,255,.5)}
|
||||
.article-author-page .author-heading .a-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;margin-top:-160px;margin-bottom:53px}
|
||||
.article-author-page .author-heading .a-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}
|
||||
.article-author-page .author-heading .a-avatar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:250px;height:250px;border-radius:50%;margin-right:14px}
|
||||
.article-author-page .author-heading .a-name{display:inline-block;font-size:40px;line-height:30px;font-weight:600;color:#0676da;margin-bottom:0}
|
||||
.article-author-page .author-heading .a-socials{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px}
|
||||
.article-author-page .author-heading .a-socials img{display:-webkit-box;display:-ms-flexbox;display:flex}
|
||||
.article-author-page .author-heading .a-lorem{font-size:16px;line-height:20px;text-align:justify;color:#717171}
|
||||
.article-author-page .author-heading .a-line{height:2px;margin:80px 0;background:-o-linear-gradient(.62deg,#27f2d5 -3.69%,#0038ff 96.93%);background:-o-linear-gradient(.62deg,#27f2d5 -3.69%,#0038ff 96.93%);background:-o-linear-gradient(.62deg,#27f2d5 -3.69%,#0038ff 96.93%);background:linear-gradient(89.38deg,#27f2d5 -3.69%,#0038ff 96.93%)}
|
||||
.article-author-page .author-title{font-size:32px;line-height:38px;font-weight:600;color:#1988ec;margin-bottom:24px}
|
||||
.account-page{padding:30px 0;background: #fff;}
|
||||
.account-page .account-col-left{width:220px;margin-right:20px}
|
||||
.account-page .account-col-right{width:calc(100% - 240px);background:#fff;-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.2);box-shadow:0 0 5px 0 rgba(0,0,0,.2);border-radius:10px;padding:20px}
|
||||
.account-page .account-col-left a{display:block;padding:0 20px;border-radius:6px;margin-top:7px;line-height:40px;background:#ebebeb;color:#666}
|
||||
.account-page .account-col-left b{display:block;font-size:16px}
|
||||
.account-page .container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}
|
||||
.account-page .account-col-left a.current,.account-page .account-col-left a:hover{background:#005bad;color:#fff}
|
||||
.account-page .account-col-left .box-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:25px}
|
||||
.account-page .account-col-left p{margin:0;line-height:20px;width:calc(100% - 58px)}
|
||||
.account-page .account-col-left b{font-weight:600;line-height:1.2;text-transform:capitalize;display:block;font-size:20px}
|
||||
.account-page .account-col-left .box-info i{width:48px;margin-right:10px;line-height:48px;font-size:48px;color:#005bad}
|
||||
.account-page .box-direction a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
|
||||
.account-page .box-direction i{width:36px}
|
||||
.account-page .box-direction span{width:calc(100% - 36px)}
|
||||
.account-page .account-col-right td{padding:5px 10px;border: 1px solid #ccc}
|
||||
.account-page .account-col-right h2,.account-page .account-col-right h3{margin:0 0 15px 0;padding-bottom:8px;font-size:20px;color:#000;border-bottom:1px solid #efefef;font-weight:700}
|
||||
.account-page .btn-danger {color: #fff;background: linear-gradient(165.29deg,#259AFF 8.53%,#114CDD 93.19%);height: 40px;line-height: 40px;padding: 0 20px;font-weight: 500;border-radius: 5px;cursor: pointer;}
|
||||
.account-page select {border: 1px solid #ccc;height: 36px;border-radius: 4px;padding: 0 10px;}
|
||||
.account-page .form-control {border: 1px solid #ccc;height: 40px;padding: 0 10px;border-radius: 5px;width: 100%}
|
||||
.account-page .col-right-tbl {display: table;}
|
||||
.brand-page{padding-top:40px;padding-bottom:20px}
|
||||
.brand-page a{color:#222}
|
||||
.brand-page .featured-brand{width:100%;float:left;margin-bottom:30px}
|
||||
.brand-page .featured-brand .title-n{width:100%;float:left;font-size:18px;text-transform:uppercase;font-weight:700;margin-bottom:20px}
|
||||
.brand-page .featured-brand .list-n{width:100%;float:left;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
|
||||
.brand-page .featured-brand .list-n li{width:12.5%;float:left;text-align:center;margin-bottom:10px}
|
||||
.brand-page .featured-brand .list-n li img{max-height:25px}
|
||||
.brand-page .brand-list{margin-bottom:30px}
|
||||
.brand-page .brand-list .first-letter{float:left;margin-right:30px}
|
||||
.brand-page .brand-list .first-letter .title-n{float:left;font-size:18px;text-transform:uppercase;font-weight:700;line-height:25px}
|
||||
.brand-page .brand-list .list-letter{float:left}
|
||||
.brand-page .brand-list .list-letter li{float:left;margin-right:25px;font-size:16px;line-height:25px}
|
||||
.brand-page .brand-item{margin-bottom:20px}
|
||||
.brand-page .brand-item .smallTitle{font-size:18px;font-weight:700;margin-bottom:10px!important;line-height:30px;border-bottom:solid 1px #ccc}
|
||||
.brand-page .brand-item .list-unstyled{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
|
||||
.brand-page .brand-item .list-unstyled li{text-align:center;padding:0 10px;margin-bottom:20px;text-transform:capitalize}
|
||||
.brand-page .brand-item .list-unstyled li img{max-height:25px;width:auto}
|
||||
.pd-store-list a span {width: calc(100% - 24px);}
|
||||
.product-page .col-left-group {height: calc(100vh - 96px);position: sticky;top: 86px}
|
||||
.product-page .product-filter-group {overflow: auto;height: calc(100% - 66px);padding-right: 13px;margin-right: -13px}
|
||||
.product-filter-group::-webkit-scrollbar{width:8px}
|
||||
.product-filter-group::-webkit-scrollbar-track{background:transparent}
|
||||
.product-filter-group::-webkit-scrollbar-thumb{background:#f5f5f5;border-radius:10px}
|
||||
.product-filter-group::-webkit-scrollbar-thumb:hover{background:#196deb}
|
||||
.group:hover .custom-nav{display: block}
|
||||
.custom-nav .button-icon {color: #fff;font-size: 16px;width: 40px;height: 40px;border-radius: 50%;background: #0677db;display: flex;align-items: center;justify-content: center;font-weight: bold;}
|
||||
.custom-nav .button-icon::after {font-size: inherit;color: inherit;content: '';}
|
||||
.custom-nav .swiper-navigation-icon {width: 11px !important;}
|
||||
|
||||
/*=================== Responsive ===================*/
|
||||
@media (min-width: 1648px) {
|
||||
.container{max-width:1600px}
|
||||
.tooltip-content .item{font-size:16px;line-height:24px}
|
||||
.tooltip-content .tooltip-spec .item::before{top:6px}
|
||||
.tooltip-content .tooltip-spec .item::after{top:8px}
|
||||
.header-cart-hover{width:500px}
|
||||
.header-cart-hover .cart-item{font-size:16px;line-height:22px}
|
||||
.header-cart-hover b.red{font-size:18px;font-weight:700}
|
||||
.header-cart-hover .text-18.font-600{font-size:20px;font-weight:700}
|
||||
.global-header-container > .container{gap:32px}
|
||||
.global-header-container .header-middle-group{width:875px;gap:16px}
|
||||
.global-header-container .header-right-group{width:456px}
|
||||
.global-header-container .header-account{padding:0 6px}
|
||||
.global-menu-container{width:143px}
|
||||
.global-sub-container{width:388px;height:822px;font-size:18px}
|
||||
.global-sub-container .item::after{width:16px;right:-16px}
|
||||
.global-sub-container .item > .submenu{margin-left:16px}
|
||||
.global-sub-container .submenu{width:1200px}
|
||||
.global-sub-container .submenu li{padding: 20px}
|
||||
.header-search-group{width:716px}
|
||||
.footer-newsletter-container > .container{gap:0}
|
||||
.footer-newsletter-container .icon-newsletter{width:92px;height:92px;margin-right:48px}
|
||||
.footer-newsletter-container p{width:370px;font-size:24px;line-height:31px;margin:0 96px 0 0}
|
||||
.footer-newsletter-container form{width:994px}
|
||||
.footer-newsletter-container button{width:240px}
|
||||
.footer-newsletter-container input{width:742px}
|
||||
.global-showroom-container{padding-top:96px;padding-bottom:96px}
|
||||
.showroom-item .text{font-size:18px;line-height:24px}
|
||||
.global-footer-container .footer-item{font-size:18px;line-height:24px}
|
||||
.global-footer-container .footer-item > p{font-size:20px}
|
||||
.global-footer-container .footer-item > .inline-grid{gap:16px}
|
||||
.footer-contact-info{font-size:18px;line-height:24px}
|
||||
.footer-contact-info a{font-size:inherit;display:table;line-height:inherit}
|
||||
.footer-contact-info > p{font-size:20px;line-height:26px}
|
||||
.global-faq-container{padding-top:64px;padding-bottom:64px}
|
||||
.home-page .banner-slider{width:1196px}
|
||||
.deal-container .group-title a{font-size:18px}
|
||||
.home-categories-container .group-title{line-height:40px;font-size:32px}
|
||||
.home-categories-container .item{padding:8px;font-size:16px;line-height:20px}
|
||||
.home-product-container .group-title h2{line-height:40px;font-size:32px}
|
||||
.home-article-container .art-item:nth-child(n+5){display:block}
|
||||
.home-article-container .grid-cols-4{grid-template-columns:repeat(5,minmax(0,1fr))}
|
||||
.product-page-content{gap:24px}
|
||||
.product-page-content .col-left-group{width:280px;padding:24px 20px}
|
||||
.product-page-content .col-right-group{width:1296px}
|
||||
.product-page-content .col-right-group .box-item{padding:24px}
|
||||
.product-page-content .product-holder{padding:0 24px;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 20px}
|
||||
.product-page-content .sort-group{padding-left:24px;padding-right:24px}
|
||||
.product-page-content .static-content{padding:0 40px}
|
||||
.pd-info-container > .gap-6{gap:32px;font-size:16px;line-height:22px}
|
||||
.pd-info-container .col-left-group{width:440px}
|
||||
.pd-info-container .col-middle-group{width:544px}
|
||||
.pd-info-container .col-right-group{width:504px}
|
||||
.pd-summary-group > p{font-size:18px}
|
||||
.pd-offer-group{border-radius:12px}
|
||||
.pd-offer-group .group-title{font-size:18px;line-height:24px}
|
||||
.pd-static-list{font-size:16px;line-height:22px}
|
||||
.pd-static-list .item-circle::before{top:7px}
|
||||
.pd-static-list .item-circle::after{top:9px}
|
||||
.pd-static-group .group-title{font-size:18px;line-height:24px;padding-left:8px}
|
||||
.pd-box-group{padding:24px}
|
||||
.pd-content-container{gap:32px}
|
||||
.pd-content-container .col-left{width:1048px}
|
||||
.pd-content-container .col-left .pd-box-group{padding:24px 40px}
|
||||
.pd-content-container .col-right{width:520px}
|
||||
.pd-comment-container .text-14{font-size:16px;line-height:22px}
|
||||
.article-categories-group{font-size:16px}
|
||||
.article-category-container .article-category-holder{gap:32px}
|
||||
.article-category-container .art-title{margin-bottom:8px}
|
||||
.article-page .article-holder{gap:32px}
|
||||
.article-detail-page{max-width:1000px}
|
||||
.software-list{grid-template-columns:repeat(8,minmax(0,1fr));margin-bottom:96px}
|
||||
.software-list .item{font-size:16px;line-height:22px}
|
||||
.deal-page .deal-time-container {font-size: 14px}
|
||||
}
|
||||
Reference in New Issue
Block a user