1506 lines
83 KiB
HTML
1506 lines
83 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<title> Local - Mobile </title>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" media="screen" href="scss/lib.css" />
|
|||
|
|
<link rel="stylesheet" media="screen" href="scss/mobile_css.css" />
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<!-- Header -->
|
|||
|
|
<div class="global-header-container">
|
|||
|
|
<div class="d-flex align-items-center">
|
|||
|
|
<a href="#js-global-menu" class="icons icon-menu"></a>
|
|||
|
|
|
|||
|
|
<a href="/" class="header-logo">
|
|||
|
|
<img src="images/logo.png" alt="Đồ gia dụng" width="1" height="1"/>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="d-flex flex-wrap align-items-center">
|
|||
|
|
<a href="javascript:void(0)" class="icons icon-search" id="js-btn-search"></a>
|
|||
|
|
|
|||
|
|
<a href="/taikhoan" class="icons icon-user" title="Tài khoản của bạn"></a>
|
|||
|
|
|
|||
|
|
<a href="/cart" class="icons icon-cart">
|
|||
|
|
<span class="js-cart-count cart-count">0</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="header-search-group" id="js-search-group">
|
|||
|
|
<form method="get" action="/tim" name="search">
|
|||
|
|
<input type="text" id="js-global-search" name="q" placeholder="Từ khóa tìm kiếm" value="" autocomplete="off" class="text-search">
|
|||
|
|
<button type="submit" class="icons icon-search"></button>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<div class="autocomplete-suggestions" id="js-search-holder" style="display: none;"><!-- search data --></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Homepage -->
|
|||
|
|
<div class="homepage" style="display: none;">
|
|||
|
|
<div class="home-banner-group owl-carousel owl-theme custom-dots" id="js-home-slider">
|
|||
|
|
<a href=""><img data-src="images/homepage/slider.png" alt="" width="" height="" class="owl-lazy"/></a>
|
|||
|
|
<a href=""><img data-src="https://via.placeholder.com/1920x660" alt="" width="" height="" class="owl-lazy"/></a>
|
|||
|
|
<a href=""><img data-src="images/homepage/slider.png" alt="" width="" height="" class="owl-lazy"/></a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- category -->
|
|||
|
|
<div class="home-category-group">
|
|||
|
|
<div class="item" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<div class="box-left">
|
|||
|
|
<a href="" class="cat-1">Thiết bị nhà bếp</a>
|
|||
|
|
<a href="">Bếp điện từ - hồng ngoại</a>
|
|||
|
|
<a href="">Máy hút mùi</a>
|
|||
|
|
<a href="">Máy rửa bát</a>
|
|||
|
|
<a href="">Bếp gas âm</a>
|
|||
|
|
|
|||
|
|
<a href="" class="global-btn-view" target="_blank">Xem tất cả</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a href="" class="box-img">
|
|||
|
|
<img src="images/homepage/thiet-bi-nha-bep.png" alt="cat thumb" width="1" height="1" class="lazy"/>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<div class="box-left">
|
|||
|
|
<a href="" class="cat-1">Điện gia dụng</a>
|
|||
|
|
<a href="">Ấm siêu tốc</a>
|
|||
|
|
<a href="">Máy làm mát</a>
|
|||
|
|
<a href="">Bàn là</a>
|
|||
|
|
<a href="">Bếp điện</a>
|
|||
|
|
|
|||
|
|
<a href="" class="global-btn-view" target="_blank">Xem tất cả</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a href="" class="box-img">
|
|||
|
|
<img src="images/homepage/dien-gia-dung.png" alt="cat thumb" width="1" height="1" class="lazy"/>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<div class="box-left">
|
|||
|
|
<a href="" class="cat-1">Đồ gia dụng</a>
|
|||
|
|
<a href="">Bộ nồi inox</a>
|
|||
|
|
<a href="">Chảo chống dính</a>
|
|||
|
|
<a href="">Nồi áp suất</a>
|
|||
|
|
|
|||
|
|
<a href="" class="global-btn-view" target="_blank">Xem tất cả</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a href="" class="box-img">
|
|||
|
|
<img src="images/homepage/do-gia-dung.png" alt="cat thumb" width="1" height="1" class="lazy"/>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<div class="box-left">
|
|||
|
|
<a href="" class="cat-1">Điều hòa</a>
|
|||
|
|
<a href="">Điều hòa treo tường</a>
|
|||
|
|
<a href="">Điều hòa tủ đứng</a>
|
|||
|
|
<a href="">Điều hòa trung tâm</a>
|
|||
|
|
|
|||
|
|
<a href="" class="global-btn-view" target="_blank">Xem tất cả</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a href="" class="box-img">
|
|||
|
|
<img src="images/homepage/dieu-hoa.png" alt="cat thumb" width="1" height="1" class="lazy"/>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Deal -->
|
|||
|
|
<div class="home-deal-group" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<div class="group-title d-flex flex-wrap align-items-center justify-content-center">
|
|||
|
|
<i class="icons icon-bolt" data-aos="fade-up" data-aos-duration="1500"></i>
|
|||
|
|
|
|||
|
|
<h2 class="title" data-aos="fade-up" data-aos-duration="1800">giờ vàng giá sốc</h2>
|
|||
|
|
|
|||
|
|
<div class="w-100 d-flex flex-wrap align-items-center justify-content-center">
|
|||
|
|
<p data-aos="fade-up" data-aos-duration="2000">Kết thúc sau</p>
|
|||
|
|
|
|||
|
|
<div class="global-deal-countdown js-countdown-time"><!-- <b>02</b> <b>32</b> <b>16</b> --></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="product-holder">
|
|||
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<a href="" class="p-img">
|
|||
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<div class="p-text">
|
|||
|
|
<a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a>
|
|||
|
|
|
|||
|
|
<p class="p-price">270.000<u>đ</u></p>
|
|||
|
|
|
|||
|
|
<div class="p-price-group">
|
|||
|
|
<del>465.000<u>đ</u></del>
|
|||
|
|
<span class="p-discount">(Tiết kiệm: 12%)</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="p-deal-group">
|
|||
|
|
<span class="p-line" style="width: 80%;"></span>
|
|||
|
|
|
|||
|
|
<p class="p-sale-quantity">Đã bán 40%</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-2.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-3.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-4.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a href="/deal" class="global-btn-view" target="_blank">Xem tất cả</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Banner -->
|
|||
|
|
<div class="banner-under-deal owl-carousel owl-theme" id="js-banner-under-deal">
|
|||
|
|
<a href="">
|
|||
|
|
<img data-src="images/homepage/banner-under-deal-1.png" alt="banner" width="" height="" class="owl-lazy"/>
|
|||
|
|
</a>
|
|||
|
|
<a href="">
|
|||
|
|
<img data-src="images/homepage/banner-under-deal-2.png" alt="banner" width="" height="" class="owl-lazy"/>
|
|||
|
|
</a>
|
|||
|
|
<a href="">
|
|||
|
|
<img data-src="images/homepage/banner-under-deal-1.png" alt="banner" width="" height="" class="owl-lazy"/>
|
|||
|
|
</a>
|
|||
|
|
<a href="">
|
|||
|
|
<img data-src="images/homepage/banner-under-deal-2.png" alt="banner" width="" height="" class="owl-lazy"/>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- product-category -->
|
|||
|
|
<div class="home-box-group" data-aos="fade-right" data-aos-duration="1300">
|
|||
|
|
<h2 class="box-title">Thiết bị nhà bếp</h2>
|
|||
|
|
|
|||
|
|
<div class="box-holder-left">
|
|||
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<a href="" class="p-img">
|
|||
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<div class="p-text">
|
|||
|
|
<a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a>
|
|||
|
|
|
|||
|
|
<p class="p-price">270.000<u>đ</u></p>
|
|||
|
|
|
|||
|
|
<div class="p-price-group">
|
|||
|
|
<del>465.000<u>đ</u></del>
|
|||
|
|
<span class="p-discount">(Tiết kiệm: 12%)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="box-holder-right">
|
|||
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<a href="" class="p-img">
|
|||
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<div class="p-text">
|
|||
|
|
<a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a>
|
|||
|
|
|
|||
|
|
<p class="p-price">270.000<u>đ</u></p>
|
|||
|
|
|
|||
|
|
<div class="p-price-group">
|
|||
|
|
<del>465.000<u>đ</u></del>
|
|||
|
|
<span class="p-discount">(Tiết kiệm: 12%)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-2.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> </div></div></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a href="" class="global-btn-view" target="_blank" data-aos="fade-up" data-aos-duration="1300">Xem tất cả</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- product-category -->
|
|||
|
|
<div class="home-box-group" data-aos="fade-right" data-aos-duration="1300">
|
|||
|
|
<h2 class="box-title">Điện gia dụng</h2>
|
|||
|
|
|
|||
|
|
<div class="box-holder-left">
|
|||
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<a href="" class="p-img">
|
|||
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<div class="p-text">
|
|||
|
|
<a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a>
|
|||
|
|
|
|||
|
|
<p class="p-price">270.000<u>đ</u></p>
|
|||
|
|
|
|||
|
|
<div class="p-price-group">
|
|||
|
|
<del>465.000<u>đ</u></del>
|
|||
|
|
<span class="p-discount">(Tiết kiệm: 12%)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="box-holder-right">
|
|||
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<a href="" class="p-img">
|
|||
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<div class="p-text">
|
|||
|
|
<a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a>
|
|||
|
|
|
|||
|
|
<p class="p-price">270.000<u>đ</u></p>
|
|||
|
|
|
|||
|
|
<div class="p-price-group">
|
|||
|
|
<del>465.000<u>đ</u></del>
|
|||
|
|
<span class="p-discount">(Tiết kiệm: 12%)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-2.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> </div></div></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a href="" class="global-btn-view" target="_blank" data-aos="fade-up" data-aos-duration="1300">Xem tất cả</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Khách hàng nói về chúng tôi -->
|
|||
|
|
<div class="home-customer-comment-group" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<div class="box-title-group">
|
|||
|
|
<p class="title" data-aos="fade-right" data-aos-duration="1500">Khách hàng nói về chúng tôi</p>
|
|||
|
|
|
|||
|
|
<a href="" class="global-btn-view" target="_blank">Xem tất cả</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="owl-carousel owl-theme custom-dots" id="js-customer-comment-list">
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="image">
|
|||
|
|
<img data-src="images/homepage/comment-1.png" alt="comment" width="1" height="1" class="owl-lazy"/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item-name">
|
|||
|
|
<i style="background-image: url(images/homepage/customer-avatar.png)"></i>
|
|||
|
|
<b>Nguyễn Hồng nhung</b>
|
|||
|
|
<span> - 0383 100 ***</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<i class="icon-star star-5"></i>
|
|||
|
|
|
|||
|
|
<div class="summary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum rerum ipsam accusamus molestias temporibus, libero placeat numquam porro rem! Dolor cumque beatae distinctio harum! Voluptas exercitationem distinctio assumenda aliquid amet.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="image">
|
|||
|
|
<img data-src="images/homepage/comment-2.png" alt="comment" width="1" height="1" class="owl-lazy"/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item-name">
|
|||
|
|
<i style="background-image: url(images/homepage/customer-avatar.png)"></i>
|
|||
|
|
<b>Nguyễn Hồng nhung</b>
|
|||
|
|
<span> - 0383 100 ***</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<i class="icon-star star-5"></i>
|
|||
|
|
|
|||
|
|
<div class="summary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum rerum ipsam accusamus molestias temporibus, libero placeat numquam porro rem! Dolor cumque beatae distinctio harum! Voluptas exercitationem distinctio assumenda aliquid amet.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="image">
|
|||
|
|
<img data-src="images/homepage/comment-3.png" alt="comment" width="1" height="1" class="owl-lazy"/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item-name">
|
|||
|
|
<i style="background-image: url(images/homepage/customer-avatar.png)"></i>
|
|||
|
|
<b>Nguyễn Hồng nhung</b>
|
|||
|
|
<span> - 0383 100 ***</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<i class="icon-star star-5"></i>
|
|||
|
|
|
|||
|
|
<div class="summary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum rerum ipsam accusamus molestias temporibus, libero placeat numquam porro rem! Dolor cumque beatae distinctio harum! Voluptas exercitationem distinctio assumenda aliquid amet.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="image">
|
|||
|
|
<img data-src="images/homepage/comment-4.png" alt="comment" width="1" height="1" class="owl-lazy"/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item-name">
|
|||
|
|
<i style="background-image: url(images/homepage/customer-avatar.png)"></i>
|
|||
|
|
<b>Nguyễn Hồng nhung</b>
|
|||
|
|
<span> - 0383 100 ***</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<i class="icon-star star-5"></i>
|
|||
|
|
|
|||
|
|
<div class="summary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum rerum ipsam accusamus molestias temporibus, libero placeat numquam porro rem! Dolor cumque beatae distinctio harum! Voluptas exercitationem distinctio assumenda aliquid amet.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="image">
|
|||
|
|
<img data-src="images/homepage/comment-1.png" alt="comment" width="1" height="1" class="owl-lazy"/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item-name">
|
|||
|
|
<i style="background-image: url(images/homepage/customer-avatar.png)"></i>
|
|||
|
|
<b>Nguyễn Hồng nhung</b>
|
|||
|
|
<span> - 0383 100 ***</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<i class="icon-star star-5"></i>
|
|||
|
|
|
|||
|
|
<div class="summary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum rerum ipsam accusamus molestias temporibus, libero placeat numquam porro rem! Dolor cumque beatae distinctio harum! Voluptas exercitationem distinctio assumenda aliquid amet.</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- breadcrumb -->
|
|||
|
|
<div class="global-breadcrumb">
|
|||
|
|
<div class="container">
|
|||
|
|
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul clearfix">
|
|||
|
|
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
|||
|
|
<a href="/" itemprop="item" class="nopad-l">
|
|||
|
|
<span itemprop="name">Home</span>
|
|||
|
|
</a>
|
|||
|
|
<meta itemprop="position" content="1">
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
|
|||
|
|
<a href="" itemprop="item" class="nopad-l">
|
|||
|
|
<span itemprop="name"> Danh mục cấp 2 </span>
|
|||
|
|
</a>
|
|||
|
|
<meta itemprop="position" content="2" />
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
|
|||
|
|
<a href="" itemprop="item" class="nopad-l">
|
|||
|
|
<span itemprop="name"> Danh mục cấp 3 </span>
|
|||
|
|
</a>
|
|||
|
|
<meta itemprop="position" content="3" />
|
|||
|
|
</li>
|
|||
|
|
</ol>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Product category -->
|
|||
|
|
<div class="product-page" style="display: none;">
|
|||
|
|
<div class="box-content-holder">
|
|||
|
|
<div class="box-display">
|
|||
|
|
<a href="javascript:void(0)" class="icons icon-grid current"></a>
|
|||
|
|
<a href="javascript:void(0)" class="icons icon-list"></a>
|
|||
|
|
|
|||
|
|
<p>Hiển thị 1–16 trên 60 sản phẩm</p>
|
|||
|
|
|
|||
|
|
<a href="javascript:void(0)" class="btn-filter" onclick="_open_filter();">
|
|||
|
|
<i class="icons icon-filter"></i>
|
|||
|
|
<span>Bộ lọc</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="sort-by-group">
|
|||
|
|
<b>Sắp xếp theo:</b>
|
|||
|
|
<select>
|
|||
|
|
<option value="">Sắp xếp theo</option>
|
|||
|
|
<option value="">option 1</option>
|
|||
|
|
<option value="">option 2</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="product-holder product-display-list">
|
|||
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<a href="" class="p-img">
|
|||
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<div class="p-text">
|
|||
|
|
<a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a>
|
|||
|
|
|
|||
|
|
<p class="p-price">270.000<u>đ</u></p>
|
|||
|
|
|
|||
|
|
<div class="p-price-group">
|
|||
|
|
<del>465.000<u>đ</u></del>
|
|||
|
|
<span class="p-discount">(Tiết kiệm: 12%)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-2.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> </div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-3.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-4.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-5.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-6.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-2.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> </div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-3.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div></div></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="paging" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<a href="" class="prev">Prev</a>
|
|||
|
|
<a href="" class="current">1</a>
|
|||
|
|
<a href="">2</a><a href="">3</a><a href="">4</a>
|
|||
|
|
<a href="" class="next">Next</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="product-filter-container" id="js-filter-container">
|
|||
|
|
<p class="popup-header">Bộ Lọc</p>
|
|||
|
|
|
|||
|
|
<div class="popup-body">
|
|||
|
|
<div class="filter-item">
|
|||
|
|
<p class="filter-title">Thương hiệu</p>
|
|||
|
|
|
|||
|
|
<div class="filter-list">
|
|||
|
|
<a href="" class="current">Filter name</a>
|
|||
|
|
<a href="">Filter name</a>
|
|||
|
|
<a href="">Filter name</a><a href="">Filter name</a><a href="">Filter name</a><a href="">Filter name</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="filter-item">
|
|||
|
|
<p class="filter-title">Khoảng giá</p>
|
|||
|
|
|
|||
|
|
<div class="filter-list">
|
|||
|
|
<a href="" class="current">Filter name</a>
|
|||
|
|
<a href="">Filter name</a>
|
|||
|
|
<a href="">Filter name</a><a href="">Filter name</a><a href="">Filter name</a><a href="">Filter name</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="filter-item">
|
|||
|
|
<p class="filter-title">Attribute</p>
|
|||
|
|
|
|||
|
|
<div class="filter-list">
|
|||
|
|
<a href="" class="current">Filter name</a>
|
|||
|
|
<a href="">Filter name</a>
|
|||
|
|
<a href="">Filter name</a><a href="">Filter name</a><a href="">Filter name</a><a href="">Filter name</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="filter-item">
|
|||
|
|
<p class="filter-title">Attribute</p>
|
|||
|
|
|
|||
|
|
<div class="filter-list">
|
|||
|
|
<a href="" class="current">Filter name</a>
|
|||
|
|
<a href="">Filter name</a>
|
|||
|
|
<a href="">Filter name</a><a href="">Filter name</a><a href="">Filter name</a><a href="">Filter name</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="popup-footer">
|
|||
|
|
<a href="">Bỏ lọc</a>
|
|||
|
|
<a href="javascript:void(0)" onclick="_close_filter()">Đóng</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- product deal page -->
|
|||
|
|
<div class="product-deal-page" style="display: none;">
|
|||
|
|
<div class="group-title d-flex flex-wrap align-items-center justify-content-center">
|
|||
|
|
<i class="icons icon-bolt" data-aos="fade-up" data-aos-duration="1500"></i>
|
|||
|
|
|
|||
|
|
<h2 class="title" data-aos="fade-up" data-aos-duration="1800">giờ vàng giá sốc</h2>
|
|||
|
|
|
|||
|
|
<div class="w-100 d-flex flex-wrap align-items-center justify-content-center">
|
|||
|
|
<p data-aos="fade-up" data-aos-duration="2000">Kết thúc sau</p>
|
|||
|
|
|
|||
|
|
<div class="global-deal-countdown js-countdown-time"><!-- <b>02</b> <b>32</b> <b>16</b> --></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="product-holder">
|
|||
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<a href="" class="p-img">
|
|||
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<div class="p-text">
|
|||
|
|
<a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a>
|
|||
|
|
|
|||
|
|
<p class="p-price">270.000<u>đ</u></p>
|
|||
|
|
|
|||
|
|
<div class="p-price-group">
|
|||
|
|
<del>465.000<u>đ</u></del>
|
|||
|
|
<span class="p-discount">(Tiết kiệm: 12%)</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="p-deal-group">
|
|||
|
|
<span class="p-line" style="width: 80%;"></span>
|
|||
|
|
|
|||
|
|
<p class="p-sale-quantity">Đã bán 40%</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-2.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-3.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-4.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-5.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-6.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div>
|
|||
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-2.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-3.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-4.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-5.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-6.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img"> <img src="images/product-2.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> </div><div class="p-deal-group"> <span class="p-line" style="width: 20%;"></span><p class="p-sale-quantity">Đã bán 20%</p></div></div></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="paging" data-aos="fade-up" data-aos-duration="1300">
|
|||
|
|
<a href="" class="prev">Prev</a>
|
|||
|
|
<a href="" class="current">1</a>
|
|||
|
|
<a href="">2</a><a href="">3</a><a href="">4</a>
|
|||
|
|
<a href="" class="next">Next</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- product-detail -->
|
|||
|
|
<div class="product-detail-page" style="display: none;">
|
|||
|
|
<div class="pd-image-large owl-carousel owl-theme" id="js-big-img">
|
|||
|
|
<a href="javascript:void(0)" class="item" data-id="js-fancybox-1">
|
|||
|
|
<img src="images/product-1.png"/>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<a href="javascript:void(0)" class="item" data-id="js-fancybox-2">
|
|||
|
|
<img src="images/product-2.png"/>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<a href="javascript:void(0)" class="item" data-id="js-fancybox-3"><img src="images/product-3.png"/> </a><a href="javascript:void(0)" class="item" data-id="js-fancybox-4"><img src="images/product-4.png"/> </a><a href="javascript:void(0)" class="item" data-id="js-fancybox-5"><img src="images/product-5.png"/> </a><a href="javascript:void(0)" class="item" data-id="js-fancybox-6"><img src="images/product-6.png"/> </a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pd-image-gallery owl-carousel owl-theme" id="js-img-gallery">
|
|||
|
|
<a href="javascript:void(0)" data-id="js-fancybox-1" data-href="images/product-1.png" class="item">
|
|||
|
|
<img src="images/product-1.png"/>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<a href="javascript:void(0)" data-id="js-fancybox-2" data-href="images/product-2.png" class="item"><img src="images/product-2.png"/></a>
|
|||
|
|
<a href="javascript:void(0)" data-id="js-fancybox-3" data-href="images/product-3.png" class="item"><img src="images/product-3.png"/></a>
|
|||
|
|
<a href="javascript:void(0)" data-id="js-fancybox-4" data-href="images/product-4.png" class="item"><img src="images/product-4.png"/></a>
|
|||
|
|
<a href="javascript:void(0)" data-id="js-fancybox-5" data-href="images/product-5.png" class="item"><img src="images/product-5.png"/></a>
|
|||
|
|
<a href="javascript:void(0)" data-id="js-fancybox-6" data-href="images/product-6.png" class="item"><img src="images/product-6.png"/></a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: none;">
|
|||
|
|
<a href="images/product-1.png" data-fancybox="gallery" data-thumb="images/product-1.png" id="js-fancybox-1"></a>
|
|||
|
|
|
|||
|
|
<a href="images/product-2.png" data-fancybox="gallery" data-thumb="images/product-2.png" id="js-fancybox-2"></a>
|
|||
|
|
<a href="images/product-3.png" data-fancybox="gallery" data-thumb="images/product-3.png" id="js-fancybox-3"></a>
|
|||
|
|
<a href="images/product-4.png" data-fancybox="gallery" data-thumb="images/product-4.png" id="js-fancybox-4"></a>
|
|||
|
|
<a href="images/product-5.png" data-fancybox="gallery" data-thumb="images/product-5.png" id="js-fancybox-5"></a>
|
|||
|
|
<a href="images/product-6.png" data-fancybox="gallery" data-thumb="images/product-6.png" id="js-fancybox-6"></a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h1 class="page-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</h1>
|
|||
|
|
|
|||
|
|
<a href="javascript:void(0)" class="d-flex align-items-center" id="js-btn-view-comment" style="color: #000">
|
|||
|
|
<i class="icon-star star-5"></i> (0 đánh giá)
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<div class="pd-deal-holder">
|
|||
|
|
<div class="group-title d-flex align-items-center justify-content-center">
|
|||
|
|
<i class="icons icon-bolt"></i>
|
|||
|
|
<p class="title">Giờ vàng giá sốc</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="deal-time-holder d-flex flex-wrap align-items-center justify-content-center">
|
|||
|
|
<b>Kết thúc sau</b>
|
|||
|
|
<div class="global-deal-countdown js-countdown-time"><!-- <b>02</b> <b>32</b> <b>16</b> --></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pd-deal-group">
|
|||
|
|
<span class="pd-line" style="width: 80%;"></span>
|
|||
|
|
<p class="pd-sale-quantity">Đã bán 80%</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pd-price-group">
|
|||
|
|
<p class="pd-price">279.000<u>đ</u></p>
|
|||
|
|
<del class="pd-old-price">465.000<u>đ</u></del>
|
|||
|
|
<span class="pd-discount">(Tiết kiệm 12%)</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pd-offer-group">
|
|||
|
|
<p class="title">QUÀ TẶNG / KHUYẾN MÃI</p>
|
|||
|
|
|
|||
|
|
<div class="pd-offer-list">
|
|||
|
|
<div class="item">Chính sách đổi trả 1 đổi 1 trong vòng 7 ngày.</div>
|
|||
|
|
<div class="item">Thanh toán thuận tiện – Ưu đãi trả góp.</div>
|
|||
|
|
<div class="item">Bảo hành chính hãng tại nhà - Kích hoạt bảo hành điện tử.</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pd-quantity-group">
|
|||
|
|
<p>Số lượng: </p>
|
|||
|
|
|
|||
|
|
<div class="pd-quantity-holder">
|
|||
|
|
<a href="javascript:void(0)" class="js-btn-change" data-value="-1"> - </a>
|
|||
|
|
<input type="text" class="js-buy-quantity js-btn-change" value="1" data-stock="998">
|
|||
|
|
<a href="javascript:void(0)" class="js-btn-change" data-value="1"> + </a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pd-variant-option-group" id="js-variant-holder">
|
|||
|
|
<div class="js-variant-option-container js-variant-product-51" data-id="51">
|
|||
|
|
<table class="tb-hura8-variant-selection"><tbody><tr data-key="mau-sac" class="variant-color"><td class="variant-option-label" data-key="mau-sac" data-type="" data-display="label">Màu sắc: <b class="js-variant-color" style="margin-left: 3px"></b></td><td><span class="variant-option-value-box"><a href="javascript:void(0)" rel="nofollow" class="js-variant-option-value js-variant-color-item" data-key="mau-sac" data-label="Da" data-value="Da" data-code="" data-image="nude" title="" data-color="" style="background: rgb(241, 213, 196);">Da</a></span><span class="variant-option-value-box"><a href="javascript:void(0)" rel="nofollow" class="js-variant-option-value js-variant-color-item" data-key="mau-sac" data-label="Đen" data-value="Đen" data-code="" data-image="black" title="" data-color="" style="background: rgb(0, 0, 0);">Đen</a></span><span class="variant-option-value-box"><a href="javascript:void(0)" rel="nofollow" class="js-variant-option-value js-variant-color-item" data-key="mau-sac" data-label="Hồng" data-value="Hồng" data-code="" data-image="pink" title="" data-color="" style="background: rgb(232, 139, 149);">Hồng</a></span><span class="variant-option-value-box"><a href="javascript:void(0)" rel="nofollow" class="js-variant-option-value js-variant-color-item" data-key="mau-sac" data-label="Trắng" data-value="Trắng" data-code="" data-image="white" title="" data-color="" style="background: rgb(255, 255, 255);">Trắng</a></span><span class="variant-option-value-box"><a href="javascript:void(0)" rel="nofollow" class="js-variant-option-value selected js-variant-color-item" data-key="mau-sac" data-label="Cam" data-value="Cam" data-code="" data-image="orange" title="" data-color="" style="background: rgb(209, 106, 42);">Cam</a></span><span class="variant-option-value-box"><a href="javascript:void(0)" rel="nofollow" class="js-variant-option-value js-variant-color-item" data-key="mau-sac" data-label="Xám" data-value="Xám" data-code="" data-image="grey" title="" data-color="" style="background: rgb(178, 179, 180);">Xám</a></span></td></tr><tr data-key="kich-co"><td class="variant-option-label" data-key="kich-co" data-type="" data-display="label">Kích cỡ: <b class="js-variant-size" style="margin-left: 3px"></b></td><td><span class="variant-option-value-box"><a href="javascript:void(0)" rel="nofollow" class="js-variant-option-value" data-key="kich-co" data-label="M" data-value="M" data-code="" data-image="" title="">XS</a></span><span class="variant-option-value-box"><a href="javascript:void(0)" rel="nofollow" class="js-variant-option-value selected" data-key="kich-co" data-label="L" data-value="L" data-code="" data-image="" title="">S</a></span><span class="variant-option-value-box"><a href="javascript:void(0)" rel="nofollow" class="js-variant-option-value" data-key="kich-co" data-label="M" data-value="M" data-code="" data-image="" title="">M</a></span><span class="variant-option-value-box"><a href="javascript:void(0)" rel="nofollow" class="js-variant-option-value" data-key="kich-co" data-label="L" data-value="L" data-code="" data-image="" title="">L</a></span><span class="variant-option-value-box"><a href="javascript:void(0)" rel="nofollow" class="js-variant-option-value" data-key="kich-co" data-label="L" data-value="L" data-code="" data-image="" title="">XL</a></span></td></tr></tbody></table>
|
|||
|
|
<div class="result-config"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pd-btn-group">
|
|||
|
|
<a href="javascript:void(0)">Mua ngay</a>
|
|||
|
|
<a href="javascript:void(0)">Thêm vào giỏ</a>
|
|||
|
|
<a href="javascript:void(0)">Mua trả góp</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pd-static-text">
|
|||
|
|
<p>Gọi mua hàng: <a href="tel:">1900 xx xx xx</a> - <a href="tel:">1900 xx xx xx</a> (từ 8h15-21h30 hàng ngày)</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pd-tab-title-group">
|
|||
|
|
<a href="#js-desc-holder" class="js-tab-title">Mô tả sản phẩm</a>
|
|||
|
|
<a href="#js-spec-holder" class="js-tab-title">Thông số kỹ thuật</a>
|
|||
|
|
<a href="#js-comment-holder" class="js-tab-title">Đánh giá & nhận xét</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pd-tab-content js-static-container" id="js-desc-holder">
|
|||
|
|
<div class="js-static-content">
|
|||
|
|
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid sit animi culpa dolores nisi nam eligendi doloribus laudantium tempora doloremque beatae architecto ea, incidunt aspernatur. Esse reiciendis atque praesentium ea?</p>
|
|||
|
|
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid sit animi culpa dolores nisi nam eligendi doloribus laudantium tempora doloremque beatae architecto ea, incidunt aspernatur. Esse reiciendis atque praesentium ea?</p>
|
|||
|
|
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid sit animi culpa dolores nisi nam eligendi doloribus laudantium tempora doloremque beatae architecto ea, incidunt aspernatur. Esse reiciendis atque praesentium ea?</p>
|
|||
|
|
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid sit animi culpa dolores nisi nam eligendi doloribus laudantium tempora doloremque beatae architecto ea, incidunt aspernatur. Esse reiciendis atque praesentium ea?</p>
|
|||
|
|
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid sit animi culpa dolores nisi nam eligendi doloribus laudantium tempora doloremque beatae architecto ea, incidunt aspernatur. Esse reiciendis atque praesentium ea?</p>
|
|||
|
|
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid sit animi culpa dolores nisi nam eligendi doloribus laudantium tempora doloremque beatae architecto ea, incidunt aspernatur. Esse reiciendis atque praesentium ea?</p>
|
|||
|
|
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid sit animi culpa dolores nisi nam eligendi doloribus laudantium tempora doloremque beatae architecto ea, incidunt aspernatur. Esse reiciendis atque praesentium ea?</p>
|
|||
|
|
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid sit animi culpa dolores nisi nam eligendi doloribus laudantium tempora doloremque beatae architecto ea, incidunt aspernatur. Esse reiciendis atque praesentium ea?</p>
|
|||
|
|
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid sit animi culpa dolores nisi nam eligendi doloribus laudantium tempora doloremque beatae architecto ea, incidunt aspernatur. Esse reiciendis atque praesentium ea?</p>
|
|||
|
|
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid sit animi culpa dolores nisi nam eligendi doloribus laudantium tempora doloremque beatae architecto ea, incidunt aspernatur. Esse reiciendis atque praesentium ea?</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pd-desc-btn">
|
|||
|
|
<a href="javascript:void(0)" class="js-showmore-button">Xem thêm</a>
|
|||
|
|
<a href="javascript:void(0)" class="js-showless-button">Thu gọn</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pd-tab-content pd-spec-holder" id="js-spec-holder">
|
|||
|
|
<table width="682"><tbody><tr><td colspan="2" width="682"><p>Mô tả chi tiết</p></td></tr><tr><td width="163"><p>Hãng sản xuất</p></td><td width="518"><p>Lenovo</p></td></tr><tr><td width="163"><p>Chủng loại</p></td><td width="518"><p>Ideapad 5 pro</p></td></tr><tr><td width="163"><p>Part Number</p></td><td width="518"><p>82SH002TVN</p></td></tr><tr><td width="163"><p>Mầu sắc</p></td><td width="518"><p>Xám</p></td></tr><tr><td width="163"><p>Chất liệu</p></td><td width="518"><p>Nhôm</p></td></tr><tr><td width="163"><p>Bộ vi xử lý</p></td><td width="518"><p>Intel core i5 1240P</p></td></tr><tr><td width="163"><p>Chipset</p></td><td width="518"><p>Intel SoC Platform</p></td></tr><tr><td width="163"><p>Bộ nhớ trong</p></td><td width="518"><p>16GB</p></td></tr><tr><td width="163"><p>Số khe cắm</p></td><td width="518"><p>0</p></td></tr><tr><td width="163"><p>Số khe RAM chờ</p></td><td width="518"><p>0</p></td></tr><tr><td width="163"><p>Dung lượng tối đa</p></td><td width="518"><p>16GB</p></td></tr><tr><td width="163"><p>VGA</p></td><td width="518"><p>Intel Iris xe</p></td></tr><tr><td width="163"><p>Ổ cứng</p></td><td width="518"><p>512GB SSD M.2 2242 PCIe 4.0x4 NVMe</p></td></tr><tr><td width="163"><p>Ổ quang</p></td><td width="518"><p>None</p></td></tr><tr><td width="163"><p>Card Reader</p></td><td width="518"><p>4-in-1 Card Reader</p></td></tr><tr><td width="163"><p>Bảo mật, công nghệ</p></td><td width="518"><p>Firmware TPM 2.0, IR camera for Windows Hello, Stereo speakers, 2W x2, optimized with Dolby Atmos</p></td></tr><tr><td width="163"><p>Màn hình</p></td><td width="518"><p>14" 2.8K (2880x1800) IPS 400nits Anti-glare, 90Hz, 100% sRGB, TÜV Low Blue Light, Eyesafe</p></td></tr><tr><td width="163"><p>Webcam</p></td><td width="518"><p>ToF, FHD 1080p & IR</p></td></tr><tr><td width="163"><p>Audio</p></td><td width="518"><p>High Definition (HD) Audio, Realtek ALC3287 codec</p></td></tr><tr><td width="163"><p>Giao tiếp mạng</p></td><td width="518"><p>None</p></td></tr><tr><td width="163"><p>Giao tiếp không dây</p></td><td width="518"><p>Wi-Fi 6 11ax, 2x2 + BT5.1</p></td></tr><tr><td width="163"><p>Cổng giao tiếp</p></td><td width="518"><p>- 1x USB 3.2 Gen 1</p><p>- 1x USB 3.2 Gen 1 (Always On)</p><p>- 2x USB-C 3.2 Gen 1 (support data transfer, Power Delivery 3.0, and DisplayPort 1.4)</p><p>- 1x HDMI 2.0</p><p>- 1x Card reader</p><p>- 1x Headphone / microphone combo jack (3.5mm)</p></td></tr><tr><td width="163"><p>Pin</p></td><td width="518"><p>56.5Wh</p></td></tr><tr><td width="163"><p>Kích thước (rộng x dài x cao)</p></td><td width="518"><p>312.2 x 221 x 15.9 mm</p></td></tr><tr><td width="163"><p>Cân nặng</p></td><td width="518"><p>1.41 kg</p></td></tr><tr><td width="163"><p>Hệ điều hành</p></td><td width="518"><p>Win 11 home</p></td></tr><tr><td width="163"><p>Phụ kiện đi kèm</p></td><td width="518"><p>Adapter</p></td></tr></tbody></table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pd-tab-content" id="js-comment-holder">
|
|||
|
|
<p>Đánh giá & nhận xét</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Sản phẩm tương tự -->
|
|||
|
|
<div class="pd-related-container">
|
|||
|
|
<h2 class="title">Sản phẩm tương tự</h2>
|
|||
|
|
|
|||
|
|
<div id="js-product-related">
|
|||
|
|
<div class="owl-carousel owl-theme custom-dots">
|
|||
|
|
<div class="p-item">
|
|||
|
|
<a href="" class="p-img">
|
|||
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<div class="p-text">
|
|||
|
|
<a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a>
|
|||
|
|
|
|||
|
|
<p class="p-price">270.000<u>đ</u></p>
|
|||
|
|
|
|||
|
|
<div class="p-price-group">
|
|||
|
|
<del>465.000<u>đ</u></del>
|
|||
|
|
<span class="p-discount">(Tiết kiệm: 12%)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="p-item"> <a href="" class="p-img"> <img src="images/product-2.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> </div></div></div><div class="p-item"> <a href="" class="p-img"> <img src="images/product-3.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div></div></div><div class="p-item"> <a href="" class="p-img"> <img src="images/product-4.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div></div></div><div class="p-item"> <a href="" class="p-img"> <img src="images/product-5.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div></div></div><div class="p-item"> <a href="" class="p-img"> <img src="images/product-6.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div></div></div><div class="p-item"> <a href="" class="p-img"> <img src="images/product-2.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> </div></div></div><div class="p-item"> <a href="" class="p-img"> <img src="images/product-3.png" alt="" width="250" height="250"/> </a> <div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla ducimus facilis doloremque similique! Facere</h3></a> <p class="p-price">270.000<u>đ</u></p><div class="p-price-group"> <del>465.000<u>đ</u></del> <span class="p-discount">(Tiết kiệm: 12%)</span> </div></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Giỏ hàng -->
|
|||
|
|
<div class="cart-page container">
|
|||
|
|
<form method="post" enctype="multipart/form-data" action="/send-cart">
|
|||
|
|
<div class="cart-box-group">
|
|||
|
|
<p>Để tiếp tục đặt hàng, quý khách xin vui lòng <a href="javascript:void(0)" onclick="$('#js-login-holder').slideToggle(300)">Đăng nhập</a> hoặc nhập thông tin bên dưới</p>
|
|||
|
|
|
|||
|
|
<div class="cart-box-hidden" id="js-login-holder">
|
|||
|
|
<input type="text" placeholder="Họ và tên">
|
|||
|
|
<input type="text" placeholder="Mật khẩu">
|
|||
|
|
|
|||
|
|
<a href="javascript:void(0)">ĐĂNG NHẬP</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="cart-box-group cart-voucher-group">
|
|||
|
|
<p>Bạn có mã giảm giá, <a href="javascript:void(0)" onclick="$('#js-voucher-holder').slideToggle(300)">Bấm vào đây để nhập mã của bạn</a></p>
|
|||
|
|
|
|||
|
|
<div class="cart-box-hidden" id="js-voucher-holder">
|
|||
|
|
<input type="text" placeholder="Nhập mã ưu đãi"/>
|
|||
|
|
|
|||
|
|
<a href="javascript:void(0)">ÁP DỤNG</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row justify-content-between">
|
|||
|
|
<div class="cart-info-group col-6">
|
|||
|
|
<div class="box-item">
|
|||
|
|
<p class="title">Thông tin giao hàng</p>
|
|||
|
|
|
|||
|
|
<div class="cart-input-holder">
|
|||
|
|
<input type="text" placeholder="Họ và tên" required/>
|
|||
|
|
<input type="email" placeholder="Email" required/>
|
|||
|
|
<input type="text" placeholder="Số điện thoại" required/>
|
|||
|
|
<input type="text" placeholder="Địa chỉ" required/>
|
|||
|
|
<input type="hidden" placeholder="Ghi chú" />
|
|||
|
|
|
|||
|
|
<div class="w-100 d-flex flex-wrap justify-content-between">
|
|||
|
|
<select>
|
|||
|
|
<option value="">Chọn Tỉnh thành</option>
|
|||
|
|
<option value="">Option 1</option>
|
|||
|
|
<option value="">Option 2</option>
|
|||
|
|
<option value="">Option 3</option>
|
|||
|
|
</select>
|
|||
|
|
|
|||
|
|
<select>
|
|||
|
|
<option value="">Chọn Quận/ Huyện</option>
|
|||
|
|
<option value="">Option 1</option>
|
|||
|
|
<option value="">Option 2</option>
|
|||
|
|
<option value="">Option 3</option>
|
|||
|
|
</select>
|
|||
|
|
|
|||
|
|
<select>
|
|||
|
|
<option value="">Chọn Phường/ Xã</option>
|
|||
|
|
<option value="">Option 1</option>
|
|||
|
|
<option value="">Option 2</option>
|
|||
|
|
<option value="">Option 3</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="payment-item">
|
|||
|
|
<p class="title">Phương thức thanh toán</p>
|
|||
|
|
|
|||
|
|
<label class="label-container">
|
|||
|
|
<input type="radio" checked="checked" name="radio">
|
|||
|
|
<span class="checkmark"></span>
|
|||
|
|
<span>Thanh toán tiền mặt khi nhận hàng (tiền mặt/quẹt thẻ ATM,Visa,Master)</span>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<label class="label-container">
|
|||
|
|
<input type="radio" name="radio">
|
|||
|
|
<span class="checkmark"></span>
|
|||
|
|
<span>Thanh toán qua chuyển khoản qua tài khoản ngân hàng(khuyên dùng)</span>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<label class="label-container">
|
|||
|
|
<input type="radio" name="radio">
|
|||
|
|
<span class="checkmark"></span>
|
|||
|
|
<span>Thanh toán qua Ngân Lượng (ATM nội địa, Visa,Master)</span>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<label class="label-container">
|
|||
|
|
<input type="radio" name="radio">
|
|||
|
|
<span class="checkmark"></span>
|
|||
|
|
<span>Trả góp Alepay (Ngân Lượng)</span>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<label class="label-container">
|
|||
|
|
<input type="radio" name="radio">
|
|||
|
|
<span class="checkmark"></span>
|
|||
|
|
<span>Thanh toán trực tuyến (Bằng thẻ ATM/Visa/Master qua cổng VnPay)</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="payment-item">
|
|||
|
|
<p class="title">Phương thức vận chuyển</p>
|
|||
|
|
|
|||
|
|
<label class="label-container">
|
|||
|
|
<input type="radio" checked="checked" name="shipping">
|
|||
|
|
<span class="checkmark"></span>
|
|||
|
|
<span>Giao hàng trong 48h: 0đ</span>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<label class="label-container">
|
|||
|
|
<input type="radio" name="shipping">
|
|||
|
|
<span class="checkmark"></span>
|
|||
|
|
<span>[NowFree] Giao hàng nhanh trong 2 giờ: 9,000 đ</span>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<label class="label-container">
|
|||
|
|
<input type="radio" name="shipping">
|
|||
|
|
<span class="checkmark"></span>
|
|||
|
|
<span>[Nhanh] Nhận hàng vào 11 Th03 - 17 Th03: 16,000 đ</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="cart-info-group col-5">
|
|||
|
|
<div class="cart-summary-group">
|
|||
|
|
<div class="item-row js-item-row">
|
|||
|
|
<div class="p-img">
|
|||
|
|
<img src="images/product-1.png"/>
|
|||
|
|
<a href="javascript:void(0)">Xóa</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="p-text">
|
|||
|
|
<a href="" class="p-name">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis tenetur doloribus blanditiis</a>
|
|||
|
|
|
|||
|
|
<p class="p-price">16.500.000 VNĐ</p>
|
|||
|
|
|
|||
|
|
<div class="p-variant-item">Màu sắc: <span style="background: #000;" class="variant-color"></span></div>
|
|||
|
|
<div class="p-variant-item">Kích cỡ: <b>XL</b></div>
|
|||
|
|
|
|||
|
|
<div class="p-quantity-group">
|
|||
|
|
<p>Số lượng: </p>
|
|||
|
|
|
|||
|
|
<input type="text" class="js-buy-quantity js-btn-change" value="1" data-stock="998">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item-row js-item-row"> <div class="p-img"> <img src="images/product-3.png"/><a href="javascript:void(0)">Xóa</a> </div> <div class="p-text"> <a href="" class="p-name">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a> <p class="p-price">16.500.000 VNĐ</p><div class="p-variant-item">Màu sắc: <span style="background: #fff;" class="variant-color"></span></div><div class="p-variant-item">Kích cỡ: <b>XL</b></div><div class="p-quantity-group"> <p>Số lượng: </p><input type="text" class="js-buy-quantity js-btn-change" value="1" data-stock="998"> </div></div></div>
|
|||
|
|
|
|||
|
|
<div class="cart-price-group">
|
|||
|
|
<span>Phí vận chuyển:</span>
|
|||
|
|
<span>Miễn phí</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="cart-price-group">
|
|||
|
|
<span>Giảm giá:</span>
|
|||
|
|
<span>0 VNĐ</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="cart-price-group">
|
|||
|
|
<b>Tổng tiền:</b>
|
|||
|
|
<p class="cart-total-price">16.500.000 VNĐ</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="cart-btn-group">
|
|||
|
|
<button type="submit" class="btn-submit">HOÀN TẤT ĐƠN HÀNG</button>
|
|||
|
|
<a href="/">Quay lại Trang chủ</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Footer -->
|
|||
|
|
<!-- Tìm kiếm nhiều -->
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="home-customer-comment-group global-tags-group">
|
|||
|
|
<div class="box-title-group">
|
|||
|
|
<p class="title">Tìm kiếm nhiều</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="tags-list">
|
|||
|
|
<a href="" target="_blank">Thiết bị nhà bếp</a>
|
|||
|
|
<a href="" target="_blank">Bếp điện từ - Hồng ngoại</a><a href="" target="_blank">Bếp từ đôi</a><a href="" target="_blank">Chảo kim cương</a><a href="" target="_blank">Ấm siêu tốc</a><a href="" target="_blank">Điện gia dụng</a><a href="" target="_blank">Đồ gia dụng</a><a href="" target="_blank">Bộ nồi Inox</a><a href="" target="_blank">Nồi áp suất</a><a href="" target="_blank">Bàn là</a><a href="" target="_blank">Nồi chiên không dầu</a><a href="" target="_blank">Máy hút mùi</a><a href="" target="_blank">Điều hòa treo tường</a><a href="" target="_blank">Điều hòa trung tâm</a><a href="" target="_blank">Cây nước nóng lạnh</a><a href="" target="_blank">Lò nướng</a><a href="" target="_blank">Máy lọc nước</a><a href="" target="_blank">Máy lọc không khí</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="footer-newsletter-container">
|
|||
|
|
<div class="container d-flex flex-wrap align-items-center justify-content-between">
|
|||
|
|
<div class="col-left">
|
|||
|
|
<i class="icons icon-mailbox"></i>
|
|||
|
|
|
|||
|
|
<div class="text">
|
|||
|
|
<b>Nhận thông báo khuyến mại hoặc tư vấn miến phí</b>
|
|||
|
|
<span>Bạn hãy để lại email để không bỏ lỡ hàng ngàn sản phẩm và các chương trình khuyến mãi khác</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form class="newsletter-form-holder">
|
|||
|
|
<input type="email" required placeholder="Nhập email"/>
|
|||
|
|
<button type="submit">Gửi ngay</button>
|
|||
|
|
<div class="error-note"> <!-- error note --> </div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="global-footer">
|
|||
|
|
<div class="footer-info-group container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col">
|
|||
|
|
<p class="title">Công ty TNHH Hurasoft</p>
|
|||
|
|
|
|||
|
|
<div class="info-list address-list">
|
|||
|
|
<a href="">
|
|||
|
|
<i class="icons icon-map"></i>
|
|||
|
|
<span>Tầng 5 - Số 3, ngõ 18 Yên Lãng, Đống Đa, Hà Nội</span>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<a href="tel:">
|
|||
|
|
<i class="icons icon-tel"></i>
|
|||
|
|
<span>02422.138.068</span>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<a href="mailTo:">
|
|||
|
|
<i class="icons icon-email"></i>
|
|||
|
|
<span>hotro@hurasoft.com</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col js-info-group">
|
|||
|
|
<p class="title js-info-title">Thông tin công ty</p>
|
|||
|
|
|
|||
|
|
<div class="info-list">
|
|||
|
|
<a href="/gioi-thieu">Giới thiệu</a>
|
|||
|
|
<a href="">Hệ thống showroom</a>
|
|||
|
|
<a href="/lien-he">Thông tin liên hệ</a>
|
|||
|
|
<a href="">Tuyển dụng</a>
|
|||
|
|
<a href="/tin-tuc">Tin tức</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col js-info-group">
|
|||
|
|
<p class="title js-info-title">Hỗ trợ khách hàng</p>
|
|||
|
|
|
|||
|
|
<div class="info-list">
|
|||
|
|
<a href="">Hướng dẫn mua hàng Online</a>
|
|||
|
|
<a href="">Hướng dẫn thanh toán</a>
|
|||
|
|
<a href="">Hướng dẫn mua trả góp</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col js-info-group">
|
|||
|
|
<p class="title js-info-title">Chính sách mua hàng và bảo hành</p>
|
|||
|
|
|
|||
|
|
<div class="info-list">
|
|||
|
|
<a href="">Chính sách bảo hành</a>
|
|||
|
|
<a href="">Chính sách bảo mật</a>
|
|||
|
|
<a href="">Chính sách vận chuyển, giao nhận</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a href="" class="footer-bct">
|
|||
|
|
<img data-src="images/footer-bct.png" alt="BCT" width="1" height="1" class="lazy"/>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="footer-store-box">
|
|||
|
|
<div class="container d-flex flex-wrap">
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="group-title">
|
|||
|
|
<span class="number">01</span>
|
|||
|
|
<span class="text">TT TƯ VẤN & CSKH</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item-list">
|
|||
|
|
<a href="">
|
|||
|
|
<i class="icons icon-map"></i>
|
|||
|
|
<span>Tầng 5 - Số 3, ngõ 18 Yên Lãng, Đống Đa, Hà Nội</span>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<a href="">
|
|||
|
|
<i class="icons icon-tel"></i>
|
|||
|
|
<span>02422.138.068</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="group-title">
|
|||
|
|
<span class="number">02</span>
|
|||
|
|
<span class="text">TT TƯ VẤN & CSKH</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item-list">
|
|||
|
|
<a href="">
|
|||
|
|
<i class="icons icon-map"></i>
|
|||
|
|
<span>Tầng 5 - Số 3, ngõ 18 Yên Lãng, Đống Đa, Hà Nội</span>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<a href="">
|
|||
|
|
<i class="icons icon-tel"></i>
|
|||
|
|
<span>02422.138.068</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="group-title">
|
|||
|
|
<span class="number">03</span>
|
|||
|
|
<span class="text">TT TƯ VẤN & CSKH</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item-list">
|
|||
|
|
<a href="">
|
|||
|
|
<i class="icons icon-map"></i>
|
|||
|
|
<span>Tầng 5 - Số 3, ngõ 18 Yên Lãng, Đống Đa, Hà Nội</span>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<a href="">
|
|||
|
|
<i class="icons icon-tel"></i>
|
|||
|
|
<span>02422.138.068</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="group-title">
|
|||
|
|
<span class="number">04</span>
|
|||
|
|
<span class="text">TT TƯ VẤN & CSKH</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item-list">
|
|||
|
|
<a href="">
|
|||
|
|
<i class="icons icon-map"></i>
|
|||
|
|
<span>Tầng 5 - Số 3, ngõ 18 Yên Lãng, Đống Đa, Hà Nội</span>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<a href="">
|
|||
|
|
<i class="icons icon-tel"></i>
|
|||
|
|
<span>02422.138.068</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="footer-end-group container d-flex flex-wrap align-items-center justify-content-between">
|
|||
|
|
<p>© 2023: Bản quyền Hurasoft </p>
|
|||
|
|
<i class="lazy icon-payment" data-bg="url(/images/footer-payment.png)"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="success-form" style="display: none">
|
|||
|
|
<div class="content-container">
|
|||
|
|
<div class="success-checkmark">
|
|||
|
|
<div class="check-icon">
|
|||
|
|
<span class="icon-line line-tip"></span>
|
|||
|
|
<span class="icon-line line-long"></span>
|
|||
|
|
<div class="icon-circle"></div>
|
|||
|
|
<div class="icon-fix"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="text-center content-text text-24"> Thêm sản phẩm vào giỏ hàng thành công !</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a href="javascript:void(0)" id="js-goTop" class="global-goTop" onclick="$('body,html').animate({scrollTop:0},800);"></a>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Menu -->
|
|||
|
|
<nav id="js-global-menu" class="mb-menu">
|
|||
|
|
<ul>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href=""> <i class="fas fa-home cat-thumb"></i> <span class="cat-title"> LINH KIỆN MÁY TÍNH </span> </a>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="/cpu-bo-vi-xu-ly.html"> CPU - Bộ vi xử lý </a>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="/intel-pentium.html"> Intel Pentium </a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href=""> <i class="fa fa-home cat-thumb"></i> <span class="cat-title"> LINH KIỆN </span> </a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href=""> <i class="fa fa-home cat-thumb"></i> <span class="cat-title"> MÁY TÍNH </span> </a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href=""> <i class="fa fa-home cat-thumb"></i> <span class="cat-title"> LINH KIỆN MÁY TÍNH </span> </a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="/tin-tuc"> <i class="far fa-newspaper cat-thumb"></i> <span class="cat-title"> Tin tức </span> </a>
|
|||
|
|
<ul>
|
|||
|
|
|
|||
|
|
<li><a href="/tin-cong-nghe.html"> Tin Công Nghệ </a></li>
|
|||
|
|
|
|||
|
|
<li><a href="/tin-cong-ty.html"> Tin Công Ty </a></li>
|
|||
|
|
|
|||
|
|
<li><a href="/bao-hanh.html"> Bảo Hành </a></li>
|
|||
|
|
|
|||
|
|
<li><a href="/thu-thuat-may-tinh.html"> Thủ thuật máy tính </a></li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="/dang-ky"> <i class="icons icon-user cat-thumb"></i> <span class="cat-title"> Đăng ký </span></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="/dang-nhap"> <i class="icons icon-user cat-thumb"></i> <span class="cat-title"> Đăng nhập</span> </a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="/lien-he"> <i class="far fa-envelope cat-thumb"></i> <span class="cat-title"> Liên hệ </span></a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="/gioi-thieu"> <i class="fas fa-info-circle cat-thumb"></i> <span class="cat-title"> Giới thiệu </span></a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Script -->
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
|
|||
|
|
<script src="js/lib.js"></script>
|
|||
|
|
<script src="js/mmenu.js"></script>
|
|||
|
|
|
|||
|
|
<!-- aos -->
|
|||
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
|||
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|||
|
|
|
|||
|
|
<!-- global -->
|
|||
|
|
<script>
|
|||
|
|
var lazyLoadInstance = new LazyLoad({
|
|||
|
|
elements_selector: ".lazy"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(document).ready(function(){
|
|||
|
|
AOS.init();
|
|||
|
|
|
|||
|
|
countDownToNextDay(".js-countdown-time");
|
|||
|
|
|
|||
|
|
$('#js-global-menu').mmenu();
|
|||
|
|
|
|||
|
|
|
|||
|
|
_globalClickFunction();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(window).scroll(function(){
|
|||
|
|
_globalScrollFunction();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function _globalClickFunction() {
|
|||
|
|
$('#js-btn-search').click(function(){
|
|||
|
|
$(this).toggleClass('active');
|
|||
|
|
$('#js-search-group').toggle();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$("#js-goTop").click(function(){
|
|||
|
|
$('html,body').animate({scrollTop:0},800);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.js-info-title').click(function(){
|
|||
|
|
$(this).parents('.js-info-group').find('.info-list').slideToggle(300);
|
|||
|
|
$(this).toggleClass('active')
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function _globalScrollFunction(){
|
|||
|
|
if($(this).scrollTop() > 300) {
|
|||
|
|
$('#js-goTop').addClass("active");
|
|||
|
|
} else {
|
|||
|
|
$('#js-goTop').removeClass("active");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- homepage -->
|
|||
|
|
<script>
|
|||
|
|
$(document).ready(function(){
|
|||
|
|
|
|||
|
|
$('#js-home-slider').owlCarousel({
|
|||
|
|
items: 1,
|
|||
|
|
loop: true,
|
|||
|
|
margin: 10,
|
|||
|
|
autoplay: true,
|
|||
|
|
autoplayTimeout: 3000,
|
|||
|
|
autoplaySpeed: 1000,
|
|||
|
|
autoplayHoverPause:true,
|
|||
|
|
dots: false,
|
|||
|
|
nav: false,
|
|||
|
|
navText: ["<i class='arrow'></i>","<i class='arrow arrow-next'></i>"],
|
|||
|
|
lazyLoad: true,
|
|||
|
|
animateOut: 'fadeOut',
|
|||
|
|
smartSpeed: 150
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#js-banner-under-deal').owlCarousel({
|
|||
|
|
items: 1,
|
|||
|
|
loop: true,
|
|||
|
|
margin: 10,
|
|||
|
|
autoplay: true,
|
|||
|
|
autoplayTimeout: 3000,
|
|||
|
|
autoplaySpeed: 1000,
|
|||
|
|
autoplayHoverPause:true,
|
|||
|
|
dots: false,
|
|||
|
|
nav: false,
|
|||
|
|
navText: ["<i class='arrow'></i>","<i class='arrow arrow-next'></i>"],
|
|||
|
|
lazyLoad: true,
|
|||
|
|
animateOut: 'fadeOut',
|
|||
|
|
smartSpeed: 150
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#js-customer-comment-list').owlCarousel({
|
|||
|
|
items: 1,
|
|||
|
|
loop: true,
|
|||
|
|
margin: 10,
|
|||
|
|
autoplay: true,
|
|||
|
|
autoplayTimeout: 3000,
|
|||
|
|
autoplaySpeed: 1000,
|
|||
|
|
autoplayHoverPause:true,
|
|||
|
|
dots: true,
|
|||
|
|
nav: false,
|
|||
|
|
navText: ["<i class='arrow'></i>","<i class='arrow arrow-next'></i>"],
|
|||
|
|
lazyLoad: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- product-category -->
|
|||
|
|
<script>
|
|||
|
|
$(document).ready(function(){
|
|||
|
|
$('#js-filter-container .filter-title').click(function(){
|
|||
|
|
$(this).toggleClass('active')
|
|||
|
|
$(this).parents('.filter-item').find('.filter-list').slideToggle(300);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function _open_filter(){
|
|||
|
|
$('body').addClass('overflow-hidden');
|
|||
|
|
$('#js-filter-container').addClass('active');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function _close_filter(){
|
|||
|
|
$('body').removeClass('overflow-hidden');
|
|||
|
|
$('#js-btn-filter, #js-filter-container').removeClass('active');
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- product-detail -->
|
|||
|
|
<script>
|
|||
|
|
$(document).ready(function(){
|
|||
|
|
$('#js-product-related .owl-carousel').owlCarousel({
|
|||
|
|
margin: 10,
|
|||
|
|
lazyLoad: true,
|
|||
|
|
loop: true,
|
|||
|
|
autoplay: true,
|
|||
|
|
autoplayTimeout: 4000,
|
|||
|
|
autoplaySpeed: 1500,
|
|||
|
|
autoplayHoverPause: true,
|
|||
|
|
dots: true,
|
|||
|
|
nav: false,
|
|||
|
|
navText: ["<i class='arrow'></i>","<i class='arrow arrow-next'></i>"],
|
|||
|
|
items: 2
|
|||
|
|
});
|
|||
|
|
_runProductImageSlider();
|
|||
|
|
|
|||
|
|
listenQuantityChange();
|
|||
|
|
|
|||
|
|
_imagesClick();
|
|||
|
|
|
|||
|
|
$('#js-btn-view-comment').click(function(){
|
|||
|
|
$('.js-tab-title:last-child').click();
|
|||
|
|
$("body,html").animate({
|
|||
|
|
scrollTop: $(".pd-tab-title-group").offset().top - 120
|
|||
|
|
},800);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.js-tab-title').click(function(event){
|
|||
|
|
event.preventDefault()
|
|||
|
|
var id = $(this).attr('href');
|
|||
|
|
$('.js-tab-title, .pd-tab-content').removeClass('active');
|
|||
|
|
$(this).addClass('active');
|
|||
|
|
$(id).addClass('active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.js-tab-title:first-child').click();
|
|||
|
|
|
|||
|
|
$('[data-fancybox="gallery"]').fancybox({
|
|||
|
|
thumbs : {
|
|||
|
|
autoStart : true
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(window).on('load',function(){
|
|||
|
|
checkContentHeight(300);
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function _imagesClick(){
|
|||
|
|
$('#js-img-gallery a').click(function(){
|
|||
|
|
var href = $(this).attr('data-href');
|
|||
|
|
var fancybox_id = $(this).attr('data-id');
|
|||
|
|
$('#js-big-img').attr('data-id', fancybox_id);
|
|||
|
|
|
|||
|
|
$('#js-img-gallery a').removeClass('img-active')
|
|||
|
|
$(this).addClass('img-active')
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#js-big-img .item').click(function(){
|
|||
|
|
var fancybox_id = $(this).attr('data-id');
|
|||
|
|
$('#'+fancybox_id).click();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function _runProductImageSlider() {
|
|||
|
|
var bigimage = $('#js-big-img');
|
|||
|
|
var thumbs = $('#js-img-gallery');
|
|||
|
|
var syncedSecondary = true;
|
|||
|
|
|
|||
|
|
bigimage.owlCarousel({
|
|||
|
|
items: 1,
|
|||
|
|
slideSpeed: 2000,
|
|||
|
|
autoplay: false,
|
|||
|
|
autoplayHoverPause:true,
|
|||
|
|
nav: false,
|
|||
|
|
dots: false,
|
|||
|
|
loop: false,
|
|||
|
|
lazyLoad: true,
|
|||
|
|
responsiveRefreshRate: 200,
|
|||
|
|
center: false,
|
|||
|
|
navText: [
|
|||
|
|
'<i class="arrow arrow-prev"></i>',
|
|||
|
|
'<i class="arrow arrow-next"></i>'
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
.on("changed.owl.carousel", syncPosition);
|
|||
|
|
|
|||
|
|
thumbs
|
|||
|
|
.on("initialized.owl.carousel", function() {
|
|||
|
|
thumbs.find(".owl-item").eq(0).addClass("current");
|
|||
|
|
})
|
|||
|
|
.owlCarousel({
|
|||
|
|
items: 5,
|
|||
|
|
dots: false,
|
|||
|
|
nav: false,
|
|||
|
|
navText: [
|
|||
|
|
'<i class="arrow arrow-prev"></i>',
|
|||
|
|
'<i class="arrow arrow-next"></i>'
|
|||
|
|
],
|
|||
|
|
smartSpeed: 200,
|
|||
|
|
slideSpeed: 500,
|
|||
|
|
slideBy: 4,
|
|||
|
|
margin: 10,
|
|||
|
|
center: false,
|
|||
|
|
responsiveRefreshRate: 100,
|
|||
|
|
responsive : {
|
|||
|
|
0 : {
|
|||
|
|
items: 4,
|
|||
|
|
},
|
|||
|
|
375 : {
|
|||
|
|
items: 5,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.on("changed.owl.carousel", syncPosition2);
|
|||
|
|
|
|||
|
|
|
|||
|
|
function syncPosition(el) {
|
|||
|
|
//if loop is set to false, then you have to uncomment the next line
|
|||
|
|
var current = el.item.index;
|
|||
|
|
// console.log(current)
|
|||
|
|
//to disable loop, comment this block
|
|||
|
|
var count = el.item.count - 1;
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
// var current = Math.round(el.item.index - el.item.count / 2 - 0.5);
|
|||
|
|
//
|
|||
|
|
//
|
|||
|
|
|
|||
|
|
if (current < 0) {
|
|||
|
|
current = count;
|
|||
|
|
}
|
|||
|
|
if (current > count) {
|
|||
|
|
current = 0;
|
|||
|
|
}
|
|||
|
|
//to this
|
|||
|
|
thumbs.find(".owl-item").removeClass("current").eq(current).addClass("current");
|
|||
|
|
|
|||
|
|
var onscreen = thumbs.find(".owl-item.active").length - 1;
|
|||
|
|
|
|||
|
|
var start = thumbs.find(".owl-item.active").first().index();
|
|||
|
|
|
|||
|
|
var end = thumbs.find(".owl-item.active").last().index();
|
|||
|
|
|
|||
|
|
if (current > end) {
|
|||
|
|
thumbs.data("owl.carousel").to(current, 100, true);
|
|||
|
|
}
|
|||
|
|
if (current < start && 1 < 2) {
|
|||
|
|
thumbs.data("owl.carousel").to(current - onscreen, 100, true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function syncPosition2(el) {
|
|||
|
|
if (syncedSecondary) {
|
|||
|
|
var number = el.item.index;
|
|||
|
|
bigimage.data("owl.carousel").to(number, 100, true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
thumbs.on("click", ".owl-item", function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
var number = $(this).index();
|
|||
|
|
bigimage.data("owl.carousel").to(number, 300, true);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function listenQuantityChange() {
|
|||
|
|
var $track_change = $(".js-btn-change");
|
|||
|
|
|
|||
|
|
//thay doi so luong sp mua, neu nhap so luong
|
|||
|
|
$track_change.on("change", function (e) {
|
|||
|
|
var quantity_stock = $(this).attr("data-stock");
|
|||
|
|
var current_quantity = $(this).val();
|
|||
|
|
|
|||
|
|
if($(this).val() < 1) $(this).val(1);
|
|||
|
|
|
|||
|
|
if(current_quantity > quantity_stock) {
|
|||
|
|
alert("Bạn được mua tối đa "+ quantity_stock + " sản phẩm này");
|
|||
|
|
$(".js-buy-quantity").val(quantity_stock);
|
|||
|
|
return ;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//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 current_quantity = parseInt($(".js-buy-quantity").val());
|
|||
|
|
var quantity_stock = parseInt($(".js-buy-quantity").attr("data-stock"));
|
|||
|
|
|
|||
|
|
//loai bo so luong vo ly
|
|||
|
|
if(current_quantity + quantity_change < 1 && 1 < 2) {
|
|||
|
|
$(".js-buy-quantity").val(1);
|
|||
|
|
return ;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(current_quantity + quantity_change > quantity_stock) {
|
|||
|
|
alert("Bạn được mua tối đa "+ quantity_stock + " sản phẩm này");
|
|||
|
|
$(".js-buy-quantity").val(quantity_stock);
|
|||
|
|
return ;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(".js-buy-quantity").val(current_quantity + quantity_change);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|