Push code 2021

asset/css/magiczoom.css

@@ -0,0 +1,97 @@
+.MagicZoom,
+.MagicZoom:hover {
+    outline: 0 !important;
+    margin: auto;
+    display: block !important;
+}
+
+.MagicZoom img {
+    border: 0 !important;
+    outline: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important
+}
+
+.MagicZoomHint {
+    background: url(/includes/images/hint.gif) no-repeat 2px 50%;
+    color: #444;
+    font-size: 8pt;
+    font-family: sans-serif;
+    line-height: 24px;
+    min-height: 24px;
+    text-align: left;
+    text-decoration: none;
+    margin: 0;
+    padding: 2px 2px 2px 20px !important
+}
+
+.MagicZoomExternalTitle {
+    display: none
+}
+
+.MagicZoomBigImageCont {
+    background: #fff;
+    border: 1px solid #999
+}
+
+.MagicZoomBigImageCont * {
+    display: inline
+}
+
+.MagicZoomBigImageCont img {
+    max-width: none !important;
+    max-height: none !important;
+    height: auto !important;
+    width: auto !important
+}
+
+.MagicZoomHeader {
+    background: #666;
+    color: #fff;
+    font-size: 10pt !important;
+    line-height: normal !important;
+    text-align: center !important
+}
+
+.MagicZoomPup {
+    background: #fff;
+    border: 1px solid #aaa;
+    cursor: move
+}
+
+.MagicZoomLoading {
+    background: #fff url(/includes/images/loader.gif) no-repeat 2px 50%;
+    border: 1px solid #ccc;
+    color: #444;
+    font-family: sans-serif;
+    font-size: 8pt;
+    line-height: 1.5em;
+    text-align: left;
+    text-decoration: none;
+    margin: 0;
+    padding: 4px 4px 4px 24px !important
+}
+
+/* Style of shadow effect behind zoomed image */
+.MagicBoxShadow {
+    -moz-box-shadow: 3px 3px 4px #888888;
+    -webkit-box-shadow: 3px 3px 4px #888888;
+    box-shadow: 3px 3px 4px #888888;
+    border-collapse: separate;
+    /* For IE 5.5 - 7 */
+    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888888') !important;
+    /* For IE 8 */
+    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888888')" !important;
+}
+
+/* Style of glow effect behind zoomed image */
+.MagicBoxGlow {
+    -moz-box-shadow: 0px 0px 4px 4px #888888;
+    -webkit-box-shadow: 0px 0px 4px 4px #888888;
+    box-shadow: 0px 0px 4px 4px #888888;
+    border-collapse: separate;
+    /* For IE 5.5 - 7 */
+    filter: progid:DXImageTransform.Microsoft.Glow(Strength=4, Color='#888888') !important;
+    /* For IE 8 */
+    -ms-filter: "progid:DXImageTransform.Microsoft.Glow(Strength=4, Color='#888888')" !important;
+}

asset/css/style-mobile.css

@@ -0,0 +1,770 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@600&display=swap');
+@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+}
+
+body {
+    color: #222;
+    font-family: 'Roboto', sans-serif;
+    background: #edeef2;
+    position: relative;
+    min-width: 1280px;
+    font-size: 14px;
+}
+
+a {
+    color: #222;
+    text-decoration: none;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+.ul,
+.ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.container-mb {
+    max-width: 640px;
+    margin: 0 auto;
+    padding: 0 auto;
+    overflow: hidden;
+}
+
+.container {
+    width: 100%;
+    padding-left: 8px;
+    padding-right: 8px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.header {
+    height: 48px;
+    width: 100%;
+    max-width: 640px;
+    margin: auto;
+    background-color: #546ce8;
+    position: relative;
+}
+
+.header .logo-mb {
+    float: left;
+    width: 39px;
+    height: 39px;
+    overflow: hidden;
+    margin: 4px 0;
+}
+
+.header .main-search {
+    border-radius: 4px;
+    background: #fff;
+    position: relative;
+    margin: 0 175px 0 40px;
+    display: block;
+    top: 7px;
+}
+
+.header .main-search input {
+    display: block;
+    padding: 0 10px;
+    background: #fff;
+    border: 0;
+    font-size: 14px;
+    width: calc(100% - 35px);
+    height: 34px;
+    border-radius: 3px;
+    line-height: 32px;
+}
+
+.header .main-search .btn-submit {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 7px 9px;
+    font-size: 14px;
+    color: #333;
+    text-transform: uppercase;
+    background: #fff;
+    border: 0;
+    border-radius: 0 3px 3px 0;
+    height: 34px;
+}
+
+.header .history-product {
+    width: 60px;
+    height: 47px;
+    position: absolute;
+    top: 0;
+    right: 99px;
+    color: #fff;
+    padding: 10px 3px;
+    font-size: 11px;
+    line-height: 1.3;
+}
+
+.header .history-product::before {
+    content: '';
+    width: 0;
+    height: 0;
+    border-top: 5px solid #fff;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    position: absolute;
+    right: 8px;
+    bottom: 13px;
+}
+
+.header .cart-item {
+    display: inline-block;
+    width: 35px;
+    height: 48px;
+    position: absolute;
+    top: 0;
+    right: 60px;
+    padding-left: 5px;
+}
+
+.header .cart-item::before {
+    position: absolute;
+    border-left: 1px solid #4b61d0;
+    border-right: 1px solid #657bea;
+    top: 0;
+    margin-left: 0;
+    width: 0;
+    height: 48px;
+    content: "";
+    left: 0;
+}
+
+.header .cart-item .fa-shopping-cart {
+    color: #fff;
+    width: 26px;
+    height: 20px;
+    display: block;
+    margin: 14px auto;
+    font-size: 20px;
+}
+
+.header .cart-item span {
+    width: 18px;
+    height: 18px;
+    background: #ffe401;
+    text-align: center;
+    font-size: 12px;
+    color: #333;
+    border-radius: 20px;
+    position: absolute;
+    top: 6px;
+    right: -3px;
+}
+
+.header .menu-mb {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 12;
+    background: #546ce8;
+    padding: 9px 0 4px;
+    width: 50px;
+    cursor: pointer;
+    height: 35px;
+    text-align: center;
+    color: #fff;
+}
+
+.header .menu-mb::before {
+    position: absolute;
+    border-left: 1px solid #4b61d0;
+    border-right: 1px solid #657bea;
+    top: 0;
+    margin-left: 0;
+    width: 0;
+    height: 48px;
+    content: "";
+    left: 0;
+}
+
+.header .menu-mb span {
+    display: block;
+    width: 27px;
+    height: 2px;
+    background: #fff;
+    margin: 3px auto;
+}
+
+.marquee {
+    width: 100%;
+    background-color: #334ac2;
+    height: 32px;
+    line-height: 32px;
+    color: #fff;
+}
+
+.list-category {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.list-category .item-category {
+    height: 35px;
+    border: 1px solid #546ce8;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 5px 5px 5px;
+    width: 25%;
+    border-radius: 5px;
+    color: #546ce8;
+    font-size: 12px;
+}
+
+.list-home-show {
+    display: flex;
+}
+
+.list-home-show .item-home {
+    width: 33.3%;
+    height: 35px;
+    border: 1px solid #546ce8;
+    margin: 0 5px 5px 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    color: #546ce8;
+    background: #e7e7e7;
+    font-size: 12px;
+}
+
+.product-hot {
+    padding-top: 5px;
+}
+
+.product-hot .title {
+    color: red;
+    padding: 15px 0;
+}
+
+.product-hot .list-tab {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.list-tab .item-tab {
+    width: 18%;
+    height: 40px;
+    margin: 0 5px 5px 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    padding: 10px;
+    text-align: center;
+    border-radius: 3px;
+    background: #e7e7e7;
+}
+
+.list-tab .item-tab.active {
+    background-color: red;
+    color: white;
+    border: 1px solid red;
+    font-weight: 600;
+}
+
+.product-content {
+    display: flex;
+    flex-wrap: wrap;
+    border-top: 1px solid rgb(216, 216, 216);
+    border-left: 1px solid rgb(216, 216, 216);
+}
+
+.item_product {
+    width: calc(100% / 3);
+    padding: 10px;
+    border-right: 1px solid rgb(216, 216, 216);
+    border-bottom: 1px solid rgb(216, 216, 216);
+}
+
+.item_product .item_img {
+    display: block;
+    position: relative;
+    padding-bottom: 200px;
+    margin-bottom: 5px;
+}
+
+.fix_img {
+    width: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-width: 100%;
+    max-height: 100%;
+    margin: auto;
+}
+
+.item_product .icon_sale-hot {
+    background: url(../img/sale.png) no-repeat;
+    width: 55px;
+    height: 45px;
+    position: absolute;
+    top: 0;
+    left: -5%;
+    background-position: center;
+    background-size: cover;
+}
+
+.item_product .item-name {
+    display: block;
+    font-size: 13px;
+    height: 30px;
+    overflow: hidden;
+    text-decoration: none;
+    color: black;
+    margin: 6px 0;
+}
+
+.item_product .item-name:hover {
+    color: #3d52bf;
+}
+
+.item_product .content-price {
+    position: relative;
+    margin: 6px 0;
+    height: 45px;
+}
+
+.item_product .item-old-price {
+    display: block;
+    font-weight: bold;
+    color: #999999;
+}
+
+.item_product .item-discount {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 45px;
+    height: 45px;
+    background: url(../img/sale-product.png) no-repeat;
+    line-height: 45px;
+    text-align: center;
+    color: #fff;
+    font-weight: bold;
+}
+
+.item_product .item-price {
+    display: block;
+    font-size: 18px;
+    color: #fd3620;
+    font-weight: 700;
+}
+
+.show-all {
+    margin: 20px 0;
+    border: 1px solid #334ac2;
+    display: block;
+    text-align: center;
+    padding: 10px 0;
+    border-radius: 5px;
+    color: #334ac2;
+}
+
+.product-history {
+    margin: 10px 0;
+}
+
+.product-history .title {
+    color: black;
+    font-size: 18px;
+    padding: 10px 0;
+}
+
+.product-history .list-history {
+    display: flex;
+    overflow-y: hidden;
+    overflow-x: scroll;
+}
+
+.item-history {
+    width: 25%;
+    display: flex;
+    flex-direction: column;
+    padding-right: 10px;
+    align-items: center;
+    flex-shrink: 0;
+}
+.item-history img{
+    max-width: 75px;
+    object-fit: contain;
+    object-position: center;
+}
+.item-history .product-name{
+    margin: 8px 0;
+    font-size: 13px;
+    color: #222222;
+}
+.service .item{
+    background-color: #546ce8;
+    display: inline-block;
+    width: 100%;
+    height: 80px;
+}
+.service .item .border-item{
+    border: 1px solid #fff;
+    margin: 6px;
+    padding: 20px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 70px;
+}
+.service .item .border-item .icon-policy1{
+    width: 65px;
+    height: 45px;
+    display: inline-block;
+    background: url(../img/icon-policy.png);
+}
+.service .item .border-item .icon-policy2 {
+    width: 65px;
+    height: 45px;
+    display: inline-block;
+    background: url(../img/icon-policy.png);
+    background-position: 0 109px;
+}
+.service .item .border-item .icon-policy3 {
+    width: 65px;
+    height: 45px;
+    display: inline-block;
+    background: url(../img/icon-policy.png);
+    background-position: 0 48px;
+}
+.service .item .border-item  span {
+    font-size: 20px;
+    text-transform: uppercase;
+    color: #fff;
+    font-weight: 600;
+    margin-left: 10px;
+}
+.custom-nav .owl-nav button i {
+    font-size: 24px;
+    padding: 5px;
+    color: #333;
+}
+.custom-nav .owl-nav .owl-prev {
+    left: 0;
+    border-radius: 0 4px 4px 0;
+    background: #e6e6e6 !important;
+}
+.custom-nav .owl-nav .owl-next {
+    right: 0;
+    border-radius: 0 4px 4px 0;
+    background: #e6e6e6 !important;
+}
+.custom-nav .owl-nav button {
+    position: absolute;
+    color: #999 !important;
+    top: 50%;
+    -webkit-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+    outline: none;
+    z-index: 99999;
+    opacity: .5;
+    -webkit-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+}
+.blog-home .title{
+    padding: 13px 0;
+    display: block;
+    overflow: hidden;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333;
+    border-bottom: 1px solid #e2e2e2;
+}
+.blog-home .read-all{
+     margin: 20px 0;
+     border: 1px solid #334ac2;
+     display: block;
+     text-align: center;
+     padding: 10px 0;
+     border-radius: 5px;
+     color: #334ac2;
+}
+.footer-main{
+    background-color: white;
+    overflow: hidden;
+    margin-top: 5px;
+}
+.footer-main .item{
+    width: 100%;
+}
+.footer-main .item h3{
+    position: relative;
+    background-color: #334ac2;
+    padding: 10px;
+    margin: 4px 0;
+    color: white;
+}
+.footer-main .item h3 i{
+    position: absolute;
+    font-size: 18px;
+    right: 5px;
+}
+.footer-about .item a {
+    display: block;
+    margin: 10px 0;
+}
+.footer-main .item i.fa-facebook-square {
+    color: #3b5999;
+    width: 30px;
+    margin-right: 5px;
+}
+.footer-main .item i.fa-youtube {
+    color: #ce0707;
+    width: 30px;
+    margin-right: 5px;
+}
+.footer-showroom{
+    margin-top: 2rem;
+}
+.item-showroom .red{
+    color: #334ac2;
+}
+.footer-bottom{
+    background: #f0eded;
+    overflow: hidden;
+    padding: 10px 0;
+}
+.footer-bottom a{
+    display: inline-block;
+}
+.footer-bottom .show-pc{
+    height: 36px;
+    border: solid 1px #546ce8;
+    display: inline-block;
+    line-height: 36px;
+    padding: 0 15px;
+    border-radius: 3px;
+    color: #546ce8;
+    background: #fff;
+    font-weight: 500;
+    margin-left: 1rem;
+}
+
+/* product-detail */
+.current {
+    padding-top: 10px;
+    color: #526ae7;
+}
+.product-detail{
+    padding: 10px 0;
+}
+.product-detail .name-product{
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+.product-detail .star{
+    display: flex;
+    align-items: center;
+}
+.product-detail .star .img-star {
+    margin-left: 10px;
+    background: url(../img/star_sprite.png) no-repeat;
+    width: 100px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: text-top;
+    background-position: 0 0;
+}
+.product-info{
+    padding: 10px 0;
+}
+
+.product-info .img-thumb {
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    padding: 10px 0;
+}
+.img-thumb .item-thumb {
+    width: 70px;
+    height: 80px;
+    margin-right: 20px;
+    text-align: center;
+}
+.img-thumb .item-thumb .title{
+    padding-top: 5px;
+    font-size: 13px;
+}
+.img-thumb .item-thumb.active {
+    border: 1px solid red;
+    
+}
+.product-summary{
+    display: block;
+    padding: 10px 0;
+}
+.product-summary .item{
+    display: block;
+    margin-bottom: 10px;
+    color: #222;    
+}
+.product-summary .item i {
+    color: #ff9900;
+}
+.product-warranty{padding: 10px 0;}
+.product-showroom{padding-bottom: 10px;}
+.product-showroom .title{color: #222; font-weight: 700;margin-bottom: 10px;}
+.product-showroom .item-khohang{color: #3d52bf;margin-bottom: 5px;}
+
+.content-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding-top: 20px;
+}
+
+.info-option .item-option {
+    position: relative;
+    text-decoration: none;
+    background-color: #f9faff;
+    width: calc(100% / 2 - 10px);
+    margin: 0 10px 10px 0;
+    padding: 15px 5px;
+    text-align: center;
+    color: #222;
+    font-weight: 350;
+    border-radius: 5px;
+    border: 1px solid #e1e1e1;
+}
+
+.info-option .item-option.active {
+    border: 1px solid #526ae7;
+    background: #f9faff;
+    font-weight: bold;
+}
+
+.info-option .item-option .item-name {
+    display: block;
+    font-size: 16px;
+    text-transform: uppercase;
+    padding-bottom: 5px;
+}
+
+.info-option .item-option .item-name input {
+    position: absolute;
+    left: 5%;
+    top: 10%;
+}
+
+.info-option .item-option .variant-price {
+    color: red;
+    font-weight: 700;
+}
+.product-price{background-color: rgb(209, 209, 209);padding: 15px 20px;}
+.product-price .price-title {
+    display: flex;
+    align-items: center;
+}
+.product-spec {
+    padding: 10px 0;
+    border-bottom: 2px solid #334ac2;
+}
+.product-spec .title{color: #334ac2; font-size: 18px; font-weight: 700;}
+.product-desc {
+    padding: 10px 0;
+    border-bottom: 2px solid #334ac2;
+}
+
+.product-desc .title {
+    color: #334ac2;
+    font-size: 18px;
+    font-weight: 700;
+}
+
+
+
+.list-tintuc-new .blog-left {
+    display: flex;
+}
+
+.list-tintuc-new .link-title {
+    font-weight: 700;
+    color: black;
+    height: 45px;
+}
+
+.list-tintuc-new .link-title:hover {
+    color: red;
+}
+
+.list-tintuc-new .blog-new {
+    margin-bottom: 10px;
+}
+
+.list-tintuc-new .blog-left {
+    display: flex;
+}
+
+.content-left {
+    width: 225px;
+    margin-right: 5px;
+}
+
+.list-tintuc-new .content-left .info-tintuc {
+    margin-top: 1rem;
+}
+
+.list-tintuc-new .content-left .info-tintuc span {
+    margin: 0 0 0 12px;
+    font-size: 12px;
+}
+
+@media (max-width:375px){
+    .container-mb {
+        width: 375px;
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

asset/js/main-mb.js

@@ -0,0 +1,38 @@
+$(document).ready(function () {
+            $("#js-slider").owlCarousel({
+                items: 1,
+                autoplay: true,
+                lazyLoad: true,
+                autoplayTimeout: 3000,
+                autoplaySpeed: 1000,
+                dotsSpeed: 1000,
+                navSpeed: 1000,
+                dots: true
+});
+ $("#service-slider").owlCarousel({
+     items: 1,
+     autoplay: false,
+     lazyLoad: true,
+     dotsSpeed: 1000,
+     navSpeed: 1000,
+     dots: false,
+     nav: true,
+    navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>']
+ });
+
+  $("#js-slider-product").owlCarousel({
+      items: 1,
+      autoplay: false,
+      lazyLoad: true,
+      dotsSpeed: 1000,
+      navSpeed: 1000,
+      dots: false,
+      nav: true,
+      navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>']
+  });
+     $("#footer-show .item h3").click(function () {
+         $(this).parent().find(".container").slideToggle();
+     });
+})
+
+

asset/js/main.js

@@ -0,0 +1,339 @@
+$(document).ready(function () {
+    $(window).scroll(function () {
+        if ($(window).scrollTop() > 206) {
+            $(".header").addClass("header-fix");
+        } else {
+            $(".header").removeClass("header-fix");
+        }
+    });
+})
+function tooltip() {
+  var w_tooltip = $("#tooltip").width();
+  var h_tooltip = 0;
+  var pad = 10;
+  var x_mouse = 0;
+  var y_mouse = 0;
+  var wrap_left = 0;
+  var wrap_right = 0;
+  var wrap_top = 0;
+  var wrap_bottom = 0;
+  $(".item_product .item_img").mousemove(function (e) {
+    content_tooltip = $(this).parents(".item_product").find(".hover_content_pro");
+    if (content_tooltip.length == 0) {
+      return;
+      $("#tooltip").hide();
+    }
+    $("#tooltip").html(content_tooltip.html());
+
+    wrap_left = 0;
+    wrap_top = $(window).scrollTop();
+    wrap_bottom = $(window).height();
+    wrap_right = $(window).width();
+    x_mouse = e.pageX;
+    y_mouse = e.pageY;
+    h_tooltip = $("#tooltip").height();
+
+
+    if (x_mouse + w_tooltip > wrap_right) $("#tooltip").css("left", x_mouse - w_tooltip - pad);
+    else $("#tooltip").css("left", x_mouse + pad);
+
+
+    if (y_mouse - h_tooltip < wrap_top) $("#tooltip").css("top", wrap_top);
+    else $("#tooltip").css("top", y_mouse - h_tooltip - pad);
+    $("#tooltip").show();
+
+  });
+
+  $(".item_product .item_img").mouseout(function () {
+    $("#tooltip").hide();
+  });
+}
+tooltip();
+function getImageFancybox() {
+$("#sync2").owlCarousel({
+  items: 4,
+  loop: false,
+  nav: false,
+  dots: false,
+  margin: 10
+});
+}
+getImageFancybox();
+
+// <!------ cart---->
+
+$(document).ready(function () {
+  listenDeleteCartItem()
+  //hien thi tong don hang
+  calculateCartTotalPrice();
+
+  //thay doi so luong chon mua
+  listenQuantityChange();
+
+  //xoa sp
+  listenDeleteCartItem();
+
+});
+
+function check_field_new() {
+
+
+    var number_regex1 = /^[0]\d{9}$/i;
+    var number_regex2 = /^[0]\d{10}$/i;
+    var error = "";
+    var check_name = document.getElementById('buyer_name').value;
+    if (check_name.length < 2) error += "- Bạn chưa nhập tên\n";
+    else if (check_name.indexOf('<script') > -1) {
+      error += "- Họ tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
+    }
+    var sex = $(".sex input[type='radio']:checked").val();
+
+    var check_email = document.getElementById('buyer_email').value;
+    if (check_email.length < 4) {
+      error += "- Bạn chưa nhập email\n";
+    }
+    if (check_email.length > 4) {
+      if (validateEmail(check_email) == false) error += "- Email không hợp lệ\n";
+    }
+
+    var check_tel = document.getElementById('buyer_tel').value;
+    if (check_tel.length < 4) error += "- Bạn chưa nhập SĐT\n";
+    else {
+      if (number_regex1.test(check_tel) == false && number_regex2.test(check_tel) == false) error += "- Số điện thoại chưa chính xác\n";
+    }
+    var check_province = document.getElementById('ship_to_province').value;
+    if (check_province == 0) error += "- Bạn chưa chọn Tỉnh/TP\n";
+
+    if (document.getElementById('ship_to_district')) {
+      var check_district = document.getElementById('ship_to_district').value;
+      if (check_district == 0) error += "- Bạn chưa chọn Quận/Huyện\n";
+    }
+
+    var check_add = document.getElementById('buyer_address').value;
+    if (check_add.length < 5) error += "- Bạn chưa nhập địa chỉ\n";
+    else if (check_add.indexOf('<script') > -1) {
+      error += "- Địa chỉ chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
+    }
+    var check_note = document.getElementById('buyer_note').value;
+    if (check_note.indexOf('<script') > -1) {
+      error += "- Ghi chú chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại\n";
+    }
+
+    if (error != "") {
+      alert(error);
+      // location.reload(); 
+      return false;
+    } else {
+
+      //$('#buyer_name').val(sex+" "+check_name);
+      $("#btn-submit").attr("disabled", "disabled").html("Đang xử lý...");
+
+      var dealInCart = checkDeal2020('.js-item-deal');
+
+      if (dealInCart.length == 0) {
+        $('#formCart').submit();
+      } else {
+        checkDealFromAjax(dealInCart);
+      }
+    }
+
+    //$('#buyer_name').val(sex+" "+check_name);
+    //$("#btn-submit").attr("disabled","disabled").html("Đang xử lý...");
+    return true;
+}
+
+var TOTAL_CART_VALUE_NODE = "#js-total-cart-price";
+
+function listenDeleteCartItem() {
+  $(".delete-from-cart").on("click", function () {
+    if (confirm("Bạn muốn xóa sản phẩm này khỏi giỏ hàng!") == false) {
+      return;
+    }
+
+    var $row = $(this).closest(".js-item-row");
+    var item_type = $row.data("item_type");
+    var item_id = $row.data("item_id");
+
+    calculateCartTotalPrice();
+
+    console.log("deleting item from cart = " + item_type);
+
+    var deleteStatus;
+    //save to cart
+    switch (item_type) {
+      case "product":
+        deleteStatus = Hura.Cart.Product.remove(item_id, $row.data("variant_id"));
+        break;
+
+      case "deal":
+
+        deleteStatus = Hura.Cart.Deal.remove(item_id);
+        break;
+
+      case "combo":
+        deleteStatus = Hura.Cart.Combo.remove(item_id);
+        break;
+
+    }
+
+    if (deleteStatus) {
+      deleteStatus.then(function () {
+        $row.remove();
+        calculateCartTotalPrice();
+        if ($(".js-item-row").length == 0) location.reload();
+      })
+    }
+  })
+}
+//on page ready
+
+//thay doi tong gia cua 1 san pham
+function changeItemTotalPrice() {
+    var $row = $(this).closest(".js-item-row");
+    var item_type = $row.data("item_type");
+    var price = $row.find(".js-buy-price").attr("data-price");
+    var quantity = $row.find(".js-buy-quantity").val();
+    var total_price = price * quantity;
+
+    //loai bo so luong vo ly
+    if (quantity < 0) {
+      $row.find(".js-quantity-change").val(0);
+      total_price = 0;
+    }
+
+    $row.find(".js-total-item-price").html(formatCurrency(total_price));
+
+    calculateCartTotalPrice();
+
+    //console.log("updating cart = " + item_type);
+
+    //save to cart
+    switch (item_type) {
+      case "product":
+        Hura.Cart.Product.update($row.data("item_id"), $row.data("variant_id"), {
+          quantity: quantity
+        });
+        break;
+
+      case "deal":
+
+        Hura.Cart.Deal.update($row.data("item_id"), {
+          quantity: quantity
+        });
+        break;
+
+      case "combo":
+        Hura.Cart.Combo.update($row.data("item_id"), {
+          quantity: quantity
+        });
+        break;
+
+    }
+}
+
+//tinh tong gia don hang
+function calculateCartTotalPrice() {
+  var dom_target = ".total-cart-price";
+  var dom_target_2 = ".total-cart-payment";
+  var total_cart_price = 0;
+
+  $(".total-item-price").each(function () {
+    total_cart_price += Hura.Util.strToNumber($(this).html());
+  });
+
+  //log for other reference
+  $("#js-total-before-fee-discount").val(total_cart_price);
+
+  //giam gia khac: voucher, membership, loyalty point conversion
+  var total_discount = 0;
+  total_discount += parseInt($("#js-discount-voucher").val());
+  total_discount += parseInt($("#js-discount-membership").val());
+
+  //Lưu giá trị voucher cho trang in:
+  var voucher_value = parseInt($("#js-discount-voucher").val());
+
+  //phi khac: shipping, COD...
+  var total_other_fee = 0;
+  total_other_fee += parseInt($("#js-fee-shipping").val());
+  total_other_fee += parseInt($("#js-fee-cod").val());
+
+  $(TOTAL_CART_VALUE_NODE).html(formatCurrency(total_cart_price));
+}
+//nghe thay doi so luong sp
+function listenQuantityChange() {
+  var $track_change = $(".js-quantity-change");
+
+  //thay doi so luong sp mua, neu nhap so luong
+  $track_change.on("change", function (e) {
+    changeItemTotalPrice.call(this);
+  });
+
+  //thay doi so luong sp theo - hoac +
+  $track_change.on("click", function (e) {
+    if (e.target.nodeName === 'INPUT') return;
+
+    var quantity_change = parseInt(this.getAttribute("data-value"));
+    var $row = $(this).closest(".js-item-row");
+    var current_quantity = parseInt($row.find(".js-buy-quantity").val());
+
+    //loai bo so luong vo ly
+    if (current_quantity + quantity_change < 1 && 1 < 2) {
+      $row.find(".js-buy-quantity").val(1);
+      return;
+    }
+
+
+    $row.find(".js-buy-quantity").val(current_quantity + quantity_change);
+
+    //then update
+    changeItemTotalPrice.call(this);
+  });
+}
+
+//nghe xoa san pham
+function listenDeleteCartItem() {
+  $(".delete-from-cart").on("click", function () {
+    var $row = $(this).closest(".js-item-row");
+    var item_type = $row.data("item_type");
+    var item_id = $row.data("item_id");
+
+    // calculateCartTotalPrice();
+    location.reload();
+
+    console.log("deleting item from cart = " + item_type);
+
+    var deleteStatus;
+    //save to cart
+    switch (item_type) {
+      case "product":
+        deleteStatus = Hura.Cart.Product.remove(item_id, $row.data("variant_id"));
+        break;
+
+      case "deal":
+
+        deleteStatus = Hura.Cart.Deal.remove(item_id);
+        break;
+
+      case "combo":
+        deleteStatus = Hura.Cart.Combo.remove(item_id);
+        break;
+
+    }
+
+    if (deleteStatus) {
+      deleteStatus.then(function () {
+        $row.remove();
+      })
+    }
+  })
+}
+
+function _strToNumber(str) {
+  str += ''; //convert to str incase it's already a number
+  while (str.indexOf(".") > 0) {
+    str = str.replace('.', '');
+  }
+  var result = parseFloat(str);
+  return isNaN(result) ? 0 : result;
+}
+// <!----- end cart------>

mobile-detail.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hoanghapc8</title>
+    <link rel="stylesheet" href="./asset/css/style-mobile.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
+        integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
+        crossorigin="anonymous" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
+</head>
+
+<body>
+    <div class="container-mb">
+        <div class="container">
+            <div id="breadcrumb">
+                <a class="current">
+                    <span>Máy tính xách tay - Laptop </span>
+                </a>
+            </div>
+        </div>
+        <div class="product-detail">
+            <div class="container">
+                <h1 class="name-product">Laptop MSI GL65 Leopard 10SCXK 093VN</h1>
+                <div class="star">
+                    <span><b>Mã SP:</b> NBMS0250</span>
+                    <i class="img-star" id="js-avgRate"></i>
+                    (<span id="js-totalReview">0</span>)
+                </div>
+                <div class="product-info">
+                    <div class="slider-product owl-theme owl-carousel custom-nav owl-loaded owl-drag"
+                        id="js-slider-product">
+                        <div class="item">
+                            <img src="http://via.placeholder.com/640x360" alt="">
+                        </div>
+                        <div class="item">
+                            <img src="http://via.placeholder.com/640x360" alt="">
+                        </div>
+                        <div class="item">
+                            <img src="http://via.placeholder.com/640x360" alt="">
+                        </div>
+                    </div>
+                    <div class="img-thumb">
+                            <div class="item-thumb active">
+                                <img src="http://via.placeholder.com/74x36" alt="Laptop MSI GL65 Leopard 10SCXK 093VN">
+                                    <p class="title">Hình sản phẩm</p>
+                            </div>
+                            <div class="item-thumb">
+                                <img src="https://img.youtube.com/vi/q2lsz_yqYL0/default.jpg">
+                                <p>video sản phẩm</p>
+                            </div>
+                    </div>
+                    <div class="product-summary">
+                        <span class="item">
+                            <i class="fa fa-check-circle"></i>
+                             Dung lượng bộ nhớ: 6GB GDDR6
+                        </span>
+                        <span class="item">
+                            <i class="fa fa-check-circle"></i>
+                            Dung lượng bộ nhớ: 6GB GDDR6
+                        </span>
+                        <span class="item">
+                            <i class="fa fa-check-circle"></i>
+                            Dung lượng bộ nhớ: 6GB GDDR6
+                        </span>
+                        <span class="item">
+                            <i class="fa fa-check-circle"></i>
+                            Dung lượng bộ nhớ: 6GB GDDR6
+                        </span>
+                        <span class="item">
+                            <i class="fa fa-check-circle"></i>
+                            Dung lượng bộ nhớ: 6GB GDDR6
+                        </span>
+                    </div>
+                    <div class="product-warranty">
+                        <b>Bảo hành: 36 tháng</b>
+                    </div>
+                    <div class="product-showroom">
+                        <div class="title">Hiện đang có tại showroom : </div>
+                        <p class="item-khohang"> 49 Thái Hà – P. Trung Liệt – Q. Đống Đa – Hà Nội </p>
+                        <p class="item-khohang"> 151 Lê Thanh Nghị, P. Đồng Tâm - Q. Hai Bà Trưng – Hà Nội</p>
+                        <p class="item-khohang"> 158-160 Lý Thường Kiệt – P.14 – Q. 10 – TP HCM </p>
+                        <p class="item-khohang"> 84T/14 Trần Đình Xu – P. Cô Giang – Q. 1 – TP HCM </p>
+                    </div>
+                    <div class="info-option">
+                        <b class="title-option">Tùy chọn sản phẩm</b>
+                        <div class="content-option">
+                            <a href="#" class="item-option active">
+                                <span class="item-name">
+                                    <input type="checkbox" checked="checked">
+                                    Laptop MSI GF64
+                                </span>
+                                <span class="variant-price">23.990.000 đ</span>
+                            </a>
+                            <a href="#" class="item-option">
+                                <span class="item-name">
+                                    <input type="checkbox" checked="checked">
+                                    Laptop MSI GF64
+                                </span>
+                                <span class="variant-price">23.990.000 đ</span>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="product-price">
+                         <span class="price-title">
+                             <p style="font-size:15px;padding-right: 10px;">Giá niên yết:</p>
+                             <p style="text-decoration: line-through;color: darkgray;">27.990.000 đ</p>
+                         </span>
+                         <span class="price-title">
+                             <p style="font-size:15px;padding-right: 10px;">Giá Khuyến mại:</p>
+                             <p style="color: red;font-size: 20px;font-weight: 700;">26.990.000 đ</p>
+                         </span>
+                         <span class="price-title">
+                             <p style="font-size:15px;padding-right: 10px;">Giá online:</p>
+                             <p style="color: #7588ec;font-size: 20px;font-weight: 700;">26.990.000 đ</p>
+                         </span>
+                    </div>
+                    <div class="payment">
+                            <h3 class="title">Chấp nhận thanh toán</h3>
+                            <img src="./asset/img/payment.png" alt="">
+                    </div>
+                </div>
+                <div class="product-spec">
+                    <div class="title">Thông số kĩ thuật</div>
+                    <div class="content-spec"></div>
+                </div>
+                <div class="product-desc">
+                    <div class="title">Mô tả sản phẩm</div>
+                    <div class="content-desc"></div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
+    <script src="./asset/js/main-mb.js"></script>
+
+</body>
+
+</html>