tieptk/xstore
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update 07/10

Browse Source
This commit is contained in:
Tieptk
2025-10-07 08:23:59 +07:00
parent da666480d2
commit b85755ccda
10 changed files with 1128 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
assets/js/main.js
View File

@@ -11,6 +11,14 @@ $(document).ready(function () {
showInput();
showSelect();
AOS.init();
showCateMobile();
initPasswordStrength();
})
function ShowMenu() {
@@ -311,4 +319,26 @@ function initPasswordStrength() {
}
initPasswordStrength();
function showMenuMb() {
$('body').toggleClass('overflow-hidden')
$('#js-menu-mobile').toggleClass('hidden');
}
function showCateMobile() {
$('#js-menu-mobile .item-menu').on('click', function () {
$(this).toggleClass('active')
$(this).find($('.content-menu')).toggleClass('hidden');
})
}
function toggleFooter(el) {
var $el = $(el);
var $content = $el.next(".content-footer");
var $icon = $el.find("i");
$content.toggleClass("hidden");
$icon.toggleClass("fa-sort-down fa-sort-up");
}

239
assets/script/style.css
View File

@@ -97,6 +97,23 @@ html {
background-position: -68px -60px;
}
.header-left .menu a {
position: relative;
}
.header-left .menu a::after {
position: absolute;
content: "";
left: 0;
bottom: -3px;
width: 100%;
height: 2px;
background: var(--color-blue);
display: none;
}
.header-left .menu a:hover::after {
display: block;
}
.homepage .banner {
background: url(../images/background-banner.png) no-repeat;
background-size: 100% 100%;
@@ -200,4 +217,226 @@ html {
background: url(../images/background-login.jpg) no-repeat;
background-size: 100% 100%;
background-position: center;
}
.header-mobile {
display: none;
}
.header-mobile .item-menu {
display: block;
}
.header-mobile .item-menu .text-menu {
position: relative;
width: -moz-fit-content;
width: fit-content;
}
.header-mobile .item-menu .text-menu::after {
position: absolute;
content: "";
left: 0;
bottom: -3px;
width: 100%;
height: 2px;
background: var(--color-blue);
display: none;
}
.header-mobile .item-menu .text-menu:hover::after {
display: block;
}
.header-mobile .item-menu.active .text-menu::after {
display: block;
}
.footer-mobile {
display: none;
}
@media (max-width: 1200px) {
body {
max-width: 1200px !important;
}
.container {
max-width: 1024px !important;
padding: 0 15px;
}
.header-pc {
display: none;
}
.header-mobile {
display: block;
}
.homepage .banner {
min-height: auto;
}
.homepage .banner .title {
font-size: 24px;
line-height: 32px;
}
.homepage .banner .image-banner img {
height: auto;
}
.box-benefit {
padding: 30px 0 !important;
}
.box-benefit .title {
font-size: 24px;
}
.box-benefit .item .title {
font-size: 18px;
}
.box-benefit .item .content {
font-size: 14px;
}
.box-platforms {
padding: 30px 0 !important;
}
.box-platforms .title {
font-size: 24px;
}
.box-platforms .content-platforms {
width: 100%;
padding: 20px;
}
.box-platforms .box-item .content {
padding: 15px;
}
.box-product-sell {
margin: 20px 0 !important;
}
.box-product-sell .content {
padding: 20px 20px 20px 0;
}
.box-product-sell .item-sell {
gap: 20px;
}
.box-tamnhin {
margin-bottom: 50px !important;
}
.box-tamnhin .title {
font-size: 24px;
}
.box-tamnhin .content-tamnhin .title {
font-size: 24px;
}
}
@media (max-width: 1000px) {
body {
max-width: 100% !important;
}
.container {
max-width: 100% !important;
padding: 0 15px;
}
.homepage .tieuchi {
width: 100%;
padding: 0 15px;
}
.box-tamnhin .content-tamnhin {
width: 100%;
}
.item-features .content {
width: 100%;
padding: 0 15px;
}
.box-chuyendoi {
width: 100% !important;
}
.page-features .page-title {
font-size: 24px;
}
.page-features .page-note {
font-size: 18px;
}
}
@media (max-width: 834px) {
.homepage .tieuchi .item p {
font-size: 14px;
}
.footer-pc .grid-cols-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.homepage .tieuchi {
width: 100%;
}
}
@media (max-width: 680px) {
.homepage .tieuchi {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.homepage .tieuchi .item {
border-bottom: 1px solid #8a8a8a;
border-right: 0;
padding: 20px 0;
}
.homepage .tieuchi .item:last-child {
border: 0;
}
.homepage .banner .title {
padding: 64px 15px 0 15px;
}
.footer-mobile {
display: block;
}
.footer-pc {
display: none;
}
}
@media (max-width: 480px) {
.homepage .banner .title {
font-size: 20px;
}
.box-benefit .title {
font-size: 20px;
}
.box-benefit .list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.box-platforms .content-platforms {
padding: 15px;
}
.box-platforms .title {
font-size: 20px;
margin-bottom: 30px;
}
.box-platforms .box-item {
grid-template-columns: repeat(1, minmax(0, 1fr));
flex-wrap: wrap;
}
.box-platforms .box-item .image {
width: 100%;
padding: 15px;
}
.box-platforms .box-item .image a {
height: 100%;
}
.box-platforms .box-item .content {
width: 100%;
}
.box-product-sell .item-sell {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0;
}
.box-product-sell .item-sell .content {
padding: 15px;
}
.box-tamnhin .background-tamnhin {
padding: 15px;
}
.box-tamnhin .title {
font-size: 20px;
}
.box-tamnhin .list {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.box-tamnhin .box-faq {
padding: 15px;
}
.box-tamnhin .box-faq h2 {
font-size: 20px;
}
.box-tamnhin .box-faq .item-faq .title {
font-size: 16px;
}
}/*# sourceMappingURL=style.css.map */

2
assets/script/style.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,qBAAA;EACA,qBAAA;ACCJ;;ADCA;EACI,yBAAA;EACA,mBAAA;ACEJ;;ADAA;EACI,UAAA;EACA,sBAAA;ACGJ;;ADDA;EACI,mBAAA;EACA,mBAAA;EACA,gIAAA;ACIJ;;ADKA;EACI,iCAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,iBAAA;EACA,8BAAA;EACA,yBAAA;ACFJ;;ADIA;EACI,iCAAA;ACDJ;;ADGA;EACI,WAAA;EACA,WAAA;EACA,cAAA;ACAJ;;ADEA;EACI,4BAAA;EACA,cAAA;ACCJ;;ADEA;EACI,cAAA;EACA,kDAAA;EACA,0BAAA;ACCJ;ADAI;EACI,WAAA;EACA,YAAA;EACA,wBAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,4BAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,4BAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,8BAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,gCAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,gCAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,8BAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,gCAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,gCAAA;ACER;;ADGI;EACI,0DAAA;EACA,0BAAA;EACA,iBAAA;ACAR;ADEI;EACI,2DAAA;EACA,0BAAA;EACA,2BAAA;ACAR;;ADIA;EACI,kBAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,kBAAA;EACA,MAAA;EACA,WAAA;EACA,UAAA;EACA,cAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA;EACA,+FAAA;EACA,wBAAA;EACA,eAAA;ACDJ;;ADIA;EACI,qBAAA;ACDJ;;ADIA;EACI;IACI,UAAA;ECDN;AACF;ADIA;EACI,aAAA;ACFJ;;ADKA;EACI,wBAAA;EACA,iBAAA;ACFJ;;ADKA;EACI,2DAAA;EACA,0BAAA;EACA,kCAAA;ACFJ;;ADMI;EACI,mBAAA;EACA,kBAAA;EACA,kBAAA;EACA,cAAA;ACHR;ADIQ;EACI,kBAAA;EACA,WAAA;EACA,OAAA;EACA,QAAA;EACA,UAAA;EACA,WAAA;EACA,gBAAA;EACA,8CAAA;ACFZ;;ADMA;EACI,0DAAA;EACA,0BAAA;EACA,iBAAA;ACHJ;;ADQQ;EACI,kBAAA;EACA,YAAA;EACA,YAAA;EACA,SAAA;EACA,UAAA;ACLZ;;ADWI;EACI,aAAA;ACRR;ADUI;EACI,eAAA;ACRR;ADWQ;EACI,kBAAA;EACA,YAAA;EACA,YAAA;EACA,SAAA;EACA,UAAA;ACTZ;;ADcA;EACI,yDAAA;EACA,0BAAA;EACA,2BAAA;ACXJ","file":"style.css"}
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,qBAAA;EACA,qBAAA;ACCJ;;ADCA;EACI,yBAAA;EACA,mBAAA;ACEJ;;ADAA;EACI,UAAA;EACA,sBAAA;ACGJ;;ADDA;EACI,mBAAA;EACA,mBAAA;EACA,gIAAA;ACIJ;;ADKA;EACI,iCAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,iBAAA;EACA,8BAAA;EACA,yBAAA;ACFJ;;ADIA;EACI,iCAAA;ACDJ;;ADGA;EACI,WAAA;EACA,WAAA;EACA,cAAA;ACAJ;;ADEA;EACI,4BAAA;EACA,cAAA;ACCJ;;ADEA;EACI,cAAA;EACA,kDAAA;EACA,0BAAA;ACCJ;ADAI;EACI,WAAA;EACA,YAAA;EACA,wBAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,4BAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,4BAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,8BAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,gCAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,gCAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,8BAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,gCAAA;ACER;ADAI;EACI,WAAA;EACA,YAAA;EACA,gCAAA;ACER;;ADGI;EACI,kBAAA;ACAR;ADCQ;EACI,kBAAA;EACA,WAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;EACA,WAAA;EACA,6BAAA;EACA,aAAA;ACCZ;ADEY;EACI,cAAA;ACAhB;;ADOI;EACI,0DAAA;EACA,0BAAA;EACA,iBAAA;ACJR;ADMI;EACI,2DAAA;EACA,0BAAA;EACA,2BAAA;ACJR;;ADQA;EACI,kBAAA;EACA,gBAAA;ACLJ;;ADQA;EACI,kBAAA;EACA,MAAA;EACA,WAAA;EACA,UAAA;EACA,cAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA;EACA,+FAAA;EACA,wBAAA;EACA,eAAA;ACLJ;;ADQA;EACI,qBAAA;ACLJ;;ADQA;EACI;IACI,UAAA;ECLN;AACF;ADQA;EACI,aAAA;ACNJ;;ADSA;EACI,wBAAA;EACA,iBAAA;ACNJ;;ADSA;EACI,2DAAA;EACA,0BAAA;EACA,kCAAA;ACNJ;;ADUI;EACI,mBAAA;EACA,kBAAA;EACA,kBAAA;EACA,cAAA;ACPR;ADQQ;EACI,kBAAA;EACA,WAAA;EACA,OAAA;EACA,QAAA;EACA,UAAA;EACA,WAAA;EACA,gBAAA;EACA,8CAAA;ACNZ;;ADUA;EACI,0DAAA;EACA,0BAAA;EACA,iBAAA;ACPJ;;ADYQ;EACI,kBAAA;EACA,YAAA;EACA,YAAA;EACA,SAAA;EACA,UAAA;ACTZ;;ADeI;EACI,aAAA;ACZR;ADcI;EACI,eAAA;ACZR;ADeQ;EACI,kBAAA;EACA,YAAA;EACA,YAAA;EACA,SAAA;EACA,UAAA;ACbZ;;ADkBA;EACI,yDAAA;EACA,0BAAA;EACA,2BAAA;ACfJ;;ADiBA;EACI,aAAA;ACdJ;ADeI;EACI,cAAA;ACbR;ADcQ;EACI,kBAAA;EACA,uBAAA;EAAA,kBAAA;ACZZ;ADaY;EACI,kBAAA;EACA,WAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;EACA,WAAA;EACA,6BAAA;EACA,aAAA;ACXhB;ADcgB;EACI,cAAA;ACZpB;ADiBY;EACI,cAAA;ACfhB;;ADqBA;EACI,aAAA;AClBJ;;ADqBA;EACI;IACI,4BAAA;EClBN;EDoBE;IACI,4BAAA;IACA,eAAA;EClBN;EDoBE;IACI,aAAA;EClBN;EDoBE;IACI,cAAA;EClBN;EDqBM;IACI,gBAAA;ECnBV;EDoBU;IACI,eAAA;IACA,iBAAA;EClBd;EDoBU;IACI,YAAA;EClBd;EDsBE;IACI,0BAAA;ECpBN;EDqBM;IACI,eAAA;ECnBV;EDsBU;IACI,eAAA;ECpBd;EDsBU;IACI,eAAA;ECpBd;EDwBE;IACI,0BAAA;ECtBN;EDuBM;IACI,eAAA;ECrBV;EDuBM;IACI,WAAA;IACA,aAAA;ECrBV;EDwBU;IACI,aAAA;ECtBd;ED0BE;IACI,yBAAA;ECxBN;EDyBM;IACI,yBAAA;ECvBV;EDyBM;IACI,SAAA;ECvBV;ED0BE;IACI,8BAAA;ECxBN;EDyBM;IACI,eAAA;ECvBV;ED0BU;IACI,eAAA;ECxBd;AACF;AD6BA;EACI;IACI,0BAAA;EC3BN;ED6BE;IACI,0BAAA;IACA,eAAA;EC3BN;ED6BE;IACI,WAAA;IACA,eAAA;EC3BN;ED6BE;IACI,WAAA;EC3BN;ED+BM;IACI,WAAA;IACA,eAAA;EC7BV;EDgCE;IACI,sBAAA;EC9BN;EDiCM;IACI,eAAA;EC/BV;EDiCM;IACI,eAAA;EC/BV;AACF;ADmCA;EAEQ;IACI,eAAA;EClCV;EDsCM;IACI,gDAAA;ECpCV;AACF;ADwCA;EACI;IACI,WAAA;ECtCN;AACF;ADyCA;EACI;IACI,gDAAA;ECvCN;EDyCE;IACI,gCAAA;IACA,eAAA;IACA,eAAA;ECvCN;EDwCM;IACI,SAAA;ECtCV;EDyCE;IACI,yBAAA;ECvCN;EDyCE;IACI,cAAA;ECvCN;EDyCE;IACI,aAAA;ECvCN;AACF;AD0CA;EACI;IACI,eAAA;ECxCN;ED0CE;IACI,eAAA;ECxCN;ED0CE;IACI,gDAAA;ECxCN;ED2CM;IACI,aAAA;ECzCV;ED2CM;IACI,eAAA;IACA,mBAAA;ECzCV;ED2CM;IACI,gDAAA;IACA,eAAA;ECzCV;ED0CU;IACI,WAAA;IACA,aAAA;ECxCd;EDyCc;IACI,YAAA;ECvClB;ED0CU;IACI,WAAA;ECxCd;ED6CM;IACI,gDAAA;IACA,MAAA;EC3CV;ED4CU;IACI,aAAA;EC1Cd;ED+CM;IACI,aAAA;EC7CV;ED+CM;IACI,eAAA;EC7CV;ED+CM;IACI,gDAAA;EC7CV;ED+CM;IACI,aAAA;EC7CV;ED8CU;IACI,eAAA;EC5Cd;ED+Cc;IACI,eAAA;EC7ClB;AACF","file":"style.css"}

275
assets/script/style.scss
View File

@@ -97,6 +97,27 @@ html {
}
}
.header-left .menu {
a {
position: relative;
&::after {
position: absolute;
content: "";
left: 0;
bottom: -3px;
width: 100%;
height: 2px;
background: var(--color-blue);
display: none;
}
&:hover {
&::after {
display: block;
}
}
}
}
.homepage {
.banner {
background: url(../images/background-banner.png) no-repeat;
@@ -213,3 +234,257 @@ html {
background-size: 100% 100%;
background-position: center;
}
.header-mobile {
display: none;
.item-menu {
display: block;
.text-menu {
position: relative;
width: fit-content;
&::after {
position: absolute;
content: "";
left: 0;
bottom: -3px;
width: 100%;
height: 2px;
background: var(--color-blue);
display: none;
}
&:hover {
&::after {
display: block;
}
}
}
&.active {
.text-menu::after {
display: block;
}
}
}
}
.footer-mobile {
display: none;
}
@media (max-width: 1200px) {
body {
max-width: 1200px !important;
}
.container {
max-width: 1024px !important;
padding: 0 15px;
}
.header-pc {
display: none;
}
.header-mobile {
display: block;
}
.homepage {
.banner {
min-height: auto;
.title {
font-size: 24px;
line-height: 32px;
}
.image-banner img {
height: auto;
}
}
}
.box-benefit {
padding: 30px 0 !important;
.title {
font-size: 24px;
}
.item {
.title {
font-size: 18px;
}
.content {
font-size: 14px;
}
}
}
.box-platforms {
padding: 30px 0 !important;
.title {
font-size: 24px;
}
.content-platforms {
width: 100%;
padding: 20px;
}
.box-item {
.content {
padding: 15px;
}
}
}
.box-product-sell {
margin: 20px 0 !important;
.content {
padding: 20px 20px 20px 0;
}
.item-sell {
gap: 20px;
}
}
.box-tamnhin {
margin-bottom: 50px !important;
.title {
font-size: 24px;
}
.content-tamnhin {
.title {
font-size: 24px;
}
}
}
}
@media (max-width: 1000px) {
body {
max-width: 100% !important;
}
.container {
max-width: 100% !important;
padding: 0 15px;
}
.homepage .tieuchi {
width: 100%;
padding: 0 15px;
}
.box-tamnhin .content-tamnhin {
width: 100%;
}
.item-features {
.content {
width: 100%;
padding: 0 15px;
}
}
.box-chuyendoi {
width: 100% !important;
}
.page-features {
.page-title {
font-size: 24px;
}
.page-note {
font-size: 18px;
}
}
}
@media (max-width: 834px) {
.homepage .tieuchi {
.item p {
font-size: 14px;
}
}
.footer-pc {
.grid-cols-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
}
@media (max-width: 768px) {
.homepage .tieuchi {
width: 100%;
}
}
@media (max-width: 680px) {
.homepage .tieuchi {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.homepage .tieuchi .item {
border-bottom: 1px solid #8a8a8a;
border-right: 0;
padding: 20px 0;
&:last-child {
border: 0;
}
}
.homepage .banner .title {
padding: 64px 15px 0 15px;
}
.footer-mobile {
display: block;
}
.footer-pc {
display: none;
}
}
@media (max-width: 480px) {
.homepage .banner .title {
font-size: 20px;
}
.box-benefit .title {
font-size: 20px;
}
.box-benefit .list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.box-platforms {
.content-platforms {
padding: 15px;
}
.title {
font-size: 20px;
margin-bottom: 30px;
}
.box-item {
grid-template-columns: repeat(1, minmax(0, 1fr));
flex-wrap: wrap;
.image {
width: 100%;
padding: 15px;
a {
height: 100%;
}
}
.content {
width: 100%;
}
}
}
.box-product-sell {
.item-sell {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0;
.content {
padding: 15px;
}
}
}
.box-tamnhin {
.background-tamnhin {
padding: 15px;
}
.title {
font-size: 20px;
}
.list {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.box-faq {
padding: 15px;
h2 {
font-size: 20px;
}
.item-faq {
.title {
font-size: 16px;
}
}
}
}
}

35
template/features/create.html
View File

@@ -1,4 +1,4 @@
<div class="page-taomoi mb-[80px]">
<div class="page-taomoi mb-[80px] page-features">
<div class="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
<div class="container">
@@ -23,11 +23,13 @@
</ol>
</div>
<p class="page-title text-center text-[16px] uppercase font-[400] pb-[45px]">Tạo mới</p>
<p class="page-name text-center text-[16px] uppercase font-[400] pb-[45px]">Tạo mới</p>
<h1 class="text-[36px] font-[600] text-center capitalize pb-[40px] ">Thiết kế trang web thân thiện với <br>
<h1 class="page-title text-[36px] font-[600] text-center capitalize pb-[40px] ">Thiết kế trang web thân
thiện với <br>
người dùng để thúc đẩy chuyển đổi</h1>
<p class="note text-[20px] text-center capitalize pb-[40px] ">Có thể tự do tạo gian hàng đẹp nhất thể hiện
<p class="page-note text-[20px] text-center capitalize pb-[40px] ">Có thể tự do tạo gian hàng đẹp nhất thể
hiện
câu chuyện thương hiệu của bạn</p>
<a href=""
class="btn mb-[45px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
@@ -35,7 +37,7 @@
thử miễn phí</a>
<div class="w-[990px] mx-auto">
<div class="w-[990px] mx-auto box-chuyendoi">
<div class="grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white">
<div class="image rounded-[12px] overflow-hidden h-[190px]">
<img src="../../assets/images/image-create.png" class="block w-full h-[190px] object-cover"
@@ -55,8 +57,7 @@
</div>
</div>
<div class="pt-[100px]">
<div class="pt-[100px] content-tammoi">
<h2 class="text-center text-[32px] capitalize font-bold mb-[25px] ">Tìm hiểu nền tảng của chúng tôi cho phép
bạn</h2>
<div class="container">
@@ -86,8 +87,7 @@
</a>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Khởi chạy nhanh chóng
bằng Page Builder để tạo trang web của bạn</h2>
@@ -95,7 +95,7 @@
trang nhanh chóng, <br> không cần mã với những lợi ích của
một nền tảng mạnh mẽ</p>
<div class="w-[1000px] mx-auto">
<div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
@@ -122,15 +122,14 @@
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Xây dựng thương hiệu
của bạn bằng cách sử dụng các <br> mẫu chuyên nghiệp</h2>
<p class="text-[16px] text-center ">Các chủ đề được tối ưu hóa và tùy chỉnh hoàn toàn với khả năng phản
hồi trên thiết bị <br> di động ngay khi xuất xưởng</p>
<div class="w-[1000px] mx-auto">
<div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
@@ -157,7 +156,7 @@
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Phát triển linh hoạt
trên nền tảng có khả năng mở rộng <br>
@@ -166,7 +165,7 @@
sự tự do phát triển thành các giải pháp <br> trang web tùy
chỉnh hoặc không có giao diện bằng các công cụ như Next.js và React</p>
<div class="w-[1000px] mx-auto">
<div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
@@ -193,7 +192,7 @@
</div>
</div>
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
id="tyle">
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Giữ nguyên trang web
hiện tại của bạn <br>
@@ -202,7 +201,7 @@
tôi để truy cập vào <br> các chức năng thương mại điện tử
mà không phải bỏ nội dung của bạn</p>
<div class="w-[1000px] mx-auto">
<div class="content w-[1000px] mx-auto">
<div class=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
<div class="effect-image">
@@ -229,7 +228,7 @@
</div>
</div>
<div class="rounded-[12px] overflow-hidden bg-black ">
<div class="user-xstore rounded-[12px] overflow-hidden bg-black ">
<div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
<h2
class="pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize ">

1
template/free-trial/home.html
View File

@@ -21,7 +21,6 @@
</li>
</ol>
</div>
<p class="uppercase text-[14px] text-center my-[50px] ">Bắt đầu dùng thử miễn phí</p>
<h1 class="text-[32px] font-bold capitalize text-center ">Khám phá lý do tại sao <br>
các thương hiệu phát triển nhanh lại chọn xStore</h1>

58
template/home/home.html
View File

@@ -1,12 +1,14 @@
<div class="homepage">
<div class="banner">
<h2 class="text-center text-[36px] font-[600] leading-[49px] pt-[64px] ">Phát triển thương hiệu của bạn <br>
<div data-aos="fade-up" data-aos-duration="2000">
<h2 class="title text-center text-[36px] font-[600] leading-[49px] pt-[64px] ">Phát triển thương hiệu của
bạn <br>
với nền tảng thương mại điện tử được đánh giá cao nhất</h2>
<a href=""
class="btn mt-[60px] mb-[50px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] 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>
<div class="w-[850px] mx-auto grid grid-cols-3">
<div class="tieuchi w-[850px] mx-auto grid grid-cols-3">
<div class="item border-r-[1px] border-[#8A8A8A]">
<i class="icon_2025 checkbox mx-auto"></i>
<p class="mt-[15px] text-center text-[16px] font-[400]">Được tin tưởng trong ngành <br> thương mại
@@ -26,7 +28,9 @@
nhất</p>
</div>
</div>
<div class="container mt-[50px] pb-[40px] effect-image">
</div>
<div class="container image-banner mt-[50px] pb-[40px] effect-image">
<img src="../../assets/images/box-fontend.png" class="block w-full h-[450px]" width="100%" height="100%"
alt="banner">
</div>
@@ -34,58 +38,65 @@
<div class="box-benefit py-[80px]">
<div class="container">
<h2 class="block mb-[20px] pb-[20px] border-b-[2px] border-[#DADADA] text-[28px] font-bold">Bạn có thể
<h2 class="title block mb-[20px] pb-[20px] border-b-[2px] border-[#DADADA] text-[28px] font-bold">Bạn có thể
nhận được những gì khi
sử dụng nền tảng xStore?</h2>
<div class="grid grid-cols-3 gap-[20px]">
<div class="item">
<div class="list grid grid-cols-3 gap-[20px]">
<div class="item" data-aos="fade-up" data-aos-delay="100">
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
<i class="icon_2025 up"></i>
</div>
<b class="title text-[20px] font-bold block my-[16px]">Tăng doanh thu nhanh hơn</b>
<p class="line-camp-2 text-[16px] font-[400]">Các công cụ tích hợp mạnh mẽ giúp tăng tốc độ phát
<p class="content line-clamp-2 text-[16px] font-[400]">Các công cụ tích hợp mạnh mẽ giúp tăng tốc độ
phát
triển thương mại điện
tử của bạn.</p>
</div>
<div class="item">
<div class="item" data-aos="fade-up" data-aos-delay="200">
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
<i class="icon_2025 thuhut"></i>
</div>
<b class="title text-[20px] font-bold block my-[16px]">Thu hút nhiều khách hàng hơn.</b>
<p class="line-camp-2 text-[16px] font-[400]">Quy trình thanh toán hàng đầu trong ngành giúp
<p class="content line-clamp-2 text-[16px] font-[400]">Quy trình thanh toán hàng đầu trong ngành
giúp
biến người truy cập trang
web thành khách hàng</p>
</div>
<div class="item">
<div class="item" data-aos="fade-up" data-aos-delay="300">
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
<i class="icon_2025 tietkiem"></i>
</div>
<b class="title text-[20px] font-bold block my-[16px]">Tiết kiệm chi phí</b>
<p class="line-camp-2 text-[16px] font-[400]">Cung cấp dịch vụ thanh toán ưu tiên mức giá cạnh
<p class="content line-clamp-2 text-[16px] font-[400]">Cung cấp dịch vụ thanh toán ưu tiên mức giá
cạnh
tranh</p>
</div>
<div class="item">
<div class="item" data-aos="fade-up" data-aos-delay="400">
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
<i class="icon_2025 setting"></i>
</div>
<b class="title text-[20px] font-bold block my-[16px]">Xây dựng theo cách của bạn</b>
<p class="line-camp-2 text-[16px] font-[400]">Tính linh hoạt của nền tảng có nghĩa là bạn có thể
<p class="content line-clamp-2 text-[16px] font-[400]">Tính linh hoạt của nền tảng có nghĩa là bạn
có
thể
tự do tùy chỉnh.</p>
</div>
<div class="item">
<div class="item" data-aos="fade-up" data-aos-delay="500">
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
<i class="icon_2025 up-sale"></i>
</div>
<b class="title text-[20px] font-bold block my-[16px]">Tăng doanh số bán hàng</b>
<p class="line-camp-2 text-[16px] font-[400]">Các tính năng đảm bảo bạn có thể mở rộng quy mô
<p class="content line-clamp-2 text-[16px] font-[400]">Các tính năng đảm bảo bạn có thể mở rộng quy
mô
bán hàng trực tuyến.</p>
</div>
<div class="item">
<div class="item" data-aos="fade-up" data-aos-delay="600">
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
<i class="icon_2025 support"></i>
</div>
<b class="title text-[20px] font-bold block my-[16px]">Đội ngũ hỗ trợ tin cậy</b>
<p class="line-camp-2 text-[16px] font-[400]">Hỗ trợ trực tiếp 24/7 giải quyết mọi vấn đề của
<p class="content line-clamp-2 text-[16px] font-[400]">Hỗ trợ trực tiếp 24/7 giải quyết mọi vấn đề
của
khách hàng</p>
</div>
</div>
@@ -94,8 +105,9 @@
<div class="box-platforms pt-[90px] ">
<div class="container">
<div class="bg-[#F2F2F6] py-[50px] px-[100px]">
<h2 class="text-[32px] font-bold mb-[45px] text-center">Nền tảng hiệu suất cao có thể Tuỳ chỉnh</h2>
<div class="content-platforms bg-[#F2F2F6] py-[50px] px-[100px]">
<h2 class="title text-[32px] font-bold mb-[45px] text-center">Nền tảng hiệu suất cao có thể Tuỳ chỉnh
</h2>
<div class="box-item grid grid-cols-2 rounded-[12px] overflow-hidden mb-[55px]">
<div class="content bg-white py-[60px] px-[20px]">
@@ -228,17 +240,16 @@
</div>
</div>
<div class="box-product-sell my-[100px]">
<div class="box-product-sell my-[100px]" data-aos="fade-up" data-aos-delay="200">
<div class="container">
<div class="grid grid-cols-3 gap-[40px] bg-[#F1F3F8] rounded-[12px] overflow-hidden">
<div class="item-sell grid grid-cols-3 gap-[40px] bg-[#F1F3F8] rounded-[12px] overflow-hidden">
<div>
<a href="" class="effect-image overflow-hidden block w-full h-[258px]">
<img src="../../assets/images/image-sell.png"
class="w-full h-full block rounded-[12px] object-cover overflow-hidden" alt="">
</a>
</div>
<div class="col-span-2 py-[50px]">
<div class="content col-span-2 py-[50px]">
<h2 class="text-[20px] font-bold mb-[10px]">Bán hàng nhiều hơn, nhanh hơn với sự trợ giúp từ
chuyên gia
tư
@@ -265,7 +276,6 @@
</div>
</div>
<div class="box-tamnhin mb-[105px]">
<div class="container">
<div class="background-tamnhin py-[45px]">

78
template/other/footer.html
View File

@@ -1,4 +1,5 @@
<div class="footer bg-[#00112B] text-white">
<div class="footer-pc">
<div class="container">
<div class="main-footer pt-[50px] pb-[35px]">
<div class="grid grid-cols-4 gap-[90px]">
@@ -11,7 +12,8 @@
Nội</a>
<a href="tel:02422.138.068" class="text-[14px] block mb-[10px] hover:underline">Hotline:
02422.138.068</a>
<a href="mailto:hotro@hurasoft.com" class="text-[14px] block mb-[10px] hover:underline">Email:
<a href="mailto:hotro@hurasoft.com"
class="text-[14px] block mb-[10px] hover:underline">Email:
hotro@hurasoft.com</a>
</div>
</div>
@@ -58,5 +60,79 @@
</div>
</div>
</div>
</div>
<div class="footer-mobile">
<div class="container">
<div class="main-footer py-[20px]">
<div class="item-footer border-b-[1px] border-[#fff]">
<div class="flex items-center justify-between py-[13px]" onclick="toggleFooter(this)">
<h3 class="title text-[15px] font-bold">Về chúng tôi</h3>
<i class="fa-solid fa-sort-down" aria-hidden="true"></i>
</div>
<div class="content-footer hidden">
<a href="https://maps.app.goo.gl/fimdgxskWrcDrKbQ7" target="_blank"
class="text-[14px] block mb-[10px] hover:underline">Địa chỉ: Tầng 5 - Số 3,
ngõ 18 Yên Lãng, Đống Đa, Hà
Nội</a>
<a href="tel:02422.138.068" class="text-[14px] block mb-[10px] hover:underline">Hotline:
02422.138.068</a>
<a href="mailto:hotro@hurasoft.com" class="text-[14px] block mb-[10px] hover:underline">Email:
hotro@hurasoft.com</a>
</div>
</div>
<div class="item-footer border-b-[1px] border-[#fff]">
<div class="flex items-center justify-between py-[13px]" onclick="toggleFooter(this)">
<h3 class="title text-[15px] font-bold ">Dịch vụ</h3>
<i class="fa-solid fa-sort-down" aria-hidden="true"></i>
</div>
<div class="content-footer hidden">
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Giá cả</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Dùng thử miễn phí</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Yêu cầu bản demo</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Ứng dụng & Tích hợp</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Chủ đề & Mẫu</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Dịch vụ xStore</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Trở thành đối tác</a>
</div>
</div>
<div class="item-footer border-b-[1px] border-[#fff]">
<div class="flex items-center justify-between py-[13px]" onclick="toggleFooter(this)">
<h3 class="title text-[15px] font-bold">Hỗ trợ</h3>
<i class="fa-solid fa-sort-down" aria-hidden="true"></i>
</div>
<div class="content-footer hidden">
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Liên hệ Hỗ trợ Kỹ thuật</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Trung tâm nhà phát triển</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Cộng đồng nhà phát triển</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Tài liệu API</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Tài liệu chủ đề</a>
</div>
</div>
<div class="item-footer border-b-[1px] border-[#fff]">
<div class="flex items-center justify-between py-[13px]" onclick="toggleFooter(this)">
<h3 class="title text-[15px] font-bold">Hợp tác</h3>
<i class="fa-solid fa-sort-down" aria-hidden="true"></i>
</div>
<div class="content-footer hidden">
<a href="/gioi-thieu" class="text-[14px] block mb-[10px] hover:underline">Giới thiệu về
chúng tôi
</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Gửi yêu cầu hỗ trợ</a>
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Tìm đối tác</a>
</div>
</div>
<div class="footer-bottom py-[20px] ">
<img src="../../assets/images/logo-footer.png" class="block h-[50px] object-contain " alt="logo">
<div class="mt-[20px] text-[14px]">
<p>© Copyright 2025 xStore</p>
<p>Chính sách bảo mật | Điều khoản sử dụng trang web | Thỏa thuận dịch vụ</p>
</div>
</div>
</div>
</div>
</div>
</div>

263
template/other/header.html
View File

@@ -1,26 +1,27 @@
<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" />
<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] group">
<span class="font-[600] text-[16px] group-hover:underline">Tính năng</span>
<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] group">
<span class="font-[600] text-[16px] group-hover:underline">Hỗ trợ</span>
<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="hover:underline font-[600]">
<a href="/pricing" class="font-[600] h-[24px] leading-[24px]">
Bảng giá
</a>
</div>
@@ -36,7 +37,7 @@
</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] bg-white border-t-[1px] border-[#d3d3d3] transition-transform duration-[250ms] "
<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">
@@ -113,7 +114,8 @@
<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">
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=""
@@ -132,7 +134,8 @@
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)]">
<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>
@@ -185,7 +188,8 @@
<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">
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=""
@@ -204,7 +208,8 @@
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)]">
<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>
@@ -216,6 +221,240 @@
</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-[26px] 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="/dang-nhap" class="block font-[600] mb-[10px] ">Đăng
nhập</a>
<a href="/dang-ky" 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>

2
template/theme.html
View File

@@ -12,6 +12,7 @@
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="{{ 'style.css' | asset_url }}?v=1.2" />
</head>
@@ -31,6 +32,7 @@
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="../../assets/js/main.js"></script>
</body>