ducdt/giao_dien_web_mau
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
master
giao_dien_web_mau/demo-dogiadung-2/index.html

1551 lines
105 KiB
HTML
Raw Permalink Normal View History

Giao dien hoan chinh 19/05/2023
2023-05-19 16:40:07 +07:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> Local </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" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" />
<link rel="stylesheet" media="screen" href="scss/lib.css" />
<link rel="stylesheet" media="screen" href="scss/pc_style.css" />
</head>
<body>
<!-- Header -->
<div class="global-header-top">
<div class="container d-flex align-items-center justify-content-between">
<a href="tel:" class="group-left">
<i class="icons icon-phone"></i>
<span>Hotline mua hàng: <b>1900.xxx.xxxx</b></span>
</a>
<div class="group-right">
<a href="/san-pham-da-xem">
<i class="icons icon-check"></i>
<span>Sản phẩm đã xem</span>
</a>
<a href="/san-pham-hot">
<i class="icons icon-fire"></i>
<span>Khuyến mãi HOT</span>
</a>
<a href="">
<i class="icons icon-note"></i>
<span>Tính công suất điều hòa</span>
</a>
<a href="/tin-tuc">
<i class="icons icon-news"></i>
<span>Tin tức</span>
</a>
<a href="/lien-he">
<i class="icons icon-map"></i>
<span>Liên hệ, góp ý</span>
</a>
</div>
</div>
</div>
<div class="global-header-main">
<div class="global-header-main-top container d-flex flex-wrap align-items-center">
<a href="/" class="header-logo">
<img src="images/logo.png" alt="Đồ gia dụng" width="1" height="1"/>
</a>
<div class="header-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="btn-search">TÌM KIẾM</button>
</form>
<div class="autocomplete-suggestions" id="js-search-holder" style="display: none;"><!-- search data --></div>
</div>
<div class="header-group-right">
<a href="" class="icons icon-note" title="" target="_blank"></a>
<div class="item">
<a href="/taikhoan" class="icons icon-user" title="Tài khoản của bạn"></a>
<div class="sub-item">
<a href="/taikhoan?view=change-info">Thông tin tài khoản</a>
<a href="/taikhoan?view=order">Quản lý đơn hàng</a>
<a href="/san-pham-da-xem">Sản phẩm đã xem</a>
<a href="/taikhoan?view=change-pass">Thay đổi mật khẩu</a>
<a href="/logout.php">Thoát tài khoản</a>
<a href="/dang-ky">Đăng ký</a>
<a href="/dang-nhap">Đăng nhập</a>
</div>
</div>
<a href="/cart" class="item-cart" title="Giỏ hàng">
<i class="icons icon-cart">
<span class="js-cart-count cart-count">0</span>
</i>
<span class="text">
Giỏ hàng (<span class="js-cart-count">0</span>)
</span>
</a>
</div>
</div>
<div class="global-header-main-bottom">
<div class="container d-flex flex-wrap align-items-center">
<div class="header-menu-group">
<p class="title">DANH MỤC SẢN PHẨM</p>
<div class="header-menu-list">
<div class="cat-item">
<a href="" class="cat-1">Danh mục cấp 1</a>
<div class="sub-menu">
<div class="sub-item">
<a href="" class="cat-2">Danh mục cấp 2</a>
<a href="">Danh mục cấp 3</a>
<a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a>
</div>
<div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div>
</div>
</div>
<div class="cat-item"> <a href="" class="cat-1">Danh mục cấp 1</a> <div class="sub-menu"> <div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div></div></div><div class="cat-item"> <a href="" class="cat-1">Danh mục cấp 1</a> <div class="sub-menu"> <div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div></div></div><div class="cat-item"> <a href="" class="cat-1">Danh mục cấp 1</a> <div class="sub-menu"> <div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div></div></div><div class="cat-item"> <a href="" class="cat-1">Danh mục cấp 1</a> </div><div class="cat-item"> <a href="" class="cat-1">Danh mục cấp 1</a> <div class="sub-menu"> <div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a><a href="">Danh mục cấp 3</a> </div><div class="sub-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href="">Danh mục cấp 3</a> <a href="">Danh mục cấp 3</a><a href="
</div>
</div>
<div class="global-header-static d-flex flex-wrap align-items-center justify-content-between">
<a href="" target="_blank">
<i class="icons icon-pig"></i>
<span>HỖ TRỢ TRẢ GÓP</span>
</a>
<a href="" target="_blank">
<i class="icons icon-like"></i>
<span>GIÁ ƯU ĐÃI NHẤT</span>
</a>
<a href="" target="_blank">
<i class="icons icon-shield"></i>
<span>BẢO HÀNH TẬN NHÀ</span>
</a>
<a href="" target="_blank">
<i class="icons icon-truck"></i>
<span>MIỄN PHÍ VẬN CHUYỂN</span>
</a>
</div>
</div>
</div>
</div>
<div class="global-header-block" style="display: none;"></div>
<!-- Homepage -->
<div class="homepage">
<div style="min-height: 500px">
<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>
</div>
<div class="container">
<!-- category -->
<div class="home-category-group">
<div class="banner-holder">
<img data-src="images/homepage/banner-category.png" alt="banner" width="1" height="1" class="lazy"/>
</div>
<div class="product-category-holder hover-img">
<div class="item">
<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">
<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">
<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">
<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>
</div>
<!-- Deal -->
<div class="home-deal-group" data-aos="fade-right" data-aos-duration="1300">
<div class="group-title d-flex flex-wrap align-items-center justify-content-between">
<div class="d-flex flex-wrap align-items-center">
<i class="icons icon-bolt" data-aos="fade-right" data-aos-duration="1500"></i>
<h2 class="title" data-aos="fade-right" data-aos-duration="1800">giờ vàng giá sốc</h2>
<p data-aos="fade-right" 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>
<a href="/deal" class="global-btn-view" target="_blank">Xem tất cả</a>
</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>
<!-- Banner -->
<div class="banner-under-deal owl-carousel owl-theme hover-img" id="js-banner-under-deal" data-aos="fade-up" data-aos-duration="1300">
<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">
<div class="box-title-group">
<h2 class="title">Thiết bị nhà bếp</h2>
<a href="" class="global-btn-view" target="_blank">Xem tất cả</a>
</div>
<div class="clearfix">
<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 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>
</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>
</div>
<!-- product-category -->
<div class="home-box-group" data-aos="fade-right" data-aos-duration="1300">
<div class="box-title-group">
<h2 class="title">Điện gia dụng</h2>
<a href="" class="global-btn-view" target="_blank">Xem tất cả</a>
</div>
<div class="clearfix">
<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 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>
</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>
</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" 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>
</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 container">
<div class="product-filter-container">
<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="product-col-right">
<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>
</div>
<div>
<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="box-content-holder paging-group" data-aos="fade-up" data-aos-duration="1300">
<p>Hiển thị 1–16 trên 60 sản phẩm</p>
<div class="paging">
<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>
</div>
</div>
<!-- product deal page -->
<div class="container">
<div class="product-deal-page">
<div class="group-title d-flex flex-wrap align-items-center justify-content-center">
<i class="icons icon-bolt" data-aos="fade-right" data-aos-duration="1500"></i>
<h2 class="title" data-aos="fade-right" data-aos-duration="1800">giờ vàng giá sốc</h2>
<p data-aos="fade-right" 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 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>
</div>
<!-- product-detail -->
<div class="product-detail-page container">
<div class="pd-box-content pd-info-container">
<div class="pd-image-group">
<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 custom-nav 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>
</div>
<div class="pd-info-right-group">
<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-inline-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="d-flex flex-wrap align-items-center justify-content-between">
<div class="deal-time-holder d-flex flex-wrap align-items-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>
<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">
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)
</div>
</div>
</div>
<div class="pd-box-content">
<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 &amp; 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>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1x USB 3.2 Gen 1</p><p>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1x USB 3.2 Gen 1 (Always On)</p><p>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2x USB-C 3.2 Gen 1 (support data transfer, Power Delivery 3.0, and DisplayPort 1.4)</p><p>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1x HDMI 2.0</p><p>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1x Card reader</p><p>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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>
</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-nav">
<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>
<!-- 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>
<!-- 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");
_globalResizeFunction();
});
$(window).scroll(function() {
_globalScrollFunction();
});
$(window).on("resize", function() {
_globalResizeFunction();
});
function _globalScrollFunction() {
if($(this).scrollTop() > 700) {
$('.global-header-main').addClass("header-fixed");
$('#js-goTop').addClass("active");
$('.global-header-block').show();
} else {
$('.global-header-main').removeClass("header-fixed");
$('#js-goTop').removeClass("active");
$('.global-header-block').hide();
}
}
function _globalResizeFunction() {
$('.header-menu-group .sub-menu').css('height',$('.header-menu-list').height());
$('.global-header-block').css('height', $('.global-header-main').height())
}
function run_carousel(holder){
$(holder + ' .owl-carousel').owlCarousel({
margin: 12,
lazyLoad: true,
loop: true,
autoplay: true,
autoplayTimeout: 4000,
autoplaySpeed: 1500,
autoplayHoverPause: true,
dots: false,
nav: true,
navText: ["<i class='arrow'></i>","<i class='arrow arrow-right'></i>"],
items: 5,
responsive:{
1624:{
margin: 16,
items : 6
}
}
});
}
</script>
<!-- homepage -->
<script>
$(document).ready(function(){
$('#js-home-slider').owlCarousel({
items: 1,
loop: true,
margin: 12,
autoplay: true,
autoplayTimeout: 3000,
autoplaySpeed: 1000,
autoplayHoverPause:true,
dots: false,
nav: false,
navText: ["<i class='arrow'></i>","<i class='arrow arrow-right'></i>"],
lazyLoad: true,
animateOut: 'fadeOut',
smartSpeed: 150
});
$('#js-banner-under-deal').owlCarousel({
items: 2,
loop: true,
margin: 12,
autoplay: true,
autoplayTimeout: 3000,
autoplaySpeed: 1000,
autoplayHoverPause:true,
dots: false,
nav: false,
navText: ["<i class='arrow'></i>","<i class='arrow arrow-right'></i>"],
lazyLoad: true,
animateOut: 'fadeOut',
smartSpeed: 150
});
$('#js-customer-comment-list').owlCarousel({
items: 4,
loop: true,
margin: 12,
autoplay: true,
autoplayTimeout: 3000,
autoplaySpeed: 1000,
autoplayHoverPause:true,
dots: false,
nav: false,
navText: ["<i class='arrow'></i>","<i class='arrow arrow-right'></i>"],
lazyLoad: true,
responsive:{
1624:{
margin: 16,
}
}
});
});
</script>
<!-- product-detail -->
<script>
$(document).ready(function(){
run_carousel('#js-product-related');
checkContentHeight(500);
_runProductImageSlider();
_imagesClick();
listenQuantityChange();
$('#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
}
});
});
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: true,
navText: [
'<i class="arrow arrow-prev"></i>',
'<i class="arrow arrow-next"></i>'
],
smartSpeed: 200,
slideSpeed: 500,
slideBy: 5,
margin: 12,
center: false,
responsiveRefreshRate: 100,
1624:{
margin: 16,
}
})
.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>
Reference in New Issue Copy Permalink