1876 lines
78 KiB
HTML
1876 lines
78 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<link rel="shortcut icon" href="/images/favicon_audio.png" type="image/x-icon" />
|
||
|
|
<title>DEMO AUDIO 3</title>
|
||
|
|
|
||
|
|
<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="/css/library.css" />
|
||
|
|
<link rel="stylesheet" href="/css/style_pc.css" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!-- HEADER -->
|
||
|
|
<header class="global-header">
|
||
|
|
<!-- HEADER TOP -->
|
||
|
|
<div class="header-top">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row align-items-end">
|
||
|
|
<div class="col-2">
|
||
|
|
<a href="/" class="global-logo">
|
||
|
|
<img src="/images/logo-audio-3.png" alt="logo" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-7">
|
||
|
|
<div class="header-search">
|
||
|
|
<p class="header-contact text-14">
|
||
|
|
Tư vấn bán hàng :
|
||
|
|
<a href="tel:19006755" class="color-primary font-weight-700">1900 6755</a>
|
||
|
|
| Hotline :
|
||
|
|
<a href="tel:19006755" class="color-primary font-weight-700">1900 6755</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="search-bar">
|
||
|
|
<form method="get" action="/tim" enctype="multipart/form-data" name="searchForm">
|
||
|
|
<input type="text" id="js-search-box" name="q" class="search-bar-input"
|
||
|
|
placeholder="Nhập từ khóa cần tìm" value="" autocomplete="off" onclick="getSearchValue()" />
|
||
|
|
<button type="submit" id="js-search-button" class="search-bar-btn">
|
||
|
|
Tìm kiếm
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div class="search-results" style="display: none">
|
||
|
|
<div class="search-results-list"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-2">
|
||
|
|
<div class="header-func header-user">
|
||
|
|
<i class="static-icons static-icon-header-user"></i>
|
||
|
|
<p>
|
||
|
|
<a href="/dang-ky" class="hover-primary">Đăng ký</a>
|
||
|
|
/
|
||
|
|
<a href="/dang-nhap" class="hover-primary">Đăng nhập</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-1">
|
||
|
|
<a href="/cart" class="header-func header-cart">
|
||
|
|
<i class="static-icons static-icon-header-cart p-relative">
|
||
|
|
<span class="header-cart-amount" id="js-header-cart-amount">1</span>
|
||
|
|
</i>
|
||
|
|
<p class="hover-primary">Giỏ hàng</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- HEADER BOTTOM -->
|
||
|
|
<div class="header-bottom">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<!-- LEFT -->
|
||
|
|
<div class="col-9">
|
||
|
|
<div class="wrapper d-flex align-items-center">
|
||
|
|
<!-- NAVBAR -->
|
||
|
|
<div class="header-navbar">
|
||
|
|
<!-- MENU -->
|
||
|
|
<div class="header-navbar-menu">
|
||
|
|
<i class="static-icons static-icon-menu"></i>
|
||
|
|
Danh mục sản phẩm
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- LIST -->
|
||
|
|
<div class="header-navbar-list">
|
||
|
|
<div class="item hover-primary">
|
||
|
|
<a href="" class="d-flex align-items-center gap-8">
|
||
|
|
<img src="/images/static-icon-category-1.png" alt="category icon" class="image d-flex" />
|
||
|
|
Thiết bị Hi-Fi
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- FEATURES -->
|
||
|
|
<div class="header-routing w-100">
|
||
|
|
<ul class="list text-18 font-weight-600 color-white d-flex align-items-center justify-content-around">
|
||
|
|
<li>
|
||
|
|
<a href="/san-pham-khuyen-mai" class="item d-flex align-items-center gap-12">
|
||
|
|
<i class="static-icons static-icon-sale-fire"></i>
|
||
|
|
Khuyến mại
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/gioi-thieu" class="item">Giới thiệu</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/tin-tuc" class="item">Tin tức - Blog</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/lien-he" class="item">Liên hệ</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/tuyen-dung" class="item">Tuyển dụng</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- RIGHT -->
|
||
|
|
<div class="col-3">
|
||
|
|
<ul class="global-socials list h-100">
|
||
|
|
<li class="item">
|
||
|
|
<a href="" class="link">
|
||
|
|
<i class="static-icons static-icon-social-fb"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="" class="link">
|
||
|
|
<i class="static-icons static-icon-social-twitter"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="" class="link">
|
||
|
|
<i class="static-icons static-icon-social-gg-news"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="" class="link">
|
||
|
|
<i class="static-icons static-icon-social-instagram"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="" class="link">
|
||
|
|
<i class="static-icons static-icon-social-youtube"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- HOMEPAGE -->
|
||
|
|
<div class="homepage">
|
||
|
|
<!-- SECTION HERO -->
|
||
|
|
<div class="section-hero mb-3">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row no-gutters">
|
||
|
|
<div class="col-10">
|
||
|
|
<div class="swiper swiper-section-hero">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="/images/static-image-section-hero-1.png" alt="banner hero" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="/images/static-image-section-hero-1.png" alt="banner hero" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-2">
|
||
|
|
<ul class="section-hero-features list">
|
||
|
|
<li class="item">
|
||
|
|
<i class="static-icons static-icon-feature-cart"></i>
|
||
|
|
Sản phẩm đa dạng, mẫu mã phong phú
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<i class="static-icons static-icon-feature-money-pig"></i>
|
||
|
|
Sản phẩm đa dạng, mẫu mã phong phú
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<i class="static-icons static-icon-feature-fly-gift"></i>
|
||
|
|
Sản phẩm đa dạng, mẫu mã phong phú
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<!-- SECTION DEAL -->
|
||
|
|
<div class="section-deal">
|
||
|
|
<!-- HEADING -->
|
||
|
|
<div class="heading d-flex align-items-center justify-content-between py-3">
|
||
|
|
<div class="wrapper-heading d-flex align-items-center gap-24">
|
||
|
|
<h2 class="title text-32 font-weight-600 color-red">
|
||
|
|
Ưu đãi mới nhất cho tuần này
|
||
|
|
</h2>
|
||
|
|
<p class="global-deal-time-countdown">99 : 99 : 99 : 99</p>
|
||
|
|
<p class="text-18 font-weight-600 color-secondary">
|
||
|
|
Giảm giá lên tới 50%++
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a href="" class="font-weight-600 color-secondary hover-primary">Xem tất cả +</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="line-block mb-3"></div>
|
||
|
|
|
||
|
|
<!-- DEAL LIST -->
|
||
|
|
<div class="product-list grid grid--5-cols">
|
||
|
|
<div class="p-item">
|
||
|
|
<div class="p-thumbs">
|
||
|
|
<div class="swiper swiper-product-thumbs">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="swiper-pagination"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<span class="p-price-sale-off">-20%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-info">
|
||
|
|
<h3 class="p-name line-clamp-2 mt-12px">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is dummy text
|
||
|
|
used in laying out print
|
||
|
|
</h3>
|
||
|
|
<p class="p-rating d-flex align-items-center gap-8 my-12px">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
<span class="text-13 font-weight-500 mt-1">1 bình luận</span>
|
||
|
|
</p>
|
||
|
|
<p class="p-price">
|
||
|
|
<span class="p-price-sale">72.880.000₫</span>
|
||
|
|
<del class="p-price-stock">82.880.000₫</del>
|
||
|
|
</p>
|
||
|
|
<div class="p-wrapper-deal p-relative mt-2">
|
||
|
|
<div class="deal-line total"></div>
|
||
|
|
<div class="deal-line remaining js-line-deal-left" style="width: 80%"></div>
|
||
|
|
</div>
|
||
|
|
<p class="p-quantity p-quantity-deal my-12px">
|
||
|
|
<span>Có sẵn <b class="deal-quantity deal-remaint">30</b></span>
|
||
|
|
<span>Đã bán <b class="deal-quantity deal-sold">20</b></span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- SECTION BANNER -->
|
||
|
|
<div class="section-homepage-banner">
|
||
|
|
<div class="swiper swiper-section-homepage-banner">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="/images/static-image-banner-homepage-1.png" alt="Banner" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="/images/static-image-banner-homepage-2.png" alt="Banner" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- SECTION CATEGORY -->
|
||
|
|
<div class="section-category">
|
||
|
|
<div class="category-box mt-4 mb-5">
|
||
|
|
<!-- HEADING -->
|
||
|
|
<div class="heading mb-3">
|
||
|
|
<div class="d-flex align-items-center justify-content-between">
|
||
|
|
<a href="">
|
||
|
|
<h2 class="title">Thiết bị Hi-Fi</h2>
|
||
|
|
</a>
|
||
|
|
<div class="category-child px-3">
|
||
|
|
<ul class="list d-flex align-items-center gap-32 font-weight-500">
|
||
|
|
<li><a href="" class="hover-primary">Ampli tích hợp</a></li>
|
||
|
|
<li><a href="" class="hover-primary">Ampli tích hợp</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CONTENT -->
|
||
|
|
<div class="content row">
|
||
|
|
<!-- LEFT -->
|
||
|
|
<div class="col-9">
|
||
|
|
<div class="banner mb-3">
|
||
|
|
<img src="/images/static-image-banner-category-1.png" alt="Banner" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="product-list grid grid--3-cols">
|
||
|
|
<div class="p-item">
|
||
|
|
<div class="p-thumbs">
|
||
|
|
<div class="swiper swiper-product-thumbs">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="swiper-pagination"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<span class="p-price-sale-off">-20%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-info">
|
||
|
|
<h3 class="p-name line-clamp-2 mt-12px">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is
|
||
|
|
dummy text used in laying out print
|
||
|
|
</h3>
|
||
|
|
<p class="p-rating d-flex align-items-center gap-8 my-12px">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
<span class="text-13 font-weight-500 mt-1">1 bình luận</span>
|
||
|
|
</p>
|
||
|
|
<p class="p-price">
|
||
|
|
<span class="p-price-sale">72.880.000₫</span>
|
||
|
|
<del class="p-price-stock">82.880.000₫</del>
|
||
|
|
</p>
|
||
|
|
<p class="p-quantity my-12px">
|
||
|
|
<i class="static-icons static-icon-green-box"></i>
|
||
|
|
Còn hàng
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="p-item">
|
||
|
|
<div class="p-thumbs">
|
||
|
|
<div class="swiper swiper-product-thumbs">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="swiper-pagination"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<span class="p-price-sale-off">-20%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-info">
|
||
|
|
<h3 class="p-name line-clamp-2 mt-12px">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is
|
||
|
|
dummy text used in laying out print
|
||
|
|
</h3>
|
||
|
|
<p class="p-rating d-flex align-items-center gap-8 my-12px">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
<span class="text-13 font-weight-500 mt-1">1 bình luận</span>
|
||
|
|
</p>
|
||
|
|
<p class="p-price">
|
||
|
|
<span class="p-price-sale">72.880.000₫</span>
|
||
|
|
<del class="p-price-stock">82.880.000₫</del>
|
||
|
|
</p>
|
||
|
|
<p class="p-quantity my-12px">
|
||
|
|
<i class="static-icons static-icon-green-box"></i>
|
||
|
|
Còn hàng
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="p-item">
|
||
|
|
<div class="p-thumbs">
|
||
|
|
<div class="swiper swiper-product-thumbs">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="swiper-pagination"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<span class="p-price-sale-off">-20%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-info">
|
||
|
|
<h3 class="p-name line-clamp-2 mt-12px">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is
|
||
|
|
dummy text used in laying out print
|
||
|
|
</h3>
|
||
|
|
<p class="p-rating d-flex align-items-center gap-8 my-12px">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
<span class="text-13 font-weight-500 mt-1">1 bình luận</span>
|
||
|
|
</p>
|
||
|
|
<p class="p-price">
|
||
|
|
<span class="p-price-sale">72.880.000₫</span>
|
||
|
|
<del class="p-price-stock">82.880.000₫</del>
|
||
|
|
</p>
|
||
|
|
<p class="p-quantity my-12px">
|
||
|
|
<i class="static-icons static-icon-green-box"></i>
|
||
|
|
Còn hàng
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- RIGHT -->
|
||
|
|
<div class="col-3">
|
||
|
|
<div class="product-best-seller">
|
||
|
|
<h4 class="header">Sản phẩm bán chạy</h4>
|
||
|
|
|
||
|
|
<ul class="list py-4 px-3">
|
||
|
|
<li class="item">
|
||
|
|
<div class="p-item">
|
||
|
|
<div class="p-thumbs">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<span class="p-price-sale-off">-20%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-info flex-1">
|
||
|
|
<h3 class="p-name line-clamp-2 mt-12px">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is
|
||
|
|
dummy text used in laying out print
|
||
|
|
</h3>
|
||
|
|
<p class="p-rating d-flex align-items-center gap-8 my-12px">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
<span class="text-13 font-weight-500 mt-1">1 bình luận</span>
|
||
|
|
</p>
|
||
|
|
<p class="p-price">
|
||
|
|
<span class="p-price-sale">72.880.000₫</span>
|
||
|
|
<del class="p-price-stock">82.880.000₫</del>
|
||
|
|
</p>
|
||
|
|
<p class="p-quantity my-12px">
|
||
|
|
<i class="static-icons static-icon-green-box"></i>
|
||
|
|
Còn hàng
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<div class="p-item">
|
||
|
|
<div class="p-thumbs">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<span class="p-price-sale-off">-20%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-info flex-1">
|
||
|
|
<h3 class="p-name line-clamp-2 mt-12px">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is
|
||
|
|
dummy text used in laying out print
|
||
|
|
</h3>
|
||
|
|
<p class="p-rating d-flex align-items-center gap-8 my-12px">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
<span class="text-13 font-weight-500 mt-1">1 bình luận</span>
|
||
|
|
</p>
|
||
|
|
<p class="p-price">
|
||
|
|
<span class="p-price-sale">72.880.000₫</span>
|
||
|
|
<del class="p-price-stock">82.880.000₫</del>
|
||
|
|
</p>
|
||
|
|
<p class="p-quantity my-12px">
|
||
|
|
<i class="static-icons static-icon-green-box"></i>
|
||
|
|
Còn hàng
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<div class="p-item">
|
||
|
|
<div class="p-thumbs">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<span class="p-price-sale-off">-20%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-info flex-1">
|
||
|
|
<h3 class="p-name line-clamp-2 mt-12px">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is
|
||
|
|
dummy text used in laying out print
|
||
|
|
</h3>
|
||
|
|
<p class="p-rating d-flex align-items-center gap-8 my-12px">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
<span class="text-13 font-weight-500 mt-1">1 bình luận</span>
|
||
|
|
</p>
|
||
|
|
<p class="p-price">
|
||
|
|
<span class="p-price-sale">72.880.000₫</span>
|
||
|
|
<del class="p-price-stock">82.880.000₫</del>
|
||
|
|
</p>
|
||
|
|
<p class="p-quantity my-12px">
|
||
|
|
<i class="static-icons static-icon-green-box"></i>
|
||
|
|
Còn hàng
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<div class="p-item">
|
||
|
|
<div class="p-thumbs">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<span class="p-price-sale-off">-20%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-info flex-1">
|
||
|
|
<h3 class="p-name line-clamp-2 mt-12px">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is
|
||
|
|
dummy text used in laying out print
|
||
|
|
</h3>
|
||
|
|
<p class="p-rating d-flex align-items-center gap-8 my-12px">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
<span class="text-13 font-weight-500 mt-1">1 bình luận</span>
|
||
|
|
</p>
|
||
|
|
<p class="p-price">
|
||
|
|
<span class="p-price-sale">72.880.000₫</span>
|
||
|
|
<del class="p-price-stock">82.880.000₫</del>
|
||
|
|
</p>
|
||
|
|
<p class="p-quantity my-12px">
|
||
|
|
<i class="static-icons static-icon-green-box"></i>
|
||
|
|
Còn hàng
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- SECTION CUSTOMER -->
|
||
|
|
<div class="section-customer">
|
||
|
|
<div class="container">
|
||
|
|
<h2 class="heading">KHÁCH HÀNG ĐÃ MUA GẦN ĐÂY</h2>
|
||
|
|
<div class="row list pb-4">
|
||
|
|
<div class="col-4 item">
|
||
|
|
<div class="bg-image">
|
||
|
|
<img src="/images/static-image-section-customer-1.png" alt="customer" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<p class="text-center mt-1">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
</p>
|
||
|
|
<p class="text-center font-weight-600 mt-2 mb-3">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is dummy text
|
||
|
|
used in laying out print ...
|
||
|
|
</p>
|
||
|
|
<div class="line-block"></div>
|
||
|
|
<div class="user d-flex align-items-center justify-content-between mt-3">
|
||
|
|
<p class="user-avatar font-weight-700 d-flex align-items-center gap-8">
|
||
|
|
<i class="static-icons static-icon-customer-avatar"></i>
|
||
|
|
Nguyễn Thị Hồng Nhung
|
||
|
|
</p>
|
||
|
|
<p class="user-tel">0383100 ***</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-4 item">
|
||
|
|
<div class="bg-image">
|
||
|
|
<img src="/images/static-image-section-customer-1.png" alt="customer" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<p class="text-center mt-1">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
</p>
|
||
|
|
<p class="text-center font-weight-600 mt-2 mb-3">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is dummy text
|
||
|
|
used in laying out print ...
|
||
|
|
</p>
|
||
|
|
<div class="line-block"></div>
|
||
|
|
<div class="user d-flex align-items-center justify-content-between mt-3">
|
||
|
|
<p class="user-avatar font-weight-700 d-flex align-items-center gap-8">
|
||
|
|
<i class="static-icons static-icon-customer-avatar"></i>
|
||
|
|
Nguyễn Thị Hồng Nhung
|
||
|
|
</p>
|
||
|
|
<p class="user-tel">0383100 ***</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-4 item">
|
||
|
|
<div class="bg-image">
|
||
|
|
<img src="/images/static-image-section-customer-1.png" alt="customer" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<p class="text-center mt-1">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
</p>
|
||
|
|
<p class="text-center font-weight-600 mt-2 mb-3">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is dummy text
|
||
|
|
used in laying out print ...
|
||
|
|
</p>
|
||
|
|
<div class="line-block"></div>
|
||
|
|
<div class="user d-flex align-items-center justify-content-between mt-3">
|
||
|
|
<p class="user-avatar font-weight-700 d-flex align-items-center gap-8">
|
||
|
|
<i class="static-icons static-icon-customer-avatar"></i>
|
||
|
|
Nguyễn Thị Hồng Nhung
|
||
|
|
</p>
|
||
|
|
<p class="user-tel">0383100 ***</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- BREADCRUMB -->
|
||
|
|
<section class="section-breadcrumb routing">
|
||
|
|
<div class="global-breadcrumb container">
|
||
|
|
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="list">
|
||
|
|
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||
|
|
<a href="/" itemprop="item" class="nopad-l">
|
||
|
|
<span itemprop="name">Trang chủ</span>
|
||
|
|
</a>
|
||
|
|
<meta itemprop="position" content="1" />
|
||
|
|
</li>
|
||
|
|
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
|
||
|
|
<a href="/linh-kien-may-tinh" itemprop="item" class="nopad-l">
|
||
|
|
<span itemprop="name"> Linh kiện máy tính </span>
|
||
|
|
</a>
|
||
|
|
<meta itemprop="position" content="2" />
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- CATEGORY PAGE -->
|
||
|
|
<div class="product-page d-none">
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="text-24 font-weight-700 text-uppercase mb-3">
|
||
|
|
THIẾT BỊ HI-FI
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<!-- CATEGORY CHILD -->
|
||
|
|
<div class="category-child mb-32px">
|
||
|
|
<ul class="list">
|
||
|
|
<li class="list-item">
|
||
|
|
<a href="" class="item">
|
||
|
|
<div class="image">
|
||
|
|
<img src="/images/static-image-cateogry-child-1.png" alt="Category" class="picture d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
<p class="title text-16 font-weight-600 text-center mt-2">
|
||
|
|
Ampli tích hợp
|
||
|
|
</p>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- MAIN CONTENT -->
|
||
|
|
<div class="main-content grid grid--product-page pt-3">
|
||
|
|
<!-- FILTER -->
|
||
|
|
<div class="col-left">
|
||
|
|
<div class="filter">
|
||
|
|
<h2 class="title text-20 text-uppercase font-weight-700 color-primary">
|
||
|
|
Tìm kiếm theo
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<!-- FILTER LIST -->
|
||
|
|
<ol class="filter-list list">
|
||
|
|
<!-- FILTER ITEM -->
|
||
|
|
<li class="filter-item mt-12px">
|
||
|
|
<h4 class="filter-name text-16 text-uppercase font-weight-700 mb-2">
|
||
|
|
Theo hãng
|
||
|
|
</h4>
|
||
|
|
|
||
|
|
<ul class="list">
|
||
|
|
<li class="item">
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
|
||
|
|
<input type="checkbox" class="check-box" />
|
||
|
|
<span>Accuphase (33)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
|
||
|
|
<input type="checkbox" class="check-box" />
|
||
|
|
<span>Accuphase (33)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
|
||
|
|
<input type="checkbox" class="check-box" />
|
||
|
|
<span>Accuphase (33)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
|
||
|
|
<input type="checkbox" class="check-box" />
|
||
|
|
<span>Accuphase (33)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<!-- FILTER ITEM -->
|
||
|
|
<li class="filter-item mt-12px">
|
||
|
|
<h4 class="filter-name text-16 text-uppercase font-weight-700 mb-2">
|
||
|
|
Theo hãng
|
||
|
|
</h4>
|
||
|
|
|
||
|
|
<ul class="list">
|
||
|
|
<li class="item">
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
|
||
|
|
<input type="checkbox" class="check-box" />
|
||
|
|
<span>Accuphase (33)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
|
||
|
|
<input type="checkbox" class="check-box" />
|
||
|
|
<span>Accuphase (33)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
|
||
|
|
<input type="checkbox" class="check-box" />
|
||
|
|
<span>Accuphase (33)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
|
||
|
|
<input type="checkbox" class="check-box" />
|
||
|
|
<span>Accuphase (33)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- PRODUCT -->
|
||
|
|
<div class="col-right">
|
||
|
|
<!-- SORT -->
|
||
|
|
<div class="sort d-flex align-items-center justify-content-between pb-3">
|
||
|
|
<div class="sort-by-collection">
|
||
|
|
<select name="" id="">
|
||
|
|
<option value="">Sắp xếp theo</option>
|
||
|
|
<option value="">Giá giảm dần</option>
|
||
|
|
<option value="">Giá tăng dần</option>
|
||
|
|
<option value="">Mới nhất</option>
|
||
|
|
<option value="">Lượt xem</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sort-by-display d-flex gap-8">
|
||
|
|
<a href="" class="d-flex"><i class="static-icons static-icon-list-style"></i></a>
|
||
|
|
<a href="" class="d-flex"><i class="static-icons static-icon-grid-style active"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- PRODUCT LIST -->
|
||
|
|
<div class="product-list mt-3 grid grid--4-cols">
|
||
|
|
<div class="p-item">
|
||
|
|
<div class="p-thumbs">
|
||
|
|
<div class="swiper swiper-product-thumbs">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="swiper-pagination"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<span class="p-price-sale-off">-20%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-info">
|
||
|
|
<h3 class="p-name line-clamp-2 mt-12px">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is dummy
|
||
|
|
text used in laying out print
|
||
|
|
</h3>
|
||
|
|
<p class="p-rating d-flex align-items-center gap-8 my-12px">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
<span class="text-13 font-weight-500 mt-1">1 bình luận</span>
|
||
|
|
</p>
|
||
|
|
<p class="p-price">
|
||
|
|
<span class="p-price-sale">72.880.000₫</span>
|
||
|
|
<del class="p-price-stock">82.880.000₫</del>
|
||
|
|
</p>
|
||
|
|
<p class="p-quantity my-12px">
|
||
|
|
<i class="static-icons static-icon-green-box"></i>
|
||
|
|
Còn hàng
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- PAGING -->
|
||
|
|
<div class="paging paging-category">
|
||
|
|
<a href="javascript:;" class="paging-link active">1</a>
|
||
|
|
<a href="javascript:;" class="paging-link">2</a>
|
||
|
|
<a href="javascript:;" class="paging-link">3</a>
|
||
|
|
<a href="javascript:;" class="paging-link">4</a>
|
||
|
|
<a href="javascript:;" class="paging-link">5</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CONTENT -->
|
||
|
|
<div class="description">
|
||
|
|
<div class="content static-html blur">
|
||
|
|
<h2>Hệ thống âm thanh Hi-Fi là gì?</h2>
|
||
|
|
<p>
|
||
|
|
Hi-Fi (viết tắt của Hi-Fidelity) có nghĩa là âm thanh có độ
|
||
|
|
trung thực cao, chuẩn gốc, không bị pha trộn tạp âm hay bị
|
||
|
|
chỉnh sửa. Thông thường, Hi-Fi thể hiện âm thanh có độ nhiễu
|
||
|
|
(noise), méo (distortion) được giảm thiểu và đáp tần chính
|
||
|
|
xác. Chỉ số Hi-Fi càng cao thì chất âm sẽ càng hay và càng
|
||
|
|
tinh tế, sáng tạo, độ méo âm thanh càng ít, thu hút được sự
|
||
|
|
chú ý của người nghe.
|
||
|
|
</p>
|
||
|
|
<img src="/images/static-image-category-description.png" alt="Category description" />
|
||
|
|
<h2>Hệ thống âm thanh Hi-Fi là gì?</h2>
|
||
|
|
<p>
|
||
|
|
Hi-Fi (viết tắt của Hi-Fidelity) có nghĩa là âm thanh có độ
|
||
|
|
trung thực cao, chuẩn gốc, không bị pha trộn tạp âm hay bị
|
||
|
|
chỉnh sửa. Thông thường, Hi-Fi thể hiện âm thanh có độ nhiễu
|
||
|
|
(noise), méo (distortion) được giảm thiểu và đáp tần chính
|
||
|
|
xác. Chỉ số Hi-Fi càng cao thì chất âm sẽ càng hay và càng
|
||
|
|
tinh tế, sáng tạo, độ méo âm thanh càng ít, thu hút được sự
|
||
|
|
chú ý của người nghe.
|
||
|
|
</p>
|
||
|
|
<h2>Hệ thống âm thanh Hi-Fi là gì?</h2>
|
||
|
|
<p>
|
||
|
|
Hi-Fi (viết tắt của Hi-Fidelity) có nghĩa là âm thanh có độ
|
||
|
|
trung thực cao, chuẩn gốc, không bị pha trộn tạp âm hay bị
|
||
|
|
chỉnh sửa. Thông thường, Hi-Fi thể hiện âm thanh có độ nhiễu
|
||
|
|
(noise), méo (distortion) được giảm thiểu và đáp tần chính
|
||
|
|
xác. Chỉ số Hi-Fi càng cao thì chất âm sẽ càng hay và càng
|
||
|
|
tinh tế, sáng tạo, độ méo âm thanh càng ít, thu hút được sự
|
||
|
|
chú ý của người nghe.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<a href="javascript:void(0)" onclick="viewMoreContent('.description')"
|
||
|
|
class="view-more-content-btn js-view-more-content">
|
||
|
|
Xem thêm +
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- DETAIL PAGE -->
|
||
|
|
<div class="product-detail-page d-none">
|
||
|
|
<div class="container">
|
||
|
|
<!-- SECTION PRODUCT -->
|
||
|
|
<div class="section-product mb-5">
|
||
|
|
<div class="row">
|
||
|
|
<!-- LEFT -->
|
||
|
|
<div class="col-3 product-features">
|
||
|
|
<!-- -->
|
||
|
|
<div class="product-policy box mb-3 pb-1">
|
||
|
|
<h2 class="title text-20 font-weight-700 text-uppercase">
|
||
|
|
CHÍNH SÁCH
|
||
|
|
</h2>
|
||
|
|
<ul class="list">
|
||
|
|
<li class="item d-flex gap-12">
|
||
|
|
<i class="static-icons static-icon-feature-delivery"></i>
|
||
|
|
<p class="">
|
||
|
|
<b class="d-block">Miễn phí</b>
|
||
|
|
<span>Giao hàng toàn quốc</span>
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
<li class="item d-flex gap-12">
|
||
|
|
<i class="static-icons static-icon-feature-reward"></i>
|
||
|
|
<p class="">
|
||
|
|
<b class="d-block">Đảm bảo</b>
|
||
|
|
<span>Chất lượng đã kiểm định</span>
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
<li class="item d-flex gap-12">
|
||
|
|
<i class="static-icons static-icon-feature-support"></i>
|
||
|
|
<p class="">
|
||
|
|
<b class="d-block">Hỗ trợ 24/7</b>
|
||
|
|
<span>Chăm sóc khách hàng uy tín</span>
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
<li class="item d-flex gap-12">
|
||
|
|
<i class="static-icons static-icon-feature-support-2"></i>
|
||
|
|
<p class="">
|
||
|
|
<b class="d-block">Tư vấn bán hàng</b>
|
||
|
|
<span>19006755</span>
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- -->
|
||
|
|
<div class="product-support box">
|
||
|
|
<h2 class="title bg-secondary color-white text-20 font-weight-700 text-uppercase">
|
||
|
|
HỖ TRỢ MUA HÀNG
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<ul class="list">
|
||
|
|
<li class="item d-flex gap-12">
|
||
|
|
<i class="static-icons static-icon-feature-phone"></i>
|
||
|
|
<a href="tel:19006755" class="d-block">
|
||
|
|
<b class="d-block text-20 color-primary">1900 6755</b>
|
||
|
|
<span>Tư vấn viên: Mr. Tuấn</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item d-flex gap-12">
|
||
|
|
<i class="static-icons static-icon-feature-phone"></i>
|
||
|
|
<a href="tel:19006755" class="d-block">
|
||
|
|
<b class="d-block text-20 color-primary">1900 6755</b>
|
||
|
|
<span>Tư vấn viên: Ms. Nhung</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item d-flex gap-12">
|
||
|
|
<i class="static-icons static-icon-feature-mail"></i>
|
||
|
|
<a href="mailto:Support@Hurasoft.vn" class="d-block">
|
||
|
|
<span>Support@Hurasoft.vn</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CENTER -->
|
||
|
|
<div class="col-4 product-thumbs">
|
||
|
|
<div class="swiper gallery-top mb-3">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
<!-- SLIDE -->
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a data-fancybox="gallery" title="Click để phóng to" href="/images/static-image-product-1.png">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Sản phẩm" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<!-- SLIDE -->
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a data-fancybox="gallery" title="Click để phóng to" href="/images/static-image-product-1.png">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Sản phẩm" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<!-- SLIDE -->
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a data-fancybox="gallery" title="Click để phóng to" href="/images/static-image-product-1.png">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Sản phẩm" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<!-- SLIDE -->
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a data-fancybox="gallery" title="Click để phóng to" href="/images/static-image-product-1.png">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Sản phẩm" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="swiper gallery-thumbs" thumbsSlider="">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
<!-- SLIDE -->
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Sản phẩm" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
<!-- SLIDE -->
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Sản phẩm" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
<!-- SLIDE -->
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Sản phẩm" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
<!-- SLIDE -->
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Sản phẩm" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- RIGHT -->
|
||
|
|
<div class="col-5 product-info">
|
||
|
|
<!-- -->
|
||
|
|
<h1 class="pro-name">
|
||
|
|
Dàn Mini Hifi Yamaha MCR - B370 (Ampli MCR-B370 + Loa NS-BP102)
|
||
|
|
</h1>
|
||
|
|
<!-- -->
|
||
|
|
<div class="pro-sub-info d-flex flex-wrap align-items-center gap-32 mt-2">
|
||
|
|
<p>
|
||
|
|
Thương hiệu:
|
||
|
|
<span class="color-primary font-weight-500">Yamaha</span>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
SKU:
|
||
|
|
<span class="color-primary font-weight-500">STAGEPAS 1K</span>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
<span>1 bình luận</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="line-gray-block my-2"></div>
|
||
|
|
|
||
|
|
<!-- -->
|
||
|
|
<div class="pro-deal">
|
||
|
|
<div class="section-deal d-flex align-items-center justify-content-between">
|
||
|
|
<div class="pro-deal-time-left d-flex align-items-center gap-8">
|
||
|
|
<p class="title color-white">Thời gian còn lại</p>
|
||
|
|
<div class="global-deal-time-countdown">
|
||
|
|
99 : 99 : 99 : 99
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="pro-deal-quantity p-item w-100 ml-5 flex-1">
|
||
|
|
<div class="p-wrapper-deal p-relative mt-2">
|
||
|
|
<div class="deal-line total"></div>
|
||
|
|
<div class="deal-line remaining js-line-deal-left" style="width: 80%"></div>
|
||
|
|
</div>
|
||
|
|
<p class="p-quantity p-quantity-deal my-12px">
|
||
|
|
<span>Có sẵn
|
||
|
|
<b class="deal-quantity deal-remaint">30</b></span>
|
||
|
|
<span>Đã bán <b class="deal-quantity deal-sold">20</b></span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- -->
|
||
|
|
<div class="pro-price my-3">
|
||
|
|
<div class="pro-price-wrapper d-flex align-items-center gap-24">
|
||
|
|
<p class="pro-price-sale">72.880.000₫</p>
|
||
|
|
<p class="pro-price-stock">
|
||
|
|
Giá niêm yết:
|
||
|
|
<del class="color-gray font-weight-500">82.880.000₫</del>
|
||
|
|
</p>
|
||
|
|
<p class="pro-price-sale-off">-20%</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="mt-2">
|
||
|
|
Tiết kiệm
|
||
|
|
<span class="color-red font-weight-600">1.000.000₫</span> so
|
||
|
|
với thị trường
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- -->
|
||
|
|
<div class="pro-status">
|
||
|
|
<i class="static-icons static-icon-green-box"></i>
|
||
|
|
Còn hàng
|
||
|
|
</div>
|
||
|
|
<!-- -->
|
||
|
|
<div class="pro-special-offer">
|
||
|
|
<p class="title">
|
||
|
|
<i class="static-icons static-icon-gift"></i> Khuyến mãi đặc
|
||
|
|
biệt
|
||
|
|
</p>
|
||
|
|
<ul class="list-w">
|
||
|
|
<li>
|
||
|
|
Giao hàng nhanh nhất, miễn phí giao hàng trong nội thành
|
||
|
|
</li>
|
||
|
|
<li>Bảo hành chính hãng từ nhà cung cấp</li>
|
||
|
|
<li>Đổi mới trong 1 tháng khi lỗi kỹ thuật</li>
|
||
|
|
<li>Miễn phí công lắp đặt trị giá 500.000đ</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- -->
|
||
|
|
<div class="pro-cart d-flex align-items-center gap-16 my-3">
|
||
|
|
<input type="number" name="product quantity" class="pro-cart-quantity" value="1" min="1" />
|
||
|
|
<a href="javascript:;" class="pro-cart-btn buy-now">
|
||
|
|
<b class="text text-18 text-uppercase">Mua ngay</b>
|
||
|
|
<span class="des text-12">Thanh toán online hoặc ship COD</span>
|
||
|
|
</a>
|
||
|
|
<a href="javascript:;" class="pro-cart-btn installment">
|
||
|
|
<b class="text text-18 text-uppercase">Mua trả góp</b>
|
||
|
|
<span class="des text-12">Visa, Mastercard, JCB, Amex</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<!-- -->
|
||
|
|
<div class="pro-social-share d-flex align-items-center gap-16">
|
||
|
|
Chia sẻ ngay:
|
||
|
|
<img src="/images/static-image-social-share.png" alt="Social share" class="d-flex w-100"
|
||
|
|
style="max-width: 220px" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- SECTION PRODUCT RELATIVE -->
|
||
|
|
<div class="section-product-relative mb-5">
|
||
|
|
<h2 class="heading text-24 font-weight-700 text-uppercase">
|
||
|
|
Sản phẩm liên quan
|
||
|
|
</h2>
|
||
|
|
<div class="line-gray-block mt-2 mb-3"></div>
|
||
|
|
|
||
|
|
<div class="product-list grid grid--5-cols">
|
||
|
|
<div class="p-item">
|
||
|
|
<div class="p-thumbs">
|
||
|
|
<div class="swiper swiper-product-thumbs">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="swiper-pagination"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<span class="p-price-sale-off">-20%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-info">
|
||
|
|
<h3 class="p-name line-clamp-2 mt-12px">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is dummy text
|
||
|
|
used in laying out print
|
||
|
|
</h3>
|
||
|
|
<p class="p-rating d-flex align-items-center gap-8 my-12px">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
<span class="text-13 font-weight-500 mt-1">1 bình luận</span>
|
||
|
|
</p>
|
||
|
|
<p class="p-price">
|
||
|
|
<span class="p-price-sale">72.880.000₫</span>
|
||
|
|
<del class="p-price-stock">82.880.000₫</del>
|
||
|
|
</p>
|
||
|
|
<p class="p-quantity my-12px">
|
||
|
|
<i class="static-icons static-icon-green-box"></i>
|
||
|
|
Còn hàng
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- SECTION PRODUCT ATTR -->
|
||
|
|
<div class="section-product-attr">
|
||
|
|
<!-- NAME -->
|
||
|
|
<div class="attr-list-name">
|
||
|
|
<ul class="list d-flex align-items-center gap-32">
|
||
|
|
<li class="item">
|
||
|
|
<h2 class="title active" onclick="toggleAttr('.pro-des', this)">
|
||
|
|
Mô tả
|
||
|
|
</h2>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<h2 class="title" onclick="toggleAttr('.pro-spec', this)">
|
||
|
|
Thông số kỹ thuật
|
||
|
|
</h2>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<h2 class="title" onclick="toggleAttr('.pro-video', this)">
|
||
|
|
Video
|
||
|
|
</h2>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<h2 class="title" onclick="toggleAttr('.pro-review', this)">
|
||
|
|
Đánh giá
|
||
|
|
</h2>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="line-gray-block mt-2 mb-3"></div>
|
||
|
|
|
||
|
|
<!-- CONTENT -->
|
||
|
|
<div class="attr-list-content">
|
||
|
|
<!-- DES -->
|
||
|
|
<div class="pro-des" data-type="attr-item-content">
|
||
|
|
<div class="content-des static-html max-height-none">
|
||
|
|
<h2>Bộ Dàn Mini Hifi Yamaha MCR - B370</h2>
|
||
|
|
<p>
|
||
|
|
Dàn Mini Hifi Yamaha MCR - B370 sở hữu bề ngoài sang trọng,
|
||
|
|
thanh lịch, cuốn hút phù hợp với mọi không gian. Bên cạnh đó
|
||
|
|
với chất lượng âm thanh đỉnh cao đến từ thương hiệu Yamaha bộ
|
||
|
|
dàn này sẽ giúp bạn trải nghiệm những giây phút giải trí tại
|
||
|
|
gia tuyệt vời nhất. Cấu hình của bộ dàn bao gồm: - Amply
|
||
|
|
Yamaha CRX - B370 (Bạc/Black) - Loa Yamaha NS - BP102 Black Về
|
||
|
|
thiết kế, Amply Yamaha CRX - B370 duy trì hình ảnh thiết kế
|
||
|
|
của các thành phần Hi-Fi của Yamaha - thể hiện hình dáng cực
|
||
|
|
kỳ cao cấp và tinh xảo.
|
||
|
|
</p>
|
||
|
|
<img src="/images/static-image-detail-des-1.png" alt="Mô tả" />
|
||
|
|
<h2>Bộ Dàn Mini Hifi Yamaha MCR - B370</h2>
|
||
|
|
<p>
|
||
|
|
Dàn Mini Hifi Yamaha MCR - B370 sở hữu bề ngoài sang trọng,
|
||
|
|
thanh lịch, cuốn hút phù hợp với mọi không gian. Bên cạnh đó
|
||
|
|
với chất lượng âm thanh đỉnh cao đến từ thương hiệu Yamaha bộ
|
||
|
|
dàn này sẽ giúp bạn trải nghiệm những giây phút giải trí tại
|
||
|
|
gia tuyệt vời nhất. Cấu hình của bộ dàn bao gồm: - Amply
|
||
|
|
Yamaha CRX - B370 (Bạc/Black) - Loa Yamaha NS - BP102 Black Về
|
||
|
|
thiết kế, Amply Yamaha CRX - B370 duy trì hình ảnh thiết kế
|
||
|
|
của các thành phần Hi-Fi của Yamaha - thể hiện hình dáng cực
|
||
|
|
kỳ cao cấp và tinh xảo.
|
||
|
|
</p>
|
||
|
|
<h2>Bộ Dàn Mini Hifi Yamaha MCR - B370</h2>
|
||
|
|
<p>
|
||
|
|
Dàn Mini Hifi Yamaha MCR - B370 sở hữu bề ngoài sang trọng,
|
||
|
|
thanh lịch, cuốn hút phù hợp với mọi không gian. Bên cạnh đó
|
||
|
|
với chất lượng âm thanh đỉnh cao đến từ thương hiệu Yamaha bộ
|
||
|
|
dàn này sẽ giúp bạn trải nghiệm những giây phút giải trí tại
|
||
|
|
gia tuyệt vời nhất. Cấu hình của bộ dàn bao gồm: - Amply
|
||
|
|
Yamaha CRX - B370 (Bạc/Black) - Loa Yamaha NS - BP102 Black Về
|
||
|
|
thiết kế, Amply Yamaha CRX - B370 duy trì hình ảnh thiết kế
|
||
|
|
của các thành phần Hi-Fi của Yamaha - thể hiện hình dáng cực
|
||
|
|
kỳ cao cấp và tinh xảo.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- TECH -->
|
||
|
|
<div class="pro-spec d-none" data-type="attr-item-content">
|
||
|
|
<div class="content-spec">
|
||
|
|
<table class="attributes">
|
||
|
|
<tbody>
|
||
|
|
<tr class="option-item">
|
||
|
|
<td class="op_name"><strong>CPU</strong></td>
|
||
|
|
<td>
|
||
|
|
<div class="wordWrap">Intel Core i7 12700H</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="option-item">
|
||
|
|
<td class="op_name"><strong>RAM</strong></td>
|
||
|
|
<td>
|
||
|
|
<div class="wordWrap">16GB DDR5</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="option-item">
|
||
|
|
<td class="op_name"><strong>Ổ cứng</strong></td>
|
||
|
|
<td>
|
||
|
|
<div class="wordWrap">1TB SSD </div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="option-item">
|
||
|
|
<td class="op_name"><strong>Màn hình</strong></td>
|
||
|
|
<td>
|
||
|
|
<div class="wordWrap">16 Inch QHD+</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="option-item">
|
||
|
|
<td class="op_name"><strong>Card đồ họa</strong></td>
|
||
|
|
<td>
|
||
|
|
<div class="wordWrap">Nvidia RTX3060</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="option-item">
|
||
|
|
<td class="op_name"><strong>Hệ điều hành</strong></td>
|
||
|
|
<td>
|
||
|
|
<div class="wordWrap">Win 11</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="option-item">
|
||
|
|
<td class="op_name"><strong>Màu sắc</strong></td>
|
||
|
|
<td>
|
||
|
|
<div class="wordWrap">Đen</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- VIDEO -->
|
||
|
|
<div class="pro-video d-none" data-type="attr-item-content">
|
||
|
|
<div class="content-video"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- REVIEW -->
|
||
|
|
<div class="pro-review d-none" data-type="attr-item-content"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- DEAL PAGE -->
|
||
|
|
<div class="deal-page d-none">
|
||
|
|
<div class="container">
|
||
|
|
<!-- SECTION DEAL -->
|
||
|
|
<div class="section-deal">
|
||
|
|
<!-- HEADING -->
|
||
|
|
<div class="heading d-flex align-items-center justify-content-between py-3">
|
||
|
|
<div class="wrapper-heading d-flex align-items-center gap-24">
|
||
|
|
<h2 class="title text-32 font-weight-600 color-red">
|
||
|
|
Ưu đãi mới nhất cho tuần này
|
||
|
|
</h2>
|
||
|
|
<p class="global-deal-time-countdown">99 : 99 : 99 : 99</p>
|
||
|
|
<p class="text-18 font-weight-600 color-secondary">
|
||
|
|
Giảm giá lên tới 50%++
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="line-block mb-4"></div>
|
||
|
|
|
||
|
|
<!-- DEAL LIST -->
|
||
|
|
<div class="product-list grid grid--5-cols">
|
||
|
|
<div class="p-item">
|
||
|
|
<div class="p-thumbs">
|
||
|
|
<div class="swiper swiper-product-thumbs">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="" class="p-image">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product image" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="swiper-pagination"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<span class="p-price-sale-off">-20%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-info">
|
||
|
|
<h3 class="p-name line-clamp-2 mt-12px">
|
||
|
|
Lorem ipsum, or lipsum as it is sometimes known, is dummy text
|
||
|
|
used in laying out print
|
||
|
|
</h3>
|
||
|
|
<p class="p-rating d-flex align-items-center gap-8 my-12px">
|
||
|
|
<i class="static-icons static-icon-5-stars"></i>
|
||
|
|
<span class="text-13 font-weight-500 mt-1">1 bình luận</span>
|
||
|
|
</p>
|
||
|
|
<p class="p-price">
|
||
|
|
<span class="p-price-sale">72.880.000₫</span>
|
||
|
|
<del class="p-price-stock">82.880.000₫</del>
|
||
|
|
</p>
|
||
|
|
<div class="p-wrapper-deal p-relative mt-2">
|
||
|
|
<div class="deal-line total"></div>
|
||
|
|
<div class="deal-line remaining js-line-deal-left" style="width: 80%"></div>
|
||
|
|
</div>
|
||
|
|
<p class="p-quantity p-quantity-deal my-12px">
|
||
|
|
<span>Có sẵn <b class="deal-quantity deal-remaint">30</b></span>
|
||
|
|
<span>Đã bán <b class="deal-quantity deal-sold">20</b></span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- PAGING -->
|
||
|
|
<div class="paging paging-category">
|
||
|
|
<a href="javascript:;" class="paging-link active">1</a>
|
||
|
|
<a href="javascript:;" class="paging-link">2</a>
|
||
|
|
<a href="javascript:;" class="paging-link">3</a>
|
||
|
|
<a href="javascript:;" class="paging-link">4</a>
|
||
|
|
<a href="javascript:;" class="paging-link">5</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CART PAGE -->
|
||
|
|
<div class="cart-page mb-5 d-none">
|
||
|
|
<div class="container">
|
||
|
|
<form method="post" enctype="multipart/form-data" action="/send-cart" onsubmit="return check_field();">
|
||
|
|
<!-- SECTION PRODUCT -->
|
||
|
|
<div class="section-product">
|
||
|
|
<!-- TITLE -->
|
||
|
|
<div class="title text-16 text-uppercase font-weight-600 color-white bg-secondary">
|
||
|
|
<div class="row">
|
||
|
|
<p class="col-6 text-center">Tên Sản phẩm</p>
|
||
|
|
<p class="col-2">Giá</p>
|
||
|
|
<p class="col-2">Số lượng</p>
|
||
|
|
<p class="col-2">Tạm tính</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CART LIST -->
|
||
|
|
<div class="cart-list">
|
||
|
|
<div class="c-item">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="c-image col-2 d-flex align-items-center justify-content-between">
|
||
|
|
<i class="static-icons static-icon-gray-close c-delete ml-3"></i>
|
||
|
|
<a href="" class="c-img">
|
||
|
|
<img src="/images/static-image-product-1.png" alt="Product" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<a href="" class="col-4">
|
||
|
|
<h3 class="c-name font-weight-500">
|
||
|
|
Dàn Mini Hifi Yamaha MCR - B370 (Ampli MCR-B370 + Loa
|
||
|
|
NS-BP102)
|
||
|
|
</h3>
|
||
|
|
</a>
|
||
|
|
<p class="c-price col-2">72.880.000₫</p>
|
||
|
|
<div class="col-2">
|
||
|
|
<input type="number" class="c-quantity" value="1" min="1" />
|
||
|
|
</div>
|
||
|
|
<p class="c-total-price col-2 font-weight-700">72.880.000₫</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- VOUCHER -->
|
||
|
|
<div class="voucher">
|
||
|
|
<input type="text" class="form-input voucher-input" placeholder="Mã giảm giá" />
|
||
|
|
<button class="form-btn voucher-btn bg-secondary">Áp dụng</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="line-blue-block my-3"></div>
|
||
|
|
|
||
|
|
<!-- SECTION LOGIN -->
|
||
|
|
<div class="section-login">
|
||
|
|
<p class="title text-16 text-uppercase">
|
||
|
|
Để tiếp tục đặt hàng, quý khách xin vui lòng
|
||
|
|
<a href="javascript:;" class="font-weight-700 color-primary hover-secondary"
|
||
|
|
onclick="toggleDisplay('.login-form')">
|
||
|
|
Đăng nhập
|
||
|
|
</a>
|
||
|
|
hoặc nhập thông tin bên dưới
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-6">
|
||
|
|
<div class="login-form mb-4 d-none">
|
||
|
|
<input type="text" name="info[email]" id="login-email" class="form-input my-3"
|
||
|
|
placeholder="Họ và tên" />
|
||
|
|
<input type="password" name="info[password]" id="login-password" class="form-input mb-3"
|
||
|
|
placeholder="Mật khẩu" />
|
||
|
|
<button class="form-btn login-btn bg-primary">
|
||
|
|
Đăng nhập
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- SECTION CART SEND -->
|
||
|
|
<div class="row mt-32px">
|
||
|
|
<!-- CUSTOMER -->
|
||
|
|
<div class="col-6">
|
||
|
|
<div class="col-left customer">
|
||
|
|
<h2 class="text-24 mb-4">Thông tin giao hàng</h2>
|
||
|
|
|
||
|
|
<div class="customer-form">
|
||
|
|
<input type="text" name="user_info[name]" id="buyer_name" class="form-input" placeholder="Họ và tên"
|
||
|
|
value="" />
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-8">
|
||
|
|
<input type="email" name="user_info[email]" id="buyer_email" class="form-input" placeholder="Email"
|
||
|
|
value="" />
|
||
|
|
</div>
|
||
|
|
<div class="col-4">
|
||
|
|
<input type="text" name="user_info[tel]" id="buyer_tel" class="form-input"
|
||
|
|
placeholder="Số điện thoại" value="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<input type="text" name="user_info[address]" id="buyer_address" class="form-input" placeholder="Địa chỉ"
|
||
|
|
value="" />
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-4">
|
||
|
|
<select name="user_info[province]" id="buyer_province" class="form-input"
|
||
|
|
onchange="getProvince(this.value);">
|
||
|
|
<option value="">Chọn Tỉnh thành</option>
|
||
|
|
<option value="1" data-name="Hà Nội">Hà Nội</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="col-4">
|
||
|
|
<select name="user_info[district]" id="buyer_district" class="form-input">
|
||
|
|
<option value="">Chọn Quận/ Huyện</option>
|
||
|
|
<option value="">Chưa chọn Tỉnh thành</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="col-4">
|
||
|
|
<select name="user_info[ward]" id="buyer_ward" class="form-input">
|
||
|
|
<option value="">Chọn Phương/ Xã</option>
|
||
|
|
<option value="">Chưa chọn Quận/ Huyện</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<textarea name="user_info[note]" id="buyer_note" cols="30" rows="10" class="form-input"
|
||
|
|
placeholder="Ghi chú"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- METHOD -->
|
||
|
|
<div class="col-6">
|
||
|
|
<div class="col-right">
|
||
|
|
<!-- -->
|
||
|
|
<div class="payment mb-4">
|
||
|
|
<h2 class="text-24 mb-4">Phương thức thanh toán</h2>
|
||
|
|
|
||
|
|
<ul class="list list-radio">
|
||
|
|
<li class="item">
|
||
|
|
<input class="d-none" type="radio" id="pay_method_1" name="pay_method" value="1" checked="" />
|
||
|
|
<label for="pay_method_1"
|
||
|
|
title="Thanh toán tiền mặt khi nhận hàng (tiền mặt/quẹt thẻ ATM, Visa, Master)">
|
||
|
|
Thanh toán tiền mặt khi nhận hàng
|
||
|
|
</label>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<input class="d-none" type="radio" id="pay_method_2" name="pay_method" value="2" />
|
||
|
|
<label for="pay_method_2" title="Thanh toán qua chuyển khoản qua tài khoản ngân hàng(khuyên dùng)">
|
||
|
|
Thanh toán qua chuyển khoản ngân hàng
|
||
|
|
</label>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<input class="d-none" type="radio" id="pay_method_3" name="pay_method" value="3" />
|
||
|
|
<label for="pay_method_3" title="Thanh toán qua Ngân Lượng (ATM nội địa, Visa, Master)">
|
||
|
|
Thanh toán qua Ngân Lượng
|
||
|
|
</label>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<input class="d-none" type="radio" id="pay_method_4" name="pay_method" value="4" />
|
||
|
|
<label for="pay_method_4" title="Trả góp Alepay (Ngân Lượng)">
|
||
|
|
Trả góp Alepay
|
||
|
|
</label>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<input class="d-none" type="radio" id="pay_method_5" name="pay_method" value="5" />
|
||
|
|
<label for="pay_method_5" title="Thanh toán trực tuyến (Bằng thẻ ATM/Visa/Master qua cổng VnPay)">
|
||
|
|
Thanh toán trực tuyến
|
||
|
|
</label>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- -->
|
||
|
|
<div class="shipping mb-5">
|
||
|
|
<h2 class="text-24 mb-4">Phương thức vận chuyển</h2>
|
||
|
|
|
||
|
|
<ul class="list list-radio">
|
||
|
|
<li class="item">
|
||
|
|
<input class="d-none" type="radio" id="shipping_method_1" name="ship_method" value="1" checked="" />
|
||
|
|
<label for="shipping_method_1" title="">Giao hàng nhanh trong 2 giờ (Nội thành Hà Nội
|
||
|
|
+HCM)</label>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<input class="d-none" type="radio" id="shipping_method_2" name="ship_method" value="2" />
|
||
|
|
<label for="shipping_method_2" title="">Giao hàng tiêu chuẩn</label>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CART SEND -->
|
||
|
|
<div class="cart-send mb-3">
|
||
|
|
<p class="cart-send-item discount-price">
|
||
|
|
Giảm giá:
|
||
|
|
<span>1.000.000₫</span>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p class="cart-send-item shipping-price">
|
||
|
|
Phí vận chuyển:
|
||
|
|
<span>Miễn phí</span>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p class="cart-send-item total-price font-weight-700">
|
||
|
|
Tổng tiền:
|
||
|
|
<span>72.880.000₫</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- -->
|
||
|
|
<div class="card-send-btn d-flex align-items-center justify-content-between">
|
||
|
|
<a href="/" class="text-16 font-weight-500 color-primary">Tiếp tục mua sắm</a>
|
||
|
|
|
||
|
|
<button class="form-btn cart-send-submit-btn bg-primary">
|
||
|
|
Hoàn tất đơn hàng
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- FOOTER -->
|
||
|
|
<footer class="global-footer mt-4">
|
||
|
|
<!-- FOOTER TOP -->
|
||
|
|
<div class="footer-top">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-3 h-100">
|
||
|
|
<ul class="global-socials list h-100">
|
||
|
|
<li class="item">
|
||
|
|
<a href="" class="link">
|
||
|
|
<i class="static-icons static-icon-social-fb"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="" class="link">
|
||
|
|
<i class="static-icons static-icon-social-twitter"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="" class="link">
|
||
|
|
<i class="static-icons static-icon-social-gg-news"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="" class="link">
|
||
|
|
<i class="static-icons static-icon-social-instagram"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="item">
|
||
|
|
<a href="" class="link">
|
||
|
|
<i class="static-icons static-icon-social-youtube"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-4">
|
||
|
|
<h4 class="text-20 color-white">
|
||
|
|
NHẬN THÔNG TIN KHUYẾN MÃI TỪ CHÚNG TÔI
|
||
|
|
</h4>
|
||
|
|
</div>
|
||
|
|
<div class="col-5">
|
||
|
|
<div class="newsletter">
|
||
|
|
<input type="email" id="js-newsletter" name="newsletter" class="newsletter-input"
|
||
|
|
placeholder="Nhập email của bạn" value="" autocomplete="off" onclick="" />
|
||
|
|
<button type="submit" id="js-search-button" class="newsletter-btn">
|
||
|
|
Gửi
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- FOOTER BOTTOM -->
|
||
|
|
<div class="footer-bottom my-5">
|
||
|
|
<div class="container">
|
||
|
|
<div class="grid grid--5-cols">
|
||
|
|
<div class="col-info">
|
||
|
|
<a href="/" class="global-logo">
|
||
|
|
<img src="/images/logo-audio-3.png" alt="logo" class="d-flex w-100" />
|
||
|
|
</a>
|
||
|
|
<p class="my-3">
|
||
|
|
Condimentum adipiscing vel neque dis nam parturient orci at
|
||
|
|
scelerisque neque dis nam parturient.
|
||
|
|
</p>
|
||
|
|
<ul class="list col-list">
|
||
|
|
<li>
|
||
|
|
<a href="javascript:;" class="d-flex align-items-center gap-12">
|
||
|
|
<i class="static-icons static-icon-location"></i>
|
||
|
|
<span>XX Tràng Thi - Hoàn Kiếm - Hà Nội</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="tel:02438524524" class="d-flex align-items-center gap-12">
|
||
|
|
<i class="static-icons static-icon-phone-shake"></i>
|
||
|
|
<span>Hotline: 0243.8.524.524</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="tel:0988034960" class="d-flex align-items-center gap-12">
|
||
|
|
<i class="static-icons static-icon-phone-shake"></i>
|
||
|
|
<span>Điện thoại: 0988.034.960</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="sosical mt-3">
|
||
|
|
<i class="static-icons static-icon-social-fb-logo"></i>
|
||
|
|
<i class="static-icons static-icon-social-youtube-logo"></i>
|
||
|
|
<i class="static-icons static-icon-social-instagram-logo"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-company">
|
||
|
|
<h3 class="col-title">THÔNG TIN HỮU ÍCH</h3>
|
||
|
|
<ul class="list col-list">
|
||
|
|
<li>
|
||
|
|
<a href="/gioi-thieu" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Giới thiệu</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/tuyen-dung" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Tuyển dụng</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/tin-tuc" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Tin tức</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/y-kien-khach-hang" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Ý kiến khách hàng</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/chinh-sach-bao-mat-thong-tin" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Chính sách bảo mật thông tin</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/lien-he" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Liên hệ</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-support">
|
||
|
|
<h3 class="col-title">HỖ TRỢ MUA HÀNG</h3>
|
||
|
|
<ul class="list col-list">
|
||
|
|
<li>
|
||
|
|
<a href="/huong-dan-mua-hang-truc-tuyen" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Hướng dẫn mua hàng trực tuyến</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/hinh-thuc-thanh-toan" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Các hình thức thanh toán</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/mua-hang-online" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Tại sao chọn mua hàng online</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/hinh-thuc-mua-hang" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Các hình thức mua hàng</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/chinh-sach-van-chuyen" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Chính sách vận chuyển</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/chinh-sach-bao-hanh" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Chính sách bảo trì, bảo hành</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/chinh-sach-doi-tra" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Chính sách đổi trả hàng</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-sale">
|
||
|
|
<h3 class="col-title">THÔNG TIN KHUYẾN MẠI</h3>
|
||
|
|
<ul class="list col-list">
|
||
|
|
<li>
|
||
|
|
<a href="/tin-khuyen-mai" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Thông tin khuyến mại</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/san-pham-khuyen-mai" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Sản phẩm khuyến mại</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/san-pham-hot" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Sản phẩm bán chạy</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="/san-pham-moi" class="d-flex align-items-center gap-12">
|
||
|
|
<span>Sản phẩm mới</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-payment">
|
||
|
|
<h3 class="col-title">PHƯƠNG THỨC THANH TOÁN</h3>
|
||
|
|
<div class="payment mb-12px" style="max-width: 280px">
|
||
|
|
<img src="/images/static-icon-accept-payments.png" alt="Phương thức thanh toán" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
<div class="ministry-of-industry-and-trade" style="max-width: 145px">
|
||
|
|
<img src="/images/static-image-bct.png" alt="Bộ công thương" class="d-flex w-100" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- COPYRIGHT -->
|
||
|
|
<div class="copy-right">
|
||
|
|
<div class="container">
|
||
|
|
<h5 class="text-16 text-center font-weight-300 py-3">
|
||
|
|
Bản quyền thuộc về Best Audio | Thiết kế website bởi Hurasoft
|
||
|
|
</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
|
||
|
|
<script src="/js/library.js"></script>
|
||
|
|
<script src="/js/main_pc.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|