update 07/10
This commit is contained in:
@@ -11,6 +11,14 @@ $(document).ready(function () {
|
|||||||
showInput();
|
showInput();
|
||||||
|
|
||||||
showSelect();
|
showSelect();
|
||||||
|
|
||||||
|
|
||||||
|
AOS.init();
|
||||||
|
|
||||||
|
|
||||||
|
showCateMobile();
|
||||||
|
initPasswordStrength();
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
function ShowMenu() {
|
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");
|
||||||
|
}
|
||||||
@@ -97,6 +97,23 @@ html {
|
|||||||
background-position: -68px -60px;
|
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 {
|
.homepage .banner {
|
||||||
background: url(../images/background-banner.png) no-repeat;
|
background: url(../images/background-banner.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
@@ -200,4 +217,226 @@ html {
|
|||||||
background: url(../images/background-login.jpg) no-repeat;
|
background: url(../images/background-login.jpg) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-position: center;
|
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 */
|
}/*# sourceMappingURL=style.css.map */
|
||||||
@@ -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":"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","file":"style.css"}
|
||||||
@@ -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 {
|
.homepage {
|
||||||
.banner {
|
.banner {
|
||||||
background: url(../images/background-banner.png) no-repeat;
|
background: url(../images/background-banner.png) no-repeat;
|
||||||
@@ -213,3 +234,257 @@ html {
|
|||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-position: center;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -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="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@@ -23,11 +23,13 @@
|
|||||||
</ol>
|
</ol>
|
||||||
</div>
|
</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>
|
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>
|
câu chuyện thương hiệu của bạn</p>
|
||||||
<a href=""
|
<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
|
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>
|
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="grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white">
|
||||||
<div class="image rounded-[12px] overflow-hidden h-[190px]">
|
<div class="image rounded-[12px] overflow-hidden h-[190px]">
|
||||||
<img src="../../assets/images/image-create.png" class="block w-full h-[190px] object-cover"
|
<img src="../../assets/images/image-create.png" class="block w-full h-[190px] object-cover"
|
||||||
@@ -55,8 +57,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-[100px] content-tammoi">
|
||||||
<div class="pt-[100px]">
|
|
||||||
<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
|
<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>
|
bạn</h2>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@@ -86,8 +87,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
|
||||||
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
|
|
||||||
id="tyle">
|
id="tyle">
|
||||||
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Khởi chạy nhanh chóng
|
<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>
|
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
|
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>
|
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=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
|
||||||
<div class="effect-image">
|
<div class="effect-image">
|
||||||
@@ -122,15 +122,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
|
||||||
<div class="py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
|
|
||||||
id="tyle">
|
id="tyle">
|
||||||
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Xây dựng thương hiệu
|
<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>
|
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
|
<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>
|
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=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
|
||||||
<div class="effect-image">
|
<div class="effect-image">
|
||||||
@@ -157,7 +156,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</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">
|
id="tyle">
|
||||||
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Phát triển linh hoạt
|
<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>
|
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
|
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>
|
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=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
|
||||||
<div class="effect-image">
|
<div class="effect-image">
|
||||||
@@ -193,7 +192,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</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">
|
id="tyle">
|
||||||
<h2 class="text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Giữ nguyên trang web
|
<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>
|
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ử
|
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>
|
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=" mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
|
||||||
<div class="effect-image">
|
<div class="effect-image">
|
||||||
@@ -229,7 +228,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</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">
|
<div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
|
||||||
<h2
|
<h2
|
||||||
class="pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize ">
|
class="pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize ">
|
||||||
|
|||||||
@@ -21,7 +21,6 @@
|
|||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="uppercase text-[14px] text-center my-[50px] ">Bắt đầu dùng thử miễn phí</p>
|
<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>
|
<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>
|
các thương hiệu phát triển nhanh lại chọn xStore</h1>
|
||||||
|
|||||||
@@ -1,32 +1,36 @@
|
|||||||
<div class="homepage">
|
<div class="homepage">
|
||||||
<div class="banner">
|
<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">
|
||||||
với nền tảng thương mại điện tử được đánh giá cao nhất</h2>
|
<h2 class="title text-center text-[36px] font-[600] leading-[49px] pt-[64px] ">Phát triển thương hiệu của
|
||||||
<a href=""
|
bạn <br>
|
||||||
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
|
với nền tảng thương mại điện tử được đánh giá cao nhất</h2>
|
||||||
đầu dùng
|
<a href=""
|
||||||
thử miễn phí</a>
|
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
|
||||||
<div class="w-[850px] mx-auto grid grid-cols-3">
|
đầu dùng
|
||||||
<div class="item border-r-[1px] border-[#8A8A8A]">
|
thử miễn phí</a>
|
||||||
<i class="icon_2025 checkbox mx-auto"></i>
|
<div class="tieuchi w-[850px] mx-auto grid grid-cols-3">
|
||||||
<p class="mt-[15px] text-center text-[16px] font-[400]">Được tin tưởng trong ngành <br> thương mại
|
<div class="item border-r-[1px] border-[#8A8A8A]">
|
||||||
điện tử</p>
|
<i class="icon_2025 checkbox mx-auto"></i>
|
||||||
</div>
|
<p class="mt-[15px] text-center text-[16px] font-[400]">Được tin tưởng trong ngành <br> thương mại
|
||||||
<div class="item border-r-[1px] border-[#8A8A8A]">
|
điện tử</p>
|
||||||
<i class="icon_2025 boxreview mx-auto"></i>
|
</div>
|
||||||
<p class="mt-[15px] text-center text-[16px] font-[400]">Được đánh giá cao nhất cho các <br> doanh
|
<div class="item border-r-[1px] border-[#8A8A8A]">
|
||||||
nghiệp vừa
|
<i class="icon_2025 boxreview mx-auto"></i>
|
||||||
và nhỏ
|
<p class="mt-[15px] text-center text-[16px] font-[400]">Được đánh giá cao nhất cho các <br> doanh
|
||||||
</p>
|
nghiệp vừa
|
||||||
</div>
|
và nhỏ
|
||||||
<div class="item">
|
</p>
|
||||||
<i class="icon_2025 cart mx-auto"></i>
|
</div>
|
||||||
<p class="mt-[15px] text-center text-[16px] font-[400]">Nền tảng thương mại điện tử được <br> đánh
|
<div class="item">
|
||||||
giá cao
|
<i class="icon_2025 cart mx-auto"></i>
|
||||||
nhất</p>
|
<p class="mt-[15px] text-center text-[16px] font-[400]">Nền tảng thương mại điện tử được <br> đánh
|
||||||
|
giá cao
|
||||||
|
nhất</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container mt-[50px] pb-[40px] effect-image">
|
|
||||||
|
<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%"
|
<img src="../../assets/images/box-fontend.png" class="block w-full h-[450px]" width="100%" height="100%"
|
||||||
alt="banner">
|
alt="banner">
|
||||||
</div>
|
</div>
|
||||||
@@ -34,58 +38,65 @@
|
|||||||
|
|
||||||
<div class="box-benefit py-[80px]">
|
<div class="box-benefit py-[80px]">
|
||||||
<div class="container">
|
<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
|
nhận được những gì khi
|
||||||
sử dụng nền tảng xStore?</h2>
|
sử dụng nền tảng xStore?</h2>
|
||||||
<div class="grid grid-cols-3 gap-[20px]">
|
<div class="list grid grid-cols-3 gap-[20px]">
|
||||||
<div class="item">
|
<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%]">
|
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
|
||||||
<i class="icon_2025 up"></i>
|
<i class="icon_2025 up"></i>
|
||||||
</div>
|
</div>
|
||||||
<b class="title text-[20px] font-bold block my-[16px]">Tăng doanh thu nhanh hơn</b>
|
<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
|
triển thương mại điện
|
||||||
tử của bạn.</p>
|
tử của bạn.</p>
|
||||||
</div>
|
</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%]">
|
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
|
||||||
<i class="icon_2025 thuhut"></i>
|
<i class="icon_2025 thuhut"></i>
|
||||||
</div>
|
</div>
|
||||||
<b class="title text-[20px] font-bold block my-[16px]">Thu hút nhiều khách hàng hơn.</b>
|
<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
|
biến người truy cập trang
|
||||||
web thành khách hàng</p>
|
web thành khách hàng</p>
|
||||||
</div>
|
</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%]">
|
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
|
||||||
<i class="icon_2025 tietkiem"></i>
|
<i class="icon_2025 tietkiem"></i>
|
||||||
</div>
|
</div>
|
||||||
<b class="title text-[20px] font-bold block my-[16px]">Tiết kiệm chi phí</b>
|
<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>
|
tranh</p>
|
||||||
</div>
|
</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%]">
|
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
|
||||||
<i class="icon_2025 setting"></i>
|
<i class="icon_2025 setting"></i>
|
||||||
</div>
|
</div>
|
||||||
<b class="title text-[20px] font-bold block my-[16px]">Xây dựng theo cách của bạn</b>
|
<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>
|
tự do tùy chỉnh.</p>
|
||||||
</div>
|
</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%]">
|
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
|
||||||
<i class="icon_2025 up-sale"></i>
|
<i class="icon_2025 up-sale"></i>
|
||||||
</div>
|
</div>
|
||||||
<b class="title text-[20px] font-bold block my-[16px]">Tăng doanh số bán hàng</b>
|
<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>
|
bán hàng trực tuyến.</p>
|
||||||
</div>
|
</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%]">
|
<div class="box-icon w-[50px] h-[50px] flex items-center justify-center bg-[#EFF0EF] rounded-[50%]">
|
||||||
<i class="icon_2025 support"></i>
|
<i class="icon_2025 support"></i>
|
||||||
</div>
|
</div>
|
||||||
<b class="title text-[20px] font-bold block my-[16px]">Đội ngũ hỗ trợ tin cậy</b>
|
<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>
|
khách hàng</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -94,8 +105,9 @@
|
|||||||
|
|
||||||
<div class="box-platforms pt-[90px] ">
|
<div class="box-platforms pt-[90px] ">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="bg-[#F2F2F6] py-[50px] px-[100px]">
|
<div class="content-platforms 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>
|
<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="box-item grid grid-cols-2 rounded-[12px] overflow-hidden mb-[55px]">
|
||||||
<div class="content bg-white py-[60px] px-[20px]">
|
<div class="content bg-white py-[60px] px-[20px]">
|
||||||
@@ -228,17 +240,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="box-product-sell my-[100px]" data-aos="fade-up" data-aos-delay="200">
|
||||||
<div class="box-product-sell my-[100px]">
|
|
||||||
<div class="container">
|
<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>
|
<div>
|
||||||
<a href="" class="effect-image overflow-hidden block w-full h-[258px]">
|
<a href="" class="effect-image overflow-hidden block w-full h-[258px]">
|
||||||
<img src="../../assets/images/image-sell.png"
|
<img src="../../assets/images/image-sell.png"
|
||||||
class="w-full h-full block rounded-[12px] object-cover overflow-hidden" alt="">
|
class="w-full h-full block rounded-[12px] object-cover overflow-hidden" alt="">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</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ừ
|
<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
|
chuyên gia
|
||||||
tư
|
tư
|
||||||
@@ -265,7 +276,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="box-tamnhin mb-[105px]">
|
<div class="box-tamnhin mb-[105px]">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="background-tamnhin py-[45px]">
|
<div class="background-tamnhin py-[45px]">
|
||||||
|
|||||||
@@ -1,10 +1,76 @@
|
|||||||
<div class="footer bg-[#00112B] text-white">
|
<div class="footer bg-[#00112B] text-white">
|
||||||
<div class="container">
|
<div class="footer-pc">
|
||||||
<div class="main-footer pt-[50px] pb-[35px]">
|
<div class="container">
|
||||||
<div class="grid grid-cols-4 gap-[90px]">
|
<div class="main-footer pt-[50px] pb-[35px]">
|
||||||
<div class="item-footer">
|
<div class="grid grid-cols-4 gap-[90px]">
|
||||||
<h3 class="title text-[19px] font-bold mb-[20px] ">Về chúng tôi</h3>
|
<div class="item-footer">
|
||||||
<div class="content">
|
<h3 class="title text-[19px] font-bold mb-[20px] ">Về chúng tôi</h3>
|
||||||
|
<div class="content">
|
||||||
|
<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">
|
||||||
|
<h3 class="title text-[19px] font-bold mb-[20px] ">Dịch vụ</h3>
|
||||||
|
<div class="content">
|
||||||
|
<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">
|
||||||
|
<h3 class="title text-[19px] font-bold mb-[20px] ">Hỗ trợ</h3>
|
||||||
|
<div class="content">
|
||||||
|
<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">
|
||||||
|
<h3 class="title text-[19px] font-bold mb-[20px] ">Hợp tác</h3>
|
||||||
|
<div class="content">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom flex items-center justify-between pb-[30px] ">
|
||||||
|
|
||||||
|
<img src="../../assets/images/logo-footer.png" class="block h-[62px] object-contain " alt="logo">
|
||||||
|
<div class="text-right text-[12px]">
|
||||||
|
<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 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"
|
<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,
|
class="text-[14px] block mb-[10px] hover:underline">Địa chỉ: Tầng 5 - Số 3,
|
||||||
ngõ 18 Yên Lãng, Đống Đa, Hà
|
ngõ 18 Yên Lãng, Đống Đa, Hà
|
||||||
@@ -15,9 +81,13 @@
|
|||||||
hotro@hurasoft.com</a>
|
hotro@hurasoft.com</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-footer">
|
<div class="item-footer border-b-[1px] border-[#fff]">
|
||||||
<h3 class="title text-[19px] font-bold mb-[20px] ">Dịch vụ</h3>
|
<div class="flex items-center justify-between py-[13px]" onclick="toggleFooter(this)">
|
||||||
<div class="content">
|
<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">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">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">Yêu cầu bản demo</a>
|
||||||
@@ -27,9 +97,12 @@
|
|||||||
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Trở thành đối tác</a>
|
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Trở thành đối tác</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-footer">
|
<div class="item-footer border-b-[1px] border-[#fff]">
|
||||||
<h3 class="title text-[19px] font-bold mb-[20px] ">Hỗ trợ</h3>
|
<div class="flex items-center justify-between py-[13px]" onclick="toggleFooter(this)">
|
||||||
<div class="content">
|
<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">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">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">Cộng đồng nhà phát triển</a>
|
||||||
@@ -37,9 +110,12 @@
|
|||||||
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Tài liệu chủ đề</a>
|
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Tài liệu chủ đề</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-footer">
|
<div class="item-footer border-b-[1px] border-[#fff]">
|
||||||
<h3 class="title text-[19px] font-bold mb-[20px] ">Hợp tác</h3>
|
<div class="flex items-center justify-between py-[13px]" onclick="toggleFooter(this)">
|
||||||
<div class="content">
|
<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ề
|
<a href="/gioi-thieu" class="text-[14px] block mb-[10px] hover:underline">Giới thiệu về
|
||||||
chúng tôi
|
chúng tôi
|
||||||
</a>
|
</a>
|
||||||
@@ -47,14 +123,14 @@
|
|||||||
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Tìm đối tác</a>
|
<a href="#" class="text-[14px] block mb-[10px] hover:underline">Tìm đối tác</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="footer-bottom flex items-center justify-between pb-[30px] ">
|
|
||||||
|
|
||||||
<img src="../../assets/images/logo-footer.png" class="block h-[62px] object-contain " alt="logo">
|
<div class="footer-bottom py-[20px] ">
|
||||||
<div class="text-right text-[12px]">
|
<img src="../../assets/images/logo-footer.png" class="block h-[50px] object-contain " alt="logo">
|
||||||
<p>© Copyright 2025 xStore</p>
|
<div class="mt-[20px] text-[14px]">
|
||||||
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,155 +1,384 @@
|
|||||||
<header class="sticky top-0 left-0 w-full bg-white z-[999] shadow-[0_0_2px_0px_#e7e7e7]">
|
<header class="sticky top-0 left-0 w-full bg-white z-[999] shadow-[0_0_2px_0px_#e7e7e7]">
|
||||||
<div class="relative bg-white z-[99]">
|
<div class="header-pc">
|
||||||
<div class="container">
|
<div class="relative bg-white z-[99]">
|
||||||
<div class="header flex items-center py-[15px] justify-between">
|
<div class="container">
|
||||||
<div class="header-left flex items-center">
|
<div class="header flex items-center py-[15px] justify-between">
|
||||||
<a href="/" class="logo h-[26px] block mr-[130px]">
|
<div class="header-left flex items-center">
|
||||||
<img src="../../assets/images/logo.png" class="block w-full h-full object-contain" width="100%"
|
<a href="/" class="logo h-[26px] block mr-[130px]">
|
||||||
height="100%" alt="logo" />
|
<img src="../../assets/images/logo.png" class="block w-full h-full object-contain"
|
||||||
</a>
|
width="100%" height="100%" alt="logo" />
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<i class="fa-solid fa-sort-down text-[10px]"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<a href="/pricing" class="hover:underline font-[600]">
|
|
||||||
Bảng giá
|
|
||||||
</a>
|
</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="header-right flex items-center justify-end gap-[10px]">
|
</div>
|
||||||
<a href="/dang-nhap"
|
</div>
|
||||||
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
|
<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] "
|
||||||
nhập</a>
|
id="box-menu">
|
||||||
<a href="/dang-ky"
|
<div class="container">
|
||||||
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
|
<div class="hidden content-menu" id="tinhnang">
|
||||||
ký</a>
|
<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>
|
</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="header-mobile">
|
||||||
id="box-menu">
|
<div class="relative bg-white z-[99] py-[15px]">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="hidden content-menu" id="tinhnang">
|
<div class="header-main flex items-center justify-between">
|
||||||
<div class="grid grid-cols-4 gap-[30px]">
|
<a href="/" class="logo h-[26px] block">
|
||||||
<div class="col-span-2 pb-[20px]">
|
<img src="../../assets/images/logo.png" class="block w-full h-full object-contain" width="100%"
|
||||||
<div
|
height="100%" alt="logo" />
|
||||||
class="title text-[16px] font-[400] uppercase py-[16px] border-b-[1px] border-[#d3d3d3] text-[#4C4B58] mb-[16px] ">
|
</a>
|
||||||
Học hỏi và phát triển</div>
|
<div class="header-right flex gap-[10px] items-center justify-end">
|
||||||
|
<a href=""
|
||||||
<div class="grid grid-cols-2 gap-[25px]">
|
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
|
||||||
<div>
|
đầu dùng
|
||||||
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)] ">Trung
|
thử miễn phí</a>
|
||||||
tâm trợ
|
<a href="javascript:void(0)" onclick="showMenuMb()"
|
||||||
giúp</a>
|
class="show-menu w-[30px] block leading-[100%] text-center">
|
||||||
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Hỗ
|
<i class="fa fa-bars text-[18px]"></i>
|
||||||
trợ đẳng cấp thế giới, 24/7</a>
|
</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>
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
<div class="hidden content-menu" id="hotro">
|
</div>
|
||||||
<div class="grid grid-cols-4 gap-[30px]">
|
<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]"
|
||||||
<div class="col-span-3 py-[20px]">
|
id="js-menu-mobile">
|
||||||
<div class="grid grid-cols-3 gap-[25px] pb-[20px]">
|
<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>
|
<div>
|
||||||
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)] ">Tạo
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)] ">Tạo
|
||||||
mới</a>
|
mới</a>
|
||||||
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Thiết kế một cử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>
|
hàng trực tuyến đẹp mắt.</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -162,13 +391,15 @@
|
|||||||
<div>
|
<div>
|
||||||
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Vận
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Vận
|
||||||
hành</a>
|
hành</a>
|
||||||
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tăng hiệu quả với
|
<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>
|
nền tảng đáng tin cậy.</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Chuyển
|
<a href="" class="block mb-[5px] font-bold hover:text-[var(--color-blue)]">Chuyển
|
||||||
đổi</a>
|
đổi</a>
|
||||||
<a href="" class="text-[#8A8A8A] hover:text-[var(--color-blue)]">Tạo quy trình thanh
|
<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>
|
toán nhanh chóng, đơn giản và có khả năng chuyển đổi.</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -178,44 +409,52 @@
|
|||||||
trường mới và nhiều hơn nữa.</a>
|
trường mới và nhiều hơn nữa.</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="js-article-menu" class="p-[20px] bg-[#edeff3]">
|
||||||
|
<div class="item grid grid-cols-4">
|
||||||
<div id="js-article-menu" class="p-[20px] bg-[#edeff3]">
|
<a href="" class="image-article h-[150px] block rounded-[8px_0_0_8px] overflow-hidden ">
|
||||||
<div class="item">
|
<img src="../../assets/images/image-article.png"
|
||||||
<a href=""
|
class="block w-full h-full object-cover " width="100%" height="100%"
|
||||||
class="image-article block w-full h-[165px] rounded-[8px_8px_0_0] overflow-hidden ">
|
alt="article">
|
||||||
<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>
|
</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>
|
||||||
|
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="opacity-50 z-[1] hidden top-[100%] w-full h-screen bg-[#121118] absolute right-0 transition-all duration-300 "
|
<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()">
|
id="background-opacity" onclick="closeBackgorund()">
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -12,6 +12,7 @@
|
|||||||
rel="stylesheet">
|
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://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 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" />
|
<link rel="stylesheet" href="{{ 'style.css' | asset_url }}?v=1.2" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@@ -31,6 +32,7 @@
|
|||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
<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://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>
|
<script src="../../assets/js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user