1475 lines
88 KiB
HTML
1475 lines
88 KiB
HTML
<!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 container">
|
|
<div class="global-header-main">
|
|
<div class="row align-items-center">
|
|
<div class="col-left col-4">
|
|
<a href="">Nữ</a>
|
|
<a href="">Nam</a>
|
|
<a href="">Trẻ em</a>
|
|
<a href="/san-pham-xa-hang" style="color: #FF0000;">SALE</a>
|
|
</div>
|
|
|
|
<div class="col-4 text-center">
|
|
<a href="/"><img src="images/logo.png" alt="Thời trang" width="1" height="1"/></a>
|
|
</div>
|
|
|
|
<div class="col-right col-4">
|
|
<div class="item">
|
|
<a href="javascript:void(0)" class="icons icon-search" id="js-header-search" title="Tìm kiếm sản phẩm"></a>
|
|
|
|
<div class="header-search-group">
|
|
<form method="get" action="/tim" name="search">
|
|
<input type="text" id="js-seach-input" name="q" placeholder="Tìm kiếm" value="" autocomplete="off" class="text-search">
|
|
<button type="submit" class="btn-search icons"></button>
|
|
</form>
|
|
|
|
<div class="autocomplete-suggestions" style="display: none;"><!-- search data --></div>
|
|
</div>
|
|
</div>
|
|
|
|
<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="/dang-ky">Đăng ký</a>
|
|
<a href="/dang-nhap">Đăng nhập</a>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="tel:{{ global.settings.hotline }}" class="icons icon-phone" title=""></a>
|
|
|
|
<a href="/cart" class="icons icon-cart" title="Giỏ hàng">
|
|
<span class="cart-count js-cart-count">0</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="header-policy-group">
|
|
<div class="item">
|
|
<i class="icons icon-tag"></i>
|
|
|
|
<div class="text d-flex align-items-center">
|
|
<p>giảm thêm <b class="font-800">15%</b></p>
|
|
<p>
|
|
Nhập mã: <b style="text-decoration: underline;font-weight: 800;">VNWOW</b><br>
|
|
<span class="text-14 d-block">ĐH ĐẦU TIÊN TỪ 700K</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<i class="icons icon-box"></i>
|
|
|
|
<div class="text"> Thanh toán khi nhận hàng </div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<i class="icons icon-truck"></i>
|
|
|
|
<div class="text"> Miễn phí vận chuyển </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Homepage -->
|
|
<div class="homepage container" 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/1200x470" alt="" width="" height="" class="owl-lazy"/></a>
|
|
<a href=""><img data-src="images/homepage/slider.png" alt="" width="" height="" class="owl-lazy"/></a>
|
|
</div>
|
|
|
|
<!-- Deal -->
|
|
<div class="home-deal-group">
|
|
<div class="group-title d-flex flex-wrap align-items-baseline justify-content-between">
|
|
<div class="d-flex flex-wrap align-items-baseline">
|
|
<i class="icons icon-bolt"></i>
|
|
|
|
<h2 class="title">FLASH SALE</h2>
|
|
|
|
<p>Ưu đãi trong ngày</p>
|
|
|
|
<div class="deal-time-holder">
|
|
<b>Kết thúc sau</b>
|
|
<div class="deal-countdown js-countdown-time"><!-- <b>02</b> <b>32</b> <b>16</b> --></div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="/deal" class="box-btn">XEM TẤT CẢ</a>
|
|
</div>
|
|
|
|
<div class="product-holder js-product">
|
|
<div class="owl-carousel owl-theme custom-nav">
|
|
|
|
<div class="p-item">
|
|
<a href="" class="p-img p-img-list">
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|
<img src="images/product-3.png" alt="" width="250" height="250"/>
|
|
</a>
|
|
|
|
<div class="p-type-group">
|
|
<span class="p-deal-discount">-20%</span>
|
|
<span class="p-type-new">NEW</span>
|
|
</div>
|
|
|
|
<div class="p-text">
|
|
<a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a>
|
|
|
|
<div class="p-price-group">
|
|
<p class="p-price">270.000đ</p>
|
|
|
|
<p class="p-old-price"> 465.000đ </p>
|
|
</div>
|
|
|
|
<div class="p-deal-group">
|
|
<p class="p-line-holder">
|
|
<span class="p-line" style="width: 40%;"></span>
|
|
</p>
|
|
|
|
<p class="p-sale-quantity">40% Đã bán</p>
|
|
</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-type-group"> <span class="p-deal-discount">-20%</span> </div><div class="p-btn-group"> <a href="javascript:void(0)" class="p-btn-view"></a> <a href="javascript:void(0)" class="p-btn-buy"></a> </div><div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div><div class="p-deal-group"> <p class="p-line-holder"> <span class="p-line" style="width: 30%;"></span> </p><p class="p-sale-quantity">30% Đã bán</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-3.png" alt="" width="250" height="250"/> <img src="images/product-1.png" alt="" width="250" height="250"/> </a> <div class="p-type-group"> </div><div class="p-btn-group"> <a href="javascript:void(0)" class="p-btn-view"></a> <a href="javascript:void(0)" class="p-btn-buy"></a> </div><div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div><div class="p-deal-group"> <p class="p-line-holder"> <span class="p-line" style="width: 10%;"></span> </p><p class="p-sale-quantity">10% Đã bán</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-4.png" alt="" width="250" height="250"/> <img src="images/homepage/under-deal-2.png" alt="" width="250" height="250"/> </a> <div class="p-type-group"> <span class="p-type-new">NEW</span> </div><div class="p-btn-group"> <a href="javascript:void(0)" class="p-btn-view"></a> <a href="javascript:void(0)" class="p-btn-buy"></a> </div><div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div><div class="p-deal-group"> <p class="p-line-holder"> <span class="p-line" style="width: 40%;"></span> </p><p class="p-sale-quantity">40% Đã bán</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-5.png" alt="" width="250" height="250"/> <img src="images/product-6.png" alt="" width="250" height="250"/> </a> <div class="p-type-group"> <span class="p-deal-discount">-20%</span> <span class="p-type-new">NEW</span> </div><div class="p-btn-group"> <a href="javascript:void(0)" class="p-btn-view"></a> <a href="javascript:void(0)" class="p-btn-buy"></a> </div><div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div><div class="p-deal-group"> <p class="p-line-holder"> <span class="p-line" style="width: 70%;"></span> </p><p class="p-sale-quantity">70% Đã bán</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-6.png" alt="" width="250" height="250"/> <img src="images/product-5.png" alt="" width="250" height="250"/> </a> <div class="p-type-group"> <span class="p-deal-discount">-20%</span> </div><div class="p-btn-group"> <a href="javascript:void(0)" class="p-btn-view"></a> <a href="javascript:void(0)" class="p-btn-buy"></a> </div><div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div><div class="p-deal-group"> <p class="p-line-holder"> <span class="p-line" style="width: 40%;"></span> </p><p class="p-sale-quantity">40% Đã bán</p></div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Banner -->
|
|
<div class="banner-under-deal hover-img row" data-aos="fade-up" data-aos-duration="1300">
|
|
<div class="col-6 d-flex flex-wrap col-left">
|
|
<a href="">
|
|
<img data-src="images/homepage/under-deal-1.png" alt="banner" width="1" height="1" class="lazy"/>
|
|
</a>
|
|
<a href="">
|
|
<img data-src="images/homepage/under-deal-2.png" alt="banner" width="1" height="1" class="lazy"/>
|
|
</a>
|
|
<a href="">
|
|
<img data-src="images/homepage/under-deal-3.png" alt="banner" width="1" height="1" class="lazy"/>
|
|
</a>
|
|
<a href="">
|
|
<img data-src="images/homepage/under-deal-4.png" alt="banner" width="1" height="1" class="lazy"/>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="" class="col-6">
|
|
<img data-src="images/homepage/under-deal-big.png" alt="banner" width="1" height="1" class="lazy"/>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- SP mới -->
|
|
<div class="home-product-group" data-aos="fade-up" data-aos-duration="1300">
|
|
<div class="box-title-group">
|
|
<h2 class="title" data-aos="fade-right" data-aos-duration="1000">Hàng mới về</h2>
|
|
|
|
<a href="" class="box-btn">XEM TẤT CẢ</a>
|
|
</div>
|
|
|
|
<div class="product-holder js-product">
|
|
<div class="owl-carousel owl-theme custom-nav">
|
|
|
|
<div class="p-item">
|
|
<a href="" class="p-img p-img-list">
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|
<img src="images/product-3.png" alt="" width="250" height="250"/>
|
|
|
|
</a>
|
|
|
|
<div class="p-type-group">
|
|
<span class="p-discount">-20%</span>
|
|
<span class="p-type-new">NEW</span>
|
|
</div>
|
|
|
|
<div class="p-text">
|
|
<a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a>
|
|
|
|
<div class="p-price-group">
|
|
<p class="p-price">270.000đ</p>
|
|
|
|
<p class="p-old-price"> 465.000đ </p>
|
|
</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-type-group"> <span class="p-discount">-20%</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-3.png" alt="" width="250" height="250"/> <img src="images/product-4.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-4.png" alt="" width="250" height="250"/> <img src="images/product-5.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">Liên hệ</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-5.png" alt="" width="250" height="250"/> <img src="images/product-6.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-discount">-20%</span> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-6.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-1.png" alt="" width="250" height="250"/> <img src="images/product-3.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SP bán chạy -->
|
|
<div class="home-product-group" data-aos="fade-up" data-aos-duration="1300">
|
|
<div class="box-title-group">
|
|
<h2 class="title" data-aos="fade-right" data-aos-duration="1000">Hàng BÁN CHẠY</h2>
|
|
|
|
<a href="" class="box-btn">XEM TẤT CẢ</a>
|
|
</div>
|
|
|
|
<div class="product-holder js-product">
|
|
<div class="owl-carousel owl-theme custom-nav">
|
|
|
|
<div class="p-item">
|
|
<a href="" class="p-img p-img-list">
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|
<img src="images/product-3.png" alt="" width="250" height="250"/>
|
|
|
|
</a>
|
|
|
|
<div class="p-type-group">
|
|
<span class="p-discount">-20%</span>
|
|
<span class="p-type-new">NEW</span>
|
|
</div>
|
|
|
|
<div class="p-text">
|
|
<a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a>
|
|
|
|
<div class="p-price-group">
|
|
<p class="p-price">270.000đ</p>
|
|
|
|
<p class="p-old-price"> 465.000đ </p>
|
|
</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-type-group"> <span class="p-discount">-20%</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-3.png" alt="" width="250" height="250"/> <img src="images/product-4.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-4.png" alt="" width="250" height="250"/> <img src="images/product-5.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">Liên hệ</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-5.png" alt="" width="250" height="250"/> <img src="images/product-6.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-discount">-20%</span> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-6.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-1.png" alt="" width="250" height="250"/> <img src="images/product-3.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="banner-under-product hover-img" data-aos="fade-up" data-aos-duration="1300">
|
|
<a href=""><img data-src="images/homepage/banner-1.png" alt="banner" width="1" height="1" class="lazy"/></a>
|
|
<a href=""><img data-src="images/homepage/banner-2.png" alt="banner" width="1" height="1" class="lazy"/></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="1000">
|
|
<p class="title" data-aos="fade-right" data-aos-duration="1500">Khách hàng nói về chúng tôi</p>
|
|
|
|
<div class="customer-comment-list 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="lazy"/>
|
|
</div>
|
|
|
|
<i class="avatar" style="background-image: url(images/homepage/customer-avatar.png)"></i>
|
|
|
|
<div class="text">
|
|
<i class="icon-star star-5"></i>
|
|
|
|
<div class="item-name">
|
|
<b>Nguyễn Hồng nhung</b>
|
|
<span> - 0383 100 ***</span>
|
|
</div>
|
|
|
|
<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 class="item">
|
|
<div class="image">
|
|
<img data-src="images/homepage/comment-2.png" alt="comment" width="1" height="1" class="lazy"/>
|
|
</div>
|
|
|
|
<i class="avatar" style="background-image: url(images/homepage/customer-avatar.png)"></i>
|
|
|
|
<div class="text">
|
|
<i class="icon-star star-5"></i>
|
|
|
|
<div class="item-name">
|
|
<b>Nguyễn Hồng nhung</b>
|
|
<span> - 0383 100 ***</span>
|
|
</div>
|
|
|
|
<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 class="item">
|
|
<div class="image">
|
|
<img data-src="images/homepage/comment-3.png" alt="comment" width="1" height="1" class="lazy"/>
|
|
</div>
|
|
|
|
<i class="avatar" style="background-image: url(images/homepage/customer-avatar.png)"></i>
|
|
|
|
<div class="text">
|
|
<i class="icon-star star-5"></i>
|
|
|
|
<div class="item-name">
|
|
<b>Nguyễn Hồng nhung</b>
|
|
<span> - 0383 100 ***</span>
|
|
</div>
|
|
|
|
<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 class="item">
|
|
<div class="image">
|
|
<img data-src="images/homepage/comment-1.png" alt="comment" width="1" height="1" class="lazy"/>
|
|
</div>
|
|
|
|
<i class="avatar" style="background-image: url(images/homepage/customer-avatar.png)"></i>
|
|
|
|
<div class="text">
|
|
<i class="icon-star star-5"></i>
|
|
|
|
<div class="item-name">
|
|
<b>Nguyễn Hồng nhung</b>
|
|
<span> - 0383 100 ***</span>
|
|
</div>
|
|
|
|
<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 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>
|
|
|
|
<!-- Product category -->
|
|
<div class="product-page container" style="display: none;">
|
|
<div class="row">
|
|
<div class="col-9">
|
|
<div class="page-title-group d-flex flex-wrap align-items-center justify-content-between">
|
|
<h1 class="page-title">Thời trang Nữ</h1>
|
|
|
|
<select>
|
|
<option value="">Sắp xếp theo</option>
|
|
<option value="">option 1</option>
|
|
<option value="">option 2</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="product-list">
|
|
<div class="p-item" data-aos="fade-up" data-aos-duration="1300">
|
|
<a href="" class="p-img p-img-list">
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|
<img src="images/product-3.png" alt="" width="250" height="250"/>
|
|
|
|
</a>
|
|
|
|
<div class="p-type-group">
|
|
<span class="p-discount">-20%</span>
|
|
<span class="p-type-new">NEW</span>
|
|
</div>
|
|
|
|
<div class="p-text">
|
|
<a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a>
|
|
|
|
<div class="p-price-group">
|
|
<p class="p-price">270.000đ</p>
|
|
|
|
<p class="p-old-price"> 465.000đ </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-type-group"> <span class="p-discount">-20%</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img p-img-list"> <img src="images/product-3.png" alt="" width="250" height="250"/> <img src="images/product-4.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img p-img-list"> <img src="images/product-4.png" alt="" width="250" height="250"/> <img src="images/product-5.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">Liên hệ</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img p-img-list"> <img src="images/product-5.png" alt="" width="250" height="250"/> <img src="images/product-6.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-discount">-20%</span> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img p-img-list"> <img src="images/product-6.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div><div class="p-item" data-aos="fade-up" data-aos-duration="1300"> <a href="" class="p-img p-img-list"> <img src="images/product-1.png" alt="" width="250" height="250"/> <img src="images/product-3.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div>
|
|
</div>
|
|
|
|
<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 class="col-3 product-filter-container">
|
|
<div class="filter-item js-filter-item">
|
|
<p class="filter-title js-filter-title">Danh mục sản phẩm</p>
|
|
|
|
<div class="category-list js-filter-list">
|
|
<div class="cate-item">
|
|
<a href="" class="cat-1">Áo Quần</a>
|
|
|
|
<div class="cate-child-list">
|
|
<a href="">Áo ngắn tay</a>
|
|
<a href="">Áo dài tay</a> <a href="">Áo sơ mi</a> <a href="">Áo khoác</a> <a href="">Áo Quần</a> <a href="">Áo ngắn tay</a> <a href="">Áo dài tay</a> <a href="">Áo sơ mi</a> <a href="">Áo khoác</a> <a href="">Quần jeans</a> <a href="">Quần dài</a> <a href="">Quần shorts</a> <a href="">Váy</a> <a href="">Đồ bộ</a> <a href="">Đồ mặc nhà</a> <a href="">Đồ mặc trong</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cate-item">
|
|
<a href="" class="cat-1">Phụ kiện</a>
|
|
|
|
<div class="cate-child-list">
|
|
<a href="">Phụ kiện</a><a href="">Đồ dùng cá nhân</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cate-item">
|
|
<a href="" class="cat-1">Giá tốt</a>
|
|
</div>
|
|
|
|
<div class="cate-item">
|
|
<a href="" class="cat-1">Sale</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-item js-filter-item">
|
|
<p class="filter-title js-filter-title">Khoảng giá</p>
|
|
|
|
<div class="filter-list js-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 js-filter-item">
|
|
<p class="filter-title js-filter-title">Attribute</p>
|
|
|
|
<div class="filter-list js-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 js-filter-item">
|
|
<p class="filter-title js-filter-title">Attribute</p>
|
|
|
|
<div class="filter-list js-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>
|
|
</div>
|
|
|
|
|
|
<!-- product deal page -->
|
|
<div class="product-page product-deal-page container" style="display: none;">
|
|
|
|
<div class="group-title d-flex flex-wrap align-items-baseline">
|
|
<i class="icons icon-bolt"></i>
|
|
|
|
<h2 class="title">FLASH SALE</h2>
|
|
|
|
<p>Ưu đãi trong ngày</p>
|
|
|
|
<div class="deal-time-holder">
|
|
<b>Kết thúc sau</b>
|
|
<div class="deal-countdown js-countdown-time"><!-- <b>02</b> <b>32</b> <b>16</b> --></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-list">
|
|
<div class="p-item">
|
|
<a href="" class="p-img p-img-list">
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|
<img src="images/product-3.png" alt="" width="250" height="250"/>
|
|
</a>
|
|
|
|
<div class="p-type-group">
|
|
<span class="p-deal-discount">-20%</span>
|
|
<span class="p-type-new">NEW</span>
|
|
</div>
|
|
|
|
<div class="p-text">
|
|
<a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a>
|
|
|
|
<div class="p-price-group">
|
|
<p class="p-price">270.000đ</p>
|
|
|
|
<p class="p-old-price"> 465.000đ </p>
|
|
</div>
|
|
|
|
<div class="p-deal-group">
|
|
<p class="p-line-holder">
|
|
<span class="p-line" style="width: 40%;"></span>
|
|
</p>
|
|
|
|
<p class="p-sale-quantity">40% Đã bán</p>
|
|
</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-type-group"> <span class="p-deal-discount">-20%</span> </div><div class="p-btn-group"> <a href="javascript:void(0)" class="p-btn-view"></a> <a href="javascript:void(0)" class="p-btn-buy"></a> </div><div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div><div class="p-deal-group"> <p class="p-line-holder"> <span class="p-line" style="width: 30%;"></span> </p><p class="p-sale-quantity">30% Đã bán</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-3.png" alt="" width="250" height="250"/> <img src="images/product-1.png" alt="" width="250" height="250"/> </a> <div class="p-type-group"> </div><div class="p-btn-group"> <a href="javascript:void(0)" class="p-btn-view"></a> <a href="javascript:void(0)" class="p-btn-buy"></a> </div><div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div><div class="p-deal-group"> <p class="p-line-holder"> <span class="p-line" style="width: 10%;"></span> </p><p class="p-sale-quantity">10% Đã bán</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-4.png" alt="" width="250" height="250"/> <img src="images/homepage/under-deal-2.png" alt="" width="250" height="250"/> </a> <div class="p-type-group"> <span class="p-type-new">NEW</span> </div><div class="p-btn-group"> <a href="javascript:void(0)" class="p-btn-view"></a> <a href="javascript:void(0)" class="p-btn-buy"></a> </div><div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div><div class="p-deal-group"> <p class="p-line-holder"> <span class="p-line" style="width: 40%;"></span> </p><p class="p-sale-quantity">40% Đã bán</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-5.png" alt="" width="250" height="250"/> <img src="images/product-6.png" alt="" width="250" height="250"/> </a> <div class="p-type-group"> <span class="p-deal-discount">-20%</span> <span class="p-type-new">NEW</span> </div><div class="p-btn-group"> <a href="javascript:void(0)" class="p-btn-view"></a> <a href="javascript:void(0)" class="p-btn-buy"></a> </div><div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div><div class="p-deal-group"> <p class="p-line-holder"> <span class="p-line" style="width: 70%;"></span> </p><p class="p-sale-quantity">70% Đã bán</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-6.png" alt="" width="250" height="250"/> <img src="images/product-5.png" alt="" width="250" height="250"/> </a> <div class="p-type-group"> <span class="p-deal-discount">-20%</span> </div><div class="p-btn-group"> <a href="javascript:void(0)" class="p-btn-view"></a> <a href="javascript:void(0)" class="p-btn-buy"></a> </div><div class="p-text"> <a href="" class="p-name"><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div><div class="p-deal-group"> <p class="p-line-holder"> <span class="p-line" style="width: 40%;"></span> </p><p class="p-sale-quantity">40% Đã bán</p></div></div></div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
|
|
<!-- product-detail -->
|
|
<div class="product-detail-page container" style="display: none;">
|
|
<div class="row">
|
|
<div class="col-5">
|
|
<div class="pd-image-group d-flex flex-wrap">
|
|
<div class="pd-image-gallery" 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 class="pd-image-large" id="js-big-img">
|
|
<a href="javascript:void(0)" class="item" data-id="js-fancybox-1">
|
|
<img src="images/product-1.png"/>
|
|
<span class="icon-zoom" title="Bấm để phóng to"></span>
|
|
</a>
|
|
|
|
<a href="javascript:void(0)" class="item" data-id="js-fancybox-2">
|
|
<img src="images/product-2.png"/>
|
|
<span class="icon-zoom" title="Bấm để phóng to"></span>
|
|
</a>
|
|
|
|
<a href="javascript:void(0)" class="item" data-id="js-fancybox-3"><img src="images/product-3.png"/> <span class="icon-zoom" title="Bấm để phóng to"></span></a><a href="javascript:void(0)" class="item" data-id="js-fancybox-4"><img src="images/product-4.png"/> <span class="icon-zoom" title="Bấm để phóng to"></span></a><a href="javascript:void(0)" class="item" data-id="js-fancybox-5"><img src="images/product-5.png"/> <span class="icon-zoom" title="Bấm để phóng to"></span></a><a href="javascript:void(0)" class="item" data-id="js-fancybox-6"><img src="images/product-6.png"/> <span class="icon-zoom" title="Bấm để phóng to"></span></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>
|
|
<!-- MÔ TẢ -->
|
|
<div class="pd-box-group js-box-container">
|
|
<div class="box-title-group">
|
|
<p class="title">MÔ TẢ</p>
|
|
<a href="javascript:void(0)" class="icons icon-down js-box-title"></a>
|
|
|
|
<p class="pd-sku">Mã sản phẩm: 453272</p>
|
|
</div>
|
|
|
|
<div class="pd-box-content js-box-content">
|
|
Tổng quan<br>
|
|
- Vải gân dày vừa phải.<br>
|
|
- Thiết kế đa năng phù hợp với mọi kiểu dáng.<br>
|
|
- Một chiếc áo thun trơn tay lỡ với đường cắt mỏng.<br>
|
|
- Cổ áo nhỏ gọn.<br>
|
|
- Kiểu dạng sọc nhỏ.<br>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chất liệu -->
|
|
<div class="pd-box-group js-box-container">
|
|
<div class="box-title-group">
|
|
<p class="title">Chất liệu</p>
|
|
<a href="javascript:void(0)" class="icons icon-down js-box-title"></a>
|
|
</div>
|
|
|
|
<div class="pd-box-content js-box-content">
|
|
Tổng quan<br>
|
|
- Vải gân dày vừa phải.<br>
|
|
- Thiết kế đa năng phù hợp với mọi kiểu dáng.<br>
|
|
- Một chiếc áo thun trơn tay lỡ với đường cắt mỏng.<br>
|
|
- Cổ áo nhỏ gọn.<br>
|
|
- Kiểu dạng sọc nhỏ.<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pd-box-group pd-comment-container" id="pd-comment">
|
|
<div class="box-title-group">
|
|
<p class="title">ĐÁNH GIÁ</p>
|
|
<p class="text-13">
|
|
<i class="icon-star star-5"></i> (0)
|
|
</p>
|
|
</div>
|
|
|
|
<div class="pd-comment-detail">
|
|
<div class="box-left">
|
|
<b>ĐÁNH GIÁ CỦA KHÁCH HÀNG</b>
|
|
|
|
<p>
|
|
<i class="icon-star star-5"></i> (0)
|
|
</p>
|
|
<p>
|
|
<i class="icon-star star-4"></i> (0)
|
|
</p>
|
|
<p>
|
|
<i class="icon-star star-3"></i> (0)
|
|
</p>
|
|
<p>
|
|
<i class="icon-star star-2"></i> (0)
|
|
</p>
|
|
<p>
|
|
<i class="icon-star star-1"></i> (0)
|
|
</p>
|
|
</div>
|
|
|
|
<a href="javascript:void(0)" class="pd-form-btn" onclick="$('#js-form-group').toggle();">VIẾT BÀI ĐÁNH GIÁ</a>
|
|
|
|
<div class="pd-form-group" id="js-form-group">
|
|
<textarea placeholder="Nội dung bình luận"></textarea>
|
|
<input type="text" placeholder="Họ tên"/>
|
|
<input type="text" placeholder="Email"/>
|
|
<a href="javascript:void(0)" class="btn btn-dark">Gửi đánh giá</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pd-review-count">0 bài đánh giá</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-4">
|
|
<h1 class="page-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</h1>
|
|
|
|
<div class="pd-price-group">
|
|
<div class="d-flex align-items-baseline">
|
|
<i class="icons icon-bolt"></i>
|
|
|
|
<span class="pd-price">279.000<u>đ</u></span>
|
|
<del class="pd-old-price">465.000<u>đ</u></del>
|
|
</div>
|
|
|
|
<a href="javascript:void(0)" class="d-flex align-items-center" onclick='$("body,html").animate({ scrollTop: $("#pd-comment").offset().top - 90},800);'>
|
|
<i class="icon-star star-5"></i> (0)
|
|
</a>
|
|
</div>
|
|
|
|
<div class="pd-deal-holder">
|
|
<div class="group-title d-flex flex-wrap align-items-center justify-content-between">
|
|
<div class="d-flex align-items-center">
|
|
<i class="icon-bolt"></i>
|
|
<p class="title">FLASH SALE</p>
|
|
</div>
|
|
|
|
<div class="deal-time-holder d-flex flex-wrap align-items-center">
|
|
<b>Kết thúc sau</b>
|
|
<div class="deal-countdown js-countdown-time"><!-- <b>02</b> <b>32</b> <b>16</b> --></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pd-deal-line">
|
|
<span class="pd-line" style="width: 83%"></span>
|
|
</div>
|
|
|
|
<p class="pd-deal-count">83% Đã bán</p>
|
|
</div>
|
|
|
|
<div class="pd-summary-group">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</div>
|
|
|
|
<div class="pd-variant-group position-relative">
|
|
<a href="#fancybox-size-table" data-fancybox="" class="pd-btn-size" style="position: absolute;right: 0;top: 2px;">BẢNG KÍCH THƯỚC</a>
|
|
|
|
<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>
|
|
|
|
<p class="pd-status-group" style="background: #F1FBEF;color: #3DBF82">Còn hàng</p>
|
|
<p class="pd-status-group" style="background: #FFCCCE;color: #EE1B25">Hết hàng</p>
|
|
|
|
<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-btn-group">
|
|
<a href="javascript:void(0)">Mua ngay</a>
|
|
<a href="javascript:void(0)">Thêm vào giỏ hàng</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-3 pd-col-right">
|
|
<p class="box-title">Đã xem gần đây</p>
|
|
|
|
<div>
|
|
<div class="p-item">
|
|
<a href="" class="p-img p-img-list">
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|
<img src="images/product-3.png" alt="" width="250" height="250"/>
|
|
|
|
</a>
|
|
|
|
<div class="p-type-group">
|
|
<span class="p-discount">-20%</span>
|
|
<span class="p-type-new">NEW</span>
|
|
</div>
|
|
|
|
<div class="p-text">
|
|
<a href="" class="p-name"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti rerum unde nam culpa, qui sapiente, repudiandae fugiat cum tempore earum labore illo tempora voluptate dolorum magnam. Culpa sed officia aliquam.</h3></a>
|
|
|
|
<div class="p-price-group">
|
|
<p class="p-price">270.000đ</p>
|
|
|
|
<p class="p-old-price"> 465.000đ </p>
|
|
</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-type-group"> <span class="p-discount">-20%</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-3.png" alt="" width="250" height="250"/> <img src="images/product-4.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-4.png" alt="" width="250" height="250"/> <img src="images/product-5.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">Liên hệ</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-5.png" alt="" width="250" height="250"/> <img src="images/product-6.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-discount">-20%</span> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-6.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-1.png" alt="" width="250" height="250"/> <img src="images/product-3.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sản phẩm liên quan -->
|
|
<div class="home-product-group">
|
|
<div class="box-title-group">
|
|
<h2 class="title">Sản phẩm liên quan</h2>
|
|
</div>
|
|
|
|
<div class="product-holder js-product">
|
|
<div class="owl-carousel owl-theme custom-nav">
|
|
|
|
<div class="p-item">
|
|
<a href="" class="p-img p-img-list">
|
|
<img src="images/product-1.png" alt="" width="250" height="250"/>
|
|
<img src="images/product-3.png" alt="" width="250" height="250"/>
|
|
|
|
</a>
|
|
|
|
<div class="p-type-group">
|
|
<span class="p-discount">-20%</span>
|
|
<span class="p-type-new">NEW</span>
|
|
</div>
|
|
|
|
<div class="p-text">
|
|
<a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a>
|
|
|
|
<div class="p-price-group">
|
|
<p class="p-price">270.000đ</p>
|
|
|
|
<p class="p-old-price"> 465.000đ </p>
|
|
</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-type-group"> <span class="p-discount">-20%</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-3.png" alt="" width="250" height="250"/> <img src="images/product-4.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-4.png" alt="" width="250" height="250"/> <img src="images/product-5.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">Liên hệ</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-5.png" alt="" width="250" height="250"/> <img src="images/product-6.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-discount">-20%</span> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p><p class="p-old-price"> 465.000đ </p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-6.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> <span class="p-type-new">NEW</span> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div><div class="p-item"> <a href="" class="p-img p-img-list"> <img src="images/product-1.png" alt="" width="250" height="250"/> <img src="images/product-3.png" alt="" width="250" height="250"/> </a><div class="p-type-group"> </div><div class="p-text"> <a href="" class="p-name"><h3>Bỉm quần Moony Natural size M46</h3></a> <div class="p-price-group"> <p class="p-price">270.000đ</p></div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="fancybox-size-table" class="pd-size-table">
|
|
<p class="title">Hướng dẫn chọn kích cỡ</p>
|
|
<p class="note">* Bảng kích thước này chỉ dành cho mục đích tham khảo.</p>
|
|
|
|
<table>
|
|
<tr style="font-weight: bold">
|
|
<td>Thông số/Cỡ</td>
|
|
<td>S (27)</td>
|
|
<td>M (28)</td>
|
|
<td>L (29)</td>
|
|
<td>XL (30)</td>
|
|
<td>XXL (31)</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Chiều cao (cm)</td>
|
|
<td>150-155</td>
|
|
<td>155-163</td>
|
|
<td>160-165</td>
|
|
<td>152-166</td>
|
|
<td>163-168</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Cân nặng (kg)</td>
|
|
<td>41-46</td>
|
|
<td>47-52</td>
|
|
<td>53-58</td>
|
|
<td>59-64</td>
|
|
<td>65-69</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Rộng ngực (cm)</td>
|
|
<td>79-82</td>
|
|
<td>82-87</td>
|
|
<td>88-94</td>
|
|
<td>94-99</td>
|
|
<td>99-104</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Rộng mông (cm)</td>
|
|
<td>88-90</td>
|
|
<td>90-94</td>
|
|
<td>94-98</td>
|
|
<td>98-102</td>
|
|
<td>102-107</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Giỏ hàng -->
|
|
<div class="cart-page container">
|
|
<div class="cart-step-1 row" style="display: none;">
|
|
<div class="col-12 box-title">
|
|
<p class="d-inline-block font-600">Giỏ hàng</p>
|
|
<p class="d-inline-block text-15">1 sản phẩm</p>
|
|
</div>
|
|
|
|
<div class="col-8">
|
|
<!-- Sản phẩm -->
|
|
<div class="item-row">
|
|
<a href="" class="p-img"> <img src="images/product-1.png"/> </a>
|
|
|
|
<div class="item-text">
|
|
<div class="item-left">
|
|
<a href="" class="p-name">Bỉm quần Merries size M 58 miếng (6-11kg)</a>
|
|
|
|
<p class="p-price">290.000 <u>đ</u></p>
|
|
|
|
<div class="p-variant">Kích thước: 30 miếng</div>
|
|
|
|
<a href="javascript:void(0)" class="icons icon-edit" title="Thay đổi lựa chọn" onclick="$('.cart-edit-container').show()"></a>
|
|
</div>
|
|
|
|
<div class="item-quanity">
|
|
<span>Số lượng</span>
|
|
|
|
<div class="item-quanity-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" data-min="1">
|
|
<a href="javascript:void(0)" class="js-btn-change" data-value="1"> + </a>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="javascript:void(0)" class="icons icon-delete" title="Xóa sản phẩm"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-row"> <a href="" class="p-img"> <img src="images/product-5.png"/> </a> <div class="item-text"> <div class="item-left"> <a href="" class="p-name">Bỉm quần Merries size M 58 miếng (6-11kg)</a> <p class="p-price">290.000 <u>đ</u></p><div class="p-variant">Kích thước: 30 miếng</div><a href="javascript:void(0)" class="icons icon-edit" title="Thay đổi lựa chọn" onclick="$('.cart-edit-container').show()"></a> </div><div class="item-quanity"> <span>Số lượng</span> <div class="item-quanity-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" data-min="1"> <a href="javascript:void(0)" class="js-btn-change" data-value="1"> + </a> </div></div><a href="javascript:void(0)" class="icons icon-delete" title="Xóa sản phẩm"></a> </div></div>
|
|
<!-- // Sản phẩm -->
|
|
|
|
<div class="voucher-holder">
|
|
<input type="text" placeholder="Nhập mã giảm giá">
|
|
|
|
<span class="voucher-note">
|
|
- Bạn sử dụng mã voucher <b>TEST</b> <br>
|
|
- Giảm giá đơn hàng
|
|
</span>
|
|
|
|
<button type="button" class="icons icon-right"></button>
|
|
</div>
|
|
|
|
<a href="/" style="color: #000;font-size: 16px;font-weight: 500;">TIẾP TỤC MUA SẮM</a>
|
|
</div>
|
|
|
|
<div class="col-4">
|
|
<div class="cart-tbl-info">
|
|
<table>
|
|
<tr>
|
|
<td>Tạm tính</td>
|
|
<td>
|
|
<span>215.000<u>đ</u></span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Vận chuyển</td>
|
|
<td>Freeship nội thành Hà Nội, TP. HCM</td>
|
|
</tr>
|
|
|
|
<tr class="total-price">
|
|
<td>Tộng cộng</td>
|
|
<td>
|
|
<p> 212.500<u>đ</u></p>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="2">
|
|
<a href="/cart?step=2" class="btn-cart-submit">TIẾN HÀNH THANH TOÁN</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cart-edit-container">
|
|
<div class="edit-holder">
|
|
<a href="javascript:void(0)" class="icons icon-delete" onclick="$('.cart-edit-container').hide();"></a>
|
|
|
|
<div class="cart-edit-content">
|
|
<div class="item-image"> <img src="images/product-1.png"/> </div>
|
|
|
|
<div class="item-text">
|
|
<a href="" class="item-name" target="_blank">Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi magni fugiat, ab</a>
|
|
|
|
<p class="item-price">215.000<u>đ</u></p>
|
|
|
|
<div class="pd-variant-group position-relative">
|
|
<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>
|
|
|
|
<a href="javascript:void(0)" class="btn-update">CẬP NHẬT GIỎ HÀNG</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-popup" onclick="$('.cart-edit-container').hide();"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="cart-step-2" method="post" enctype="multipart/form-data" action="/send-cart">
|
|
<div class="cart-voucher-group">
|
|
<div class="box-title">
|
|
<p>Bạn có mã giảm giá?</p>
|
|
<a href="javascript:void(0)" onclick="$('.cart-voucher-holder').slideToggle(300)">Bấm vào đây để nhập mã của bạn</a>
|
|
</div>
|
|
|
|
<div class="cart-voucher-holder">
|
|
<p>Nếu bạn có mã giảm giá, vui lòng áp dụng bên dưới.</p>
|
|
|
|
<input type="text" placeholder="Mã giảm giá"/>
|
|
|
|
<button type="button">ÁP DỤNG</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cart-info-holder row">
|
|
<div class="col-6">
|
|
<p class="title">Thông tin giao hàng</p>
|
|
|
|
<div class="cart-input-holder">
|
|
<input type="text" placeholder="Họ và tên" />
|
|
<input type="text" placeholder="Email" />
|
|
<input type="text" placeholder="Số điện thoại" />
|
|
<input type="text" placeholder="Địa 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>
|
|
|
|
<input type="text" placeholder="Ghi chú" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6">
|
|
<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>
|
|
|
|
<div class="cart-summary-group">
|
|
<p class="title">Đơn hàng của bạn</p>
|
|
|
|
<table>
|
|
<tr>
|
|
<td>Sản phẩm </td>
|
|
<td align="right">Tổng cộng</td>
|
|
</tr>
|
|
|
|
<!-- item -->
|
|
<tr class="cart-item-group">
|
|
<td colspan="2">
|
|
<div class="cart-item">
|
|
<a href="" target="_blank" class="cart-name">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</a>
|
|
<b class="cart-quantity">x1</b>
|
|
<div class="item-variant">Xám / S</div>
|
|
</div>
|
|
|
|
<div class="cart-item">
|
|
<a href="" target="_blank" class="cart-name">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</a>
|
|
<b class="cart-quantity">x1</b>
|
|
<div class="item-variant">Xám / S</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- // item -->
|
|
|
|
<tr>
|
|
<td>Giá bán</td>
|
|
<td align="right" style="font-weight: 400">
|
|
<span>212.500</span><u>₫</u>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Vận chuyển</td>
|
|
<td align="right" style="font-weight: 400">
|
|
<span>0</span><u>₫</u>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Tổng tiền</td>
|
|
<td align="right" class="cart-total-price">
|
|
<span>212.500</span><u>₫</u>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="cart-btn-group">
|
|
<td>
|
|
<a href="/">Tiếp tục mua sắm</a>
|
|
</td>
|
|
<td align="right">
|
|
<button type="submit">HOÀN TẤT ĐƠN HÀNG</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Footer -->
|
|
<div class="global-footer">
|
|
<div class="container">
|
|
<div class="footer-brand-group hover-img owl-carousel owl-theme" id="js-footer-brand">
|
|
<a href=""><img data-src="images/global/brand-1.png" alt="" width="1" height="1" class="owl-lazy"/></a>
|
|
<a href=""><img data-src="images/global/brand-2.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/brand-3.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/brand-4.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/brand-5.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/brand-6.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/brand-3.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/brand-4.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/brand-5.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/brand-6.png" alt="" width="1" height="1" class="owl-lazy"/></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-subscribe-group">
|
|
<div class="hover-img owl-carousel owl-theme" id="js-footer-subscribe">
|
|
<a href=""><img data-src="images/global/footer-1.png" alt="" width="1" height="1" class="owl-lazy"/></a>
|
|
<a href=""><img data-src="images/global/footer-2.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/footer-3.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/footer-4.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/footer-5.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/footer-6.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/footer-7.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/footer-8.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/footer-1.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/footer-6.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/footer-7.png" alt="" width="1" height="1" class="owl-lazy"/></a><a href=""><img data-src="images/global/footer-8.png" alt="" width="1" height="1" class="owl-lazy"/></a>
|
|
</div>
|
|
<a href="" target="_blank" class="btn-subscribe">Follow Our Instagram</a>
|
|
</div>
|
|
|
|
<div class="global-header container">
|
|
<div class="global-header-main">
|
|
<div class="row align-items-center">
|
|
<div class="col-left col-4">
|
|
<a href="">Nữ</a>
|
|
<a href="">Nam</a>
|
|
<a href="">Trẻ em</a>
|
|
<a href="/san-pham-xa-hang" style="color: #FF0000;">SALE</a>
|
|
</div>
|
|
|
|
<div class="col-4 text-center">
|
|
<a href="/"><img src="images/logo.png" alt="Thời trang" width="1" height="1"/></a>
|
|
</div>
|
|
|
|
<div class="col-right col-4">
|
|
<a href="" class="icons icon-facebook" title="Facebook" target="_blank"></a>
|
|
<a href="" class="icons icon-google" title="Google" target="_blank"></a>
|
|
<a href="" class="icons icon-youtube" title="Youtube" target="_blank"></a>
|
|
<a href="" class="icons icon-instagram" title="Instagram" target="_blank"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom-group">
|
|
<div class="container d-flex flex-wrap align-items-center justify-content-between">
|
|
<p class="m-0">@ 2023 HuraSoft. All rights reserved</p>
|
|
<i class="icons icon-payment"></i>
|
|
</div>
|
|
</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>
|
|
|
|
|
|
<!-- 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");
|
|
|
|
$('#js-footer-brand').owlCarousel({
|
|
items: 6,
|
|
loop: true,
|
|
margin: 16,
|
|
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-footer-subscribe').owlCarousel({
|
|
items: 8,
|
|
loop: true,
|
|
margin: 0,
|
|
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
|
|
});
|
|
|
|
_globalClickFunction();
|
|
});
|
|
|
|
|
|
function _globalClickFunction() {
|
|
$('#js-header-search').click(function(){
|
|
$(this).toggleClass('active');
|
|
|
|
$('.header-search-group').toggleClass('active');
|
|
});
|
|
|
|
}
|
|
|
|
function run_carousel(holder){
|
|
$(holder + ' .owl-carousel').owlCarousel({
|
|
margin: 16,
|
|
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: 4
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<!-- homepage -->
|
|
<script>
|
|
$(document).ready(function(){
|
|
run_carousel('.js-product');
|
|
|
|
$('#js-home-slider').owlCarousel({
|
|
items: 1,
|
|
loop: true,
|
|
margin: 12,
|
|
autoplay: true,
|
|
autoplayTimeout: 3000,
|
|
autoplaySpeed: 1000,
|
|
autoplayHoverPause:true,
|
|
dots: true,
|
|
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: 3,
|
|
loop: true,
|
|
margin: 16,
|
|
autoplay: false,
|
|
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
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
<!-- product-category -->
|
|
<script>
|
|
$(document).ready(function(){
|
|
$('.js-filter-title').click(function(){
|
|
$(this).parents('.js-filter-item').toggleClass('filter-hide');
|
|
$(this).parents('.js-filter-item').find('.js-filter-list').slideToggle(300);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- product-detail -->
|
|
<script src="js/slick.js"></script>
|
|
<script>
|
|
$(document).ready(function(){
|
|
|
|
_runProductImageSlider();
|
|
|
|
listenQuantityChange();
|
|
|
|
$('.js-box-title').click(function(){
|
|
$(this).toggleClass('active');
|
|
$(this).parents('.js-box-container').find('.js-box-content').slideToggle();
|
|
});
|
|
|
|
$('.js-box-container:first-child .js-box-title').click();
|
|
|
|
$('[data-fancybox="gallery"]').fancybox({
|
|
thumbs : {
|
|
autoStart : true
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
function _runProductImageSlider() {
|
|
var bigimage = $('#js-big-img');
|
|
var thumbs = $('#js-img-gallery');
|
|
|
|
$(thumbs).slick({
|
|
asNavFor: bigimage,
|
|
verticalSwiping: true,
|
|
arrows : true,
|
|
infinite : false,
|
|
centerMode: false,
|
|
dots: false,
|
|
vertical: true,
|
|
slidesToShow: 4,
|
|
slidesToScroll: 1,
|
|
verticalSwiping: true,
|
|
touchThreshold:100,
|
|
centerPadding: '10px',
|
|
focusOnSelect: true,
|
|
nextArrow: '<i class="icons icon-next"></i>',
|
|
prevArrow: '<i class="icons icon-prev"></i>',
|
|
});
|
|
|
|
$(bigimage).slick({
|
|
focusOnSelect: true,
|
|
arrows: false,
|
|
asNavFor: thumbs,
|
|
centerMode: false,
|
|
infinite : false,
|
|
centerPadding: '0',
|
|
dots: false,
|
|
slidesToShow: 1
|
|
});
|
|
|
|
$('#js-big-img .item').click(function(){
|
|
var fancybox_id = $(this).attr('data-id');
|
|
$('#'+fancybox_id).click();
|
|
});
|
|
}
|
|
|
|
|
|
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> |