461 lines
29 KiB
HTML
461 lines
29 KiB
HTML
<header class="sticky top-0 left-0 w-full bg-white z-[999] shadow-[0_0_2px_0px_#e7e7e7]">
|
|
<div class="header-pc">
|
|
<div class="relative bg-white z-[99]">
|
|
<div class="container">
|
|
<div class="header flex items-center py-[15px] justify-between">
|
|
<div class="header-left flex items-center">
|
|
<a href="/" class="logo h-[26px] block mr-[130px]">
|
|
<img src="../../assets/images/logo.png" class="block w-full h-full object-contain"
|
|
width="100%" height="100%" alt="logo" />
|
|
</a>
|
|
<div class="menu flex items-center gap-[45px]" id="js-show-menu">
|
|
<div class="item-menu">
|
|
<a href="javascript:void(0)" data-menu="tinhnang" class="flex items-center gap-[5px]">
|
|
<span class="font-[600] text-[16px]">Tính năng</span>
|
|
<i class="fa-solid fa-sort-down text-[10px]"></i>
|
|
</a>
|
|
</div>
|
|
<div class="item-menu">
|
|
<a href="javascript:void(0)" data-menu="hotro" class="flex items-center gap-[5px]">
|
|
<span class="font-[600] text-[16px]">Hỗ trợ</span>
|
|
<i class="fa-solid fa-sort-down text-[10px]"></i>
|
|
</a>
|
|
</div>
|
|
<a href="/pricing" class="font-[600] h-[24px] leading-[24px]">
|
|
Bảng giá
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="header-right flex items-center justify-end gap-[10px]">
|
|
<a href="/dang-nhap"
|
|
class="inline-block px-[30px] py-[5px] border-[1px] border-[var(--color-blue)] text-[var(--color-blue)] text-[15px] font-[600] rounded-[50px] hover:bg-[var(--color-blue)] hover:text-white">Đăng
|
|
nhập</a>
|
|
<a href="/dang-ky"
|
|
class="inline-block px-[30px] py-[5px] border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] hover:bg-white text-[15px] font-[600] rounded-[50px] bg-[var(--color-blue)] text-white">Đăng
|
|
ký</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-0 z-[9] w-full h-fit max-h-[80vh] absolute translate-y-[-100%] overflow-auto bg-white top-[64px] border-t-[1px] border-[#d3d3d3] transition-transform duration-[250ms] "
|
|
id="box-menu">
|
|
<div class="container">
|
|
<div class="hidden content-menu" id="tinhnang">
|
|
<div class="grid grid-cols-4 gap-[30px]">
|
|
<div class="col-span-2 pb-[20px]">
|
|
<div
|
|
class="title text-[16px] font-[400] uppercase py-[16px] border-b-[1px] border-[#d3d3d3] text-[#4C4B58] mb-[16px] ">
|
|
Học hỏi và phát triển</div>
|
|
|
|
<div class="grid grid-cols-2 gap-[25px]">
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)] ">Trung
|
|
tâm trợ
|
|
giúp</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Hỗ
|
|
trợ đẳng cấp thế giới, 24/7</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Đại học
|
|
BigCommerce
|
|
</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Đào tạo thương mại
|
|
điện tử từ các chuyên gia của chúng tôi</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Dịch vụ
|
|
đối
|
|
tác</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Nhận trợ giúp xây
|
|
dựng cửa hàng của bạn</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Cửa hàng
|
|
chủ
|
|
đề</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Mẫu thiết kế
|
|
đẹp</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Cửa hàng
|
|
ứng
|
|
dụng</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Kết nối với phần
|
|
mềm hàng đầu</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Blog
|
|
thương mại
|
|
điện tử</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tin tức, chiến lược
|
|
và phân tích</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div
|
|
class="title text-[16px] font-[400] uppercase py-[16px] border-b-[1px] border-[#d3d3d3] text-[#4C4B58] mb-[16px] ">
|
|
chi tiết về thương mại điện tử</div>
|
|
<div class="list">
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Tài liệu
|
|
&
|
|
Video</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div id="js-article-menu" class="p-[20px] bg-[#edeff3]">
|
|
<div class="item">
|
|
<a href=""
|
|
class="image-article block w-full h-[165px] rounded-[8px_8px_0_0] overflow-hidden ">
|
|
<img src="../../assets/images/image-article.png"
|
|
class="block w-full h-full object-cover " width="100%" height="100%"
|
|
alt="article">
|
|
</a>
|
|
<div class="info bg-[#000] p-[10px] rounded-[0_0_8px_8px]">
|
|
<a href=""
|
|
class="font-[600] text-[15px] text-white line-clamp-2 hover:text-[var(--color-blue)] ">Xu
|
|
hướng cá nhân
|
|
hóa
|
|
trải nghiệm
|
|
người dùng
|
|
trong thương
|
|
mại điện tử
|
|
</a>
|
|
<p class="summary my-[7px] text-[13px] line-clamp-2 text-white ">Cá nhân hóa trải
|
|
nghiệm người
|
|
dùng là xu
|
|
hướng nổi bật
|
|
trong
|
|
thương mại điện tử</p>
|
|
<a href="" class="flex items-center gap-[10px] group">
|
|
<p
|
|
class="text-[13px] uppercase text-white group-hover:text-[var(--color-blue)]">
|
|
Xem thêm</p>
|
|
<i class="fa-solid fa-arrow-right text-[12px] text-[#00E5FF]"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="hidden content-menu" id="hotro">
|
|
<div class="grid grid-cols-4 gap-[30px]">
|
|
<div class="col-span-3 py-[20px]">
|
|
<div class="grid grid-cols-3 gap-[25px] pb-[20px]">
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)] ">Tạo
|
|
mới</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Thiết kế một cửa
|
|
hàng trực tuyến đẹp mắt.</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Thị
|
|
trường
|
|
</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tiếp cận nhiều
|
|
người mua sắm hơn trên nhiều kênh.</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Vận
|
|
hành</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tăng hiệu quả với
|
|
nền tảng đáng tin cậy.</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Chuyển
|
|
đổi</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tạo quy trình thanh
|
|
toán nhanh chóng, đơn giản và có khả năng chuyển đổi.</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Phát
|
|
triển</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Mở rộng thị
|
|
trường mới và nhiều hơn nữa.</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="js-article-menu" class="p-[20px] bg-[#edeff3]">
|
|
<div class="item">
|
|
<a href=""
|
|
class="image-article block w-full h-[165px] rounded-[8px_8px_0_0] overflow-hidden ">
|
|
<img src="../../assets/images/image-article.png"
|
|
class="block w-full h-full object-cover " width="100%" height="100%"
|
|
alt="article">
|
|
</a>
|
|
<div class="info bg-[#000] p-[10px] rounded-[0_0_8px_8px]">
|
|
<a href=""
|
|
class="font-[600] text-[15px] text-white line-clamp-2 hover:text-[var(--color-blue)] ">Xu
|
|
hướng cá nhân
|
|
hóa
|
|
trải nghiệm
|
|
người dùng
|
|
trong thương
|
|
mại điện tử
|
|
</a>
|
|
<p class="summary my-[7px] text-[13px] line-clamp-2 text-white ">Cá nhân hóa trải
|
|
nghiệm người
|
|
dùng là xu
|
|
hướng nổi bật
|
|
trong
|
|
thương mại điện tử</p>
|
|
<a href="" class="flex items-center gap-[10px] group">
|
|
<p
|
|
class="text-[13px] uppercase text-white group-hover:text-[var(--color-blue)]">
|
|
Xem thêm</p>
|
|
<i class="fa-solid fa-arrow-right text-[12px] text-[#00E5FF]"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-mobile">
|
|
<div class="relative bg-white z-[99] py-[15px]">
|
|
<div class="container">
|
|
<div class="header-main flex items-center justify-between">
|
|
<a href="/" class="logo h-[20px] block">
|
|
<img src="../../assets/images/logo.png" class="block w-full h-full object-contain" width="100%"
|
|
height="100%" alt="logo" />
|
|
</a>
|
|
<div class="header-right flex gap-[10px] items-center justify-end">
|
|
<a href=""
|
|
class="btn mx-auto inline-block px-[15px] h-[30px] leading-[30px] text-center rounded-[4px] bg-[var(--color-blue)] text-white text-[13px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
|
|
đầu dùng
|
|
thử miễn phí</a>
|
|
<a href="javascript:void(0)" onclick="showMenuMb()"
|
|
class="show-menu w-[30px] block leading-[100%] text-center">
|
|
<i class="fa fa-bars text-[18px]"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-0 z-[9] w-full h-screen overflow-auto hidden absolute bg-white top-[60px] border-t-[1px] border-[#d3d3d3] transition-transform duration-[250ms]"
|
|
id="js-menu-mobile">
|
|
<div class="p-[15px]">
|
|
<div class="item-menu mb-[10px]">
|
|
<a href="javascript:void(0)" data-menu="tinhnang" class="text-menu flex items-center gap-[5px]">
|
|
<span class="font-[600] text-[14px]">Tính năng</span>
|
|
<i class="fa-solid fa-sort-down text-[10px]"></i>
|
|
</a>
|
|
<div class="content-menu hidden">
|
|
<div class="gap-[30px]">
|
|
<div class="pb-[20px]">
|
|
<div
|
|
class="title text-[16px] font-[400] uppercase py-[16px] border-b-[1px] border-[#d3d3d3] text-[#4C4B58] mb-[16px] ">
|
|
Học hỏi và phát triển</div>
|
|
|
|
<div class="grid grid-cols-2 gap-[25px]">
|
|
<div>
|
|
<a href=""
|
|
class="block mb-[5px] font-bold hover:text-[var(--color-blue)] ">Trung
|
|
tâm trợ
|
|
giúp</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Hỗ
|
|
trợ đẳng cấp thế giới, 24/7</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Đại
|
|
học
|
|
BigCommerce
|
|
</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Đào tạo thương
|
|
mại
|
|
điện tử từ các chuyên gia của chúng tôi</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Dịch
|
|
vụ
|
|
đối
|
|
tác</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Nhận trợ giúp
|
|
xây
|
|
dựng cửa hàng của bạn</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Cửa
|
|
hàng
|
|
chủ
|
|
đề</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Mẫu thiết kế
|
|
đẹp</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Cửa
|
|
hàng
|
|
ứng
|
|
dụng</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Kết nối với
|
|
phần
|
|
mềm hàng đầu</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Blog
|
|
thương mại
|
|
điện tử</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tin tức, chiến
|
|
lược
|
|
và phân tích</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item mb-[10px]">
|
|
<div
|
|
class="title text-[16px] font-[400] uppercase py-[16px] border-b-[1px] border-[#d3d3d3] text-[#4C4B58] mb-[16px] ">
|
|
chi tiết về thương mại điện tử</div>
|
|
<div class="list">
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Tài
|
|
liệu
|
|
&
|
|
Video</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div id="js-article-menu" class="p-[20px] bg-[#edeff3]">
|
|
<div class="item grid grid-cols-4">
|
|
<a href=""
|
|
class="image-article h-[150px] block rounded-[8px_0_0_8px] overflow-hidden ">
|
|
<img src="../../assets/images/image-article.png"
|
|
class="block w-full h-full object-cover " width="100%" height="100%"
|
|
alt="article">
|
|
</a>
|
|
<div class="col-span-3 info bg-[#000] p-[10px] rounded-[0_8px_8px_0]">
|
|
<a href=""
|
|
class="font-[600] text-[15px] text-white line-clamp-2 hover:text-[var(--color-blue)] ">Xu
|
|
hướng cá nhân
|
|
hóa
|
|
trải nghiệm
|
|
người dùng
|
|
trong thương
|
|
mại điện tử
|
|
</a>
|
|
<p class="summary my-[7px] text-[13px] line-clamp-2 text-white ">Cá nhân hóa
|
|
trải
|
|
nghiệm người
|
|
dùng là xu
|
|
hướng nổi bật
|
|
trong
|
|
thương mại điện tử</p>
|
|
<a href="" class="flex items-center gap-[10px] group">
|
|
<p
|
|
class="text-[13px] uppercase text-white group-hover:text-[var(--color-blue)]">
|
|
Xem thêm</p>
|
|
<i class="fa-solid fa-arrow-right text-[12px] text-[#00E5FF]"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item-menu mb-[10px]">
|
|
<a href="javascript:void(0)" data-menu="hotro" class="text-menu flex items-center gap-[5px]">
|
|
<span class="font-[600] text-[14px]">Hỗ trợ</span>
|
|
<i class="fa-solid fa-sort-down text-[10px]"></i>
|
|
</a>
|
|
<div class="hidden content-menu">
|
|
<div class="grid grid-cols-2 gap-[25px] py-[20px]">
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)] ">Tạo
|
|
mới</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Thiết kế một
|
|
cửa
|
|
hàng trực tuyến đẹp mắt.</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Thị
|
|
trường
|
|
</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tiếp cận nhiều
|
|
người mua sắm hơn trên nhiều kênh.</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Vận
|
|
hành</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tăng hiệu quả
|
|
với
|
|
nền tảng đáng tin cậy.</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Chuyển
|
|
đổi</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tạo quy trình
|
|
thanh
|
|
toán nhanh chóng, đơn giản và có khả năng chuyển đổi.</a>
|
|
</div>
|
|
<div>
|
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Phát
|
|
triển</a>
|
|
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Mở rộng thị
|
|
trường mới và nhiều hơn nữa.</a>
|
|
</div>
|
|
</div>
|
|
<div id="js-article-menu" class="p-[20px] bg-[#edeff3]">
|
|
<div class="item grid grid-cols-4">
|
|
<a href="" class="image-article h-[150px] block rounded-[8px_0_0_8px] overflow-hidden ">
|
|
<img src="../../assets/images/image-article.png"
|
|
class="block w-full h-full object-cover " width="100%" height="100%"
|
|
alt="article">
|
|
</a>
|
|
<div class="col-span-3 info bg-[#000] p-[10px] rounded-[0_8px_8px_0]">
|
|
<a href=""
|
|
class="font-[600] text-[15px] text-white line-clamp-2 hover:text-[var(--color-blue)] ">Xu
|
|
hướng cá nhân
|
|
hóa
|
|
trải nghiệm
|
|
người dùng
|
|
trong thương
|
|
mại điện tử
|
|
</a>
|
|
<p class="summary my-[7px] text-[13px] line-clamp-2 text-white ">Cá nhân hóa
|
|
trải
|
|
nghiệm người
|
|
dùng là xu
|
|
hướng nổi bật
|
|
trong
|
|
thương mại điện tử</p>
|
|
<a href="" class="flex items-center gap-[10px] group">
|
|
<p
|
|
class="text-[13px] uppercase text-white group-hover:text-[var(--color-blue)]">
|
|
Xem thêm</p>
|
|
<i class="fa-solid fa-arrow-right text-[12px] text-[#00E5FF]"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="/pricing" class="hover:underline block mb-[10px] font-[600]">
|
|
Bảng giá
|
|
</a>
|
|
<a href="/login" class="block font-[600] mb-[10px] ">Đăng
|
|
nhập</a>
|
|
<a href="/login" class="block font-[600] mb-[10px]">Đăng
|
|
ký</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="opacity-50 z-[1] hidden top-[100%] w-full h-screen bg-[#121118] absolute right-0 transition-all duration-300 "
|
|
id="background-opacity" onclick="closeBackgorund()">
|
|
</div>
|
|
</header> |