Files
giao_dien_web_mau/demo-audio-2/index.html
2023-03-23 10:28:27 +07:00

1293 lines
55 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="/css/library.css">
<link rel="stylesheet" href="/css/style_pc.css">
</head>
<body>
<!-- HEADER -->
<header class="header">
<!-- HEADER TOP -->
<div class="header-top bg-secondary">
<div class="container">
<div class="row align-items-center">
<div class="col-3">
<div class="wrapper d-flex align-items-center">
<i class="static-icons static-icons-static-icon-header-delivery"></i>
<span class="text-14 color-white ml-2">Freeship cho đơn hàng từ 1.000.000đ</span>
</div>
</div>
<div class="col-3 offset-5">
<div class="wrapper d-flex align-items-center">
<i class="static-icons static-icons-static-icon-header-phone"></i>
<span class="text-14 color-white ml-2">
Hotline 24/7:
<a href="tel:1900xxxx" class="font-weight-700">1900 XXXX</a></span>
</div>
</div>
<div class="col-1">
<div class="wrapper d-flex align-items-center">
<i class="static-icons static-icons-static-icon-header-user"></i>
<span class="text-14 color-white">Tài khoản</span>
</div>
</div>
</div>
</div>
</div>
<!-- HEADER BOTTOM -->
<div class="header-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-2">
<a href="/" class="logo">
<img src="/images/audio-logo.png" alt="Logo" class="d-flex w-100">
</a>
</div>
<div class="col-9 category">
<ul class="list d-flex align-items-center justify-content-around">
<li class="item">
<a href="javascript:;">
<div class="image mb-2">
<img src="/images/static-category-icon-1.png" alt="category icon" class="d-flex h-100 m-auto">
</div>
<p class="text text-14 text-uppercase">Hi-end</p>
</a>
</li>
<li class="item">
<a href="javascript:;">
<div class="image mb-2">
<img src="/images/static-category-icon-2.png" alt="category icon" class="d-flex h-100 m-auto">
</div>
<p class="text text-14 text-uppercase">Hi-end</p>
</a>
</li>
<li class="item">
<a href="javascript:;">
<div class="image mb-2">
<img src="/images/static-category-icon-3.png" alt="category icon" class="d-flex h-100 m-auto">
</div>
<p class="text text-14 text-uppercase">Hi-end</p>
</a>
</li>
<li class="item">
<a href="javascript:;">
<div class="image mb-2">
<img src="/images/static-category-icon-4.png" alt="category icon" class="d-flex h-100 m-auto">
</div>
<p class="text text-14 text-uppercase">Hi-end</p>
</a>
</li>
<li class="item">
<a href="javascript:;">
<div class="image mb-2">
<img src="/images/static-category-icon-5.png" alt="category icon" class="d-flex h-100 m-auto">
</div>
<p class="text text-14 text-uppercase">Hi-end</p>
</a>
</li>
<li class="item">
<a href="javascript:;">
<div class="image mb-2">
<img src="/images/static-category-icon-6.png" alt="category icon" class="d-flex h-100 m-auto">
</div>
<p class="text text-14 text-uppercase">Hi-end</p>
</a>
</li>
</ul>
</div>
<div class="col-1 function">
<a href="javascript:;" class="icon p-relative">
<i class="static-icons static-icons-static-icon-header-search"></i>
</a>
<a href="/cart" class="icon">
<i class="static-icons static-icons-static-icon-header-cart"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- BREADCRUMB -->
<section class="section-breadcrumb routing py-12px">
<div class="global-breadcrumb container">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="list-style-none d-flex">
<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>
<!-- HOMEPAGE -->
<div class="homepage d-none">
<!-- SECTION HERO -->
<div class="section-hero">
<div class="swiper swiper-section-hero">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/images/static-banner-hero-img-1.png" alt="Banner" class="d-flex w-100">
<div class="wrapper-content text-center color-white">
<h4 class="title">MUSIC IS YOUR TIME MACHINE</h4>
<p class="text">
We hold our notes longer, better, and higher. We put the mental in instrumental and the cool in
musicool.
</p>
</div>
</div>
<div class="swiper-slide">
<img src="/images/static-banner-hero-img-1.png" alt="Banner" class="d-flex w-100">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="container">
<!-- SECTION BRAND -->
<div class="section-brand bg-secondary mt-12px">
<div class="swiper swiper-section-banner">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/images/static-brand-img-1.png" alt="Brand" class="d-flex w-100">
</div>
<div class="swiper-slide">
<img src="/images/static-brand-img-2.png" alt="Brand" class="d-flex w-100">
</div>
<div class="swiper-slide">
<img src="/images/static-brand-img-3.png" alt="Brand" class="d-flex w-100">
</div>
<div class="swiper-slide">
<img src="/images/static-brand-img-4.png" alt="Brand" class="d-flex w-100">
</div>
<div class="swiper-slide">
<img src="/images/static-brand-img-5.png" alt="Brand" class="d-flex w-100">
</div>
<div class="swiper-slide">
<img src="/images/static-brand-img-6.png" alt="Brand" class="d-flex w-100">
</div>
</div>
</div>
</div>
<!-- SECTION DEAL -->
<div class="section-deal mt-12px">
<!-- HEADING -->
<div class="heading-deal row align-items-center">
<div class="col-4">
<div class="wrapper-title d-flex align-items-center gap-8">
<i class="title">Flash Sale</i>
<i class="static-icons static-icons-static-icon-thunder"></i>
<i class="time">15.02</i>
</div>
</div>
<div class="col-6 d-flex align-items-center gap-8">
<span>Kết thúc trong</span>
<div class="global-time-deal d-flex align-items-center font-weight-700 color-white">
<p>9</p>
<p>9</p>
<span>:</span>
<p>9</p>
<p>9</p>
<span>:</span>
<p>9</p>
<p>9</p>
<span>:</span>
<p>9</p>
<p>9</p>
</div>
</div>
<div class="col-2 text-right">
<a href="javascript:;" class="view-more">Xem tất cả +</a>
</div>
</div>
<!-- PRODUCT -->
<div class="product-deal row">
<div class="col-8">
<div class="p-deal-featured grid grid--2-cols align-items-end">
<div class="p-info text-right">
<a href="">
<h3 class="p-name text-24 font-weight-600 mb-4">Lorem ipsum is placeholder text commonly used</h3>
</a>
<p class="p-price-sale text-32 font-weight-700 color-primary mb-1">72.880.000₫</p>
<p class="p-price-stock text-24 font-weight-500 color-gray-2 text-line-through">82.880.000₫</p>
<p class="p-summary font-weight-300 my-4">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam ...</span>
</p>
<div class="wrapper-deal p-relative mb-4">
<div class="deal-line total"></div>
<div class="deal-line remaining"></div>
<i class="static-icons static-icons-static-icon-fire"></i>
<p class="sold text-12 color-white">Đã bán 30</p>
</div>
<a href="" class="p-cart d-flex align-items-center justify-content-center gap-8">
<i class="static-icons static-icons-static-icon-header-cart-pro-big"></i>
<span class="text-20 font-weight-500 color-primary text-uppercase">Cho vào giỏ hàng</span>
</a>
</div>
<div class="p-image">
<a href="">
<img src="/images/static-image-pro-1.png" alt="Deal" class="d-flex w-100">
</a>
</div>
</div>
</div>
<div class="col-4">
<div class="p-deal-other">
<div class="swiper swiper-deal-list">
<div class="swiper-wrapper">
<!-- SWIPER SLIDE -->
<div class="swiper-slide">
<div class="p-item d-flex gap-16">
<a href="" class="p-image">
<img src="/images/static-image-pro-1.png" alt="Deal" class="p-img d-flex w-100">
</a>
<div class="p-info">
<a href="">
<h3 class="p-name mt-1">Lorem ipsum is placeholder text commonly used</h3>
</a>
<p class="p-price">
<span class="p-price-sale">72.880.000₫</span>
<span class="p-price-stock">82.880.000₫</span>
</p>
<div class="wrapper d-flex align-items-end gap-32 mt-2">
<div class="wrapper-deal p-relative flex-1 mb-2">
<div class="deal-line total"></div>
<div class="deal-line remaining"></div>
<i class="static-icons static-icons-static-icon-fire"></i>
<p class="sold text-12 color-white">Đã bán 30</p>
</div>
<a href="javascript:;" class="p-cart">
<i class="static-icons static-icons-static-icon-header-cart-pro"></i>
</a>
</div>
</div>
</div>
</div>
<!-- SWIPER SLIDE -->
<div class="swiper-slide">
<div class="p-item d-flex gap-16">
<a href="" class="p-image">
<img src="/images/static-image-pro-1.png" alt="Deal" class="p-img d-flex w-100">
</a>
<div class="p-info">
<a href="">
<h3 class="p-name mt-1">Lorem ipsum is placeholder text commonly used</h3>
</a>
<p class="p-price">
<span class="p-price-sale">72.880.000₫</span>
<span class="p-price-stock">82.880.000₫</span>
</p>
<div class="wrapper d-flex align-items-end gap-32 mt-2">
<div class="wrapper-deal p-relative flex-1 mb-2">
<div class="deal-line total"></div>
<div class="deal-line remaining"></div>
<i class="static-icons static-icons-static-icon-fire"></i>
<p class="sold text-12 color-white">Đã bán 30</p>
</div>
<a href="javascript:;" class="p-cart">
<i class="static-icons static-icons-static-icon-header-cart-pro"></i>
</a>
</div>
</div>
</div>
</div>
<!-- SWIPER SLIDE -->
<div class="swiper-slide">
<div class="p-item d-flex gap-16">
<a href="" class="p-image">
<img src="/images/static-image-pro-1.png" alt="Deal" class="p-img d-flex w-100">
</a>
<div class="p-info">
<a href="">
<h3 class="p-name mt-1">Lorem ipsum is placeholder text commonly used</h3>
</a>
<p class="p-price">
<span class="p-price-sale">72.880.000₫</span>
<span class="p-price-stock">82.880.000₫</span>
</p>
<div class="wrapper d-flex align-items-end gap-32 mt-2">
<div class="wrapper-deal p-relative flex-1 mb-2">
<div class="deal-line total"></div>
<div class="deal-line remaining"></div>
<i class="static-icons static-icons-static-icon-fire"></i>
<p class="sold text-12 color-white">Đã bán 30</p>
</div>
<a href="javascript:;" class="p-cart">
<i class="static-icons static-icons-static-icon-header-cart-pro"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BANNER -->
<div class="banner-deal mt-4">
<div class="row">
<div class="col-4">
<a href="javascript:;" class="banner-deal-image">
<img src="/images/static-banner-sale-img-1.png" alt="Deal" class="d-flex w-100">
<div class="overlay"></div>
<div class="wrapper-content">
<p class="title mb-2">Save Up To 30%</p>
<span class="text">Lorem ipsum dolor sit amet, consectetur</span>
<p class="btn text-20 font-weight-500 mt-3 bg-primary">MUA NGAY</p>
</div>
</a>
</div>
<div class="col-4">
<a href="javascript:;" class="banner-deal-image">
<img src="/images/static-banner-sale-img-2.png" alt="Deal" class="d-flex w-100">
<div class="overlay"></div>
<div class="wrapper-content">
<p class="title mb-2">Save Up To 30%</p>
<span class="text">Lorem ipsum dolor sit amet, consectetur</span>
<p class="btn text-20 font-weight-500 mt-3 bg-primary">MUA NGAY</p>
</div>
</a>
</div>
<div class="col-4">
<a href="javascript:;" class="banner-deal-image">
<img src="/images/static-banner-sale-img-3.png" alt="Deal" class="d-flex w-100">
<div class="overlay"></div>
<div class="wrapper-content">
<p class="title mb-2">Save Up To 30%</p>
<span class="text">Lorem ipsum dolor sit amet, consectetur</span>
<p class="btn text-20 font-weight-500 mt-3 bg-primary">MUA NGAY</p>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- SECTION CATEGORY -->
<div class="section-category mt-12px pb-4">
<div class="category-box">
<div class="heading-primary d-flex align-items-center gap-24">
<h2 class="title">Âm Thanh Hi-End</h2>
<div class="offsite-wrapper">
<a href="javascript:;" class="view-more">Xem tất cả +</a>
</div>
</div>
<div class="category-child mb-3">
<ul class="list d-flex align-items-center justify-content-center text-18 color-gray-2">
<li class="item hover-primary selected">Đầu phát Hi-end</li>
<li class="item hover-primary">DAC, Clock, Upsampler...</li>
</ul>
</div>
<div class="category-product grid grid--4-cols">
<div class="p-item">
<a href="" class="p-image">
<img src="/images/static-image-pro-1.png" alt="Product" class="p-img d-flex w-100">
</a>
<a href="">
<h3 class="p-name">Lorem ipsum is placeholder text commonly used</h3>
</a>
<div class="p-price d-flex">
<div class="p-price-sale">72.880.000₫</div>
<div class="p-price-stock">82.880.000₫</div>
</div>
<div class="p-wrapper d-flex align-items-center justify-content-between mt-2">
<div class="p-summary">
<span class="ws-pre-line">+ Giá tốt nhất khi liên hệ ngay
+ Hỗ trợ kỹ thuật 24/7
+ Bảo hành chính hãng</span>
</div>
<a href="javascript:;" class="p-cart">
<i class="static-icons static-icons-static-icon-header-cart-pro"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION CUSTOMER -->
<div class="section-customer">
<div class="heading-primary d-flex align-items-center gap-24">
<h2 class="title">Khách hàng đã mua gần đây</h2>
<div class="offsite-wrapper">
<a href="javascript:;" class="view-more">Xem tất cả +</a>
</div>
</div>
<ul class="list row">
<li class="item col-4">
<div class="row">
<div class="col-6">
<img src="/images/static-banner-review-img-1.png" alt="Review"
class="customer-product-image d-flex w-100">
</div>
<div class="col-6">
<div class="customer-product-review">
<div class="star py-2">
<i class="static-icons static-icons-static-icon-star-orange"></i>
<i class="static-icons static-icons-static-icon-star-orange"></i>
<i class="static-icons static-icons-static-icon-star-orange"></i>
<i class="static-icons static-icons-static-icon-star-orange"></i>
<i class="static-icons static-icons-static-icon-star-orange"></i>
</div>
<div class="review text-14 mb-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam ...
</div>
<div class="basic-info d-flex align-items-center gap-8">
<i class="static-icons static-icons-static-icon-review-user"></i>
<p class="text-12">
<b class="d-block">Nguyễn Thị Hồng Nhung</b>
0383100 ***
</p>
</div>
</div>
</div>
</div>
</li>
<li class="item col-4">
<div class="row">
<div class="col-6">
<img src="/images/static-banner-review-img-1.png" alt="Review"
class="customer-product-image d-flex w-100">
</div>
<div class="col-6">
<div class="customer-product-review">
<div class="star py-2">
<i class="static-icons static-icons-static-icon-star-orange"></i>
<i class="static-icons static-icons-static-icon-star-orange"></i>
<i class="static-icons static-icons-static-icon-star-orange"></i>
<i class="static-icons static-icons-static-icon-star-orange"></i>
<i class="static-icons static-icons-static-icon-star-orange"></i>
</div>
<div class="review text-14 mb-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam ...
</div>
<div class="basic-info d-flex align-items-center gap-8">
<i class="static-icons static-icons-static-icon-review-user"></i>
<p class="text-12">
<b class="d-block">Nguyễn Thị Hồng Nhung</b>
0383100 ***
</p>
</div>
</div>
</div>
</div>
</li>
<li class="item col-4">
<div class="row">
<div class="col-6">
<img src="/images/static-banner-review-img-1.png" alt="Review"
class="customer-product-image d-flex w-100">
</div>
<div class="col-6">
<div class="customer-product-review">
<div class="star py-2">
<i class="static-icons static-icons-static-icon-star-orange"></i>
<i class="static-icons static-icons-static-icon-star-orange"></i>
<i class="static-icons static-icons-static-icon-star-orange"></i>
<i class="static-icons static-icons-static-icon-star-orange"></i>
<i class="static-icons static-icons-static-icon-star-orange"></i>
</div>
<div class="review text-14 mb-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam ...
</div>
<div class="basic-info d-flex align-items-center gap-8">
<i class="static-icons static-icons-static-icon-review-user"></i>
<p class="text-12">
<b class="d-block">Nguyễn Thị Hồng Nhung</b>
0383100 ***
</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- CATEGORY PAGE -->
<div class="category-page d-none">
<div class="container">
<!-- BANNER -->
<div class="banner p-relative mb-3">
<img src="/images/static-banner-category-img-1.png" alt="Banner" class="d-flex w-100">
<h1 class="overlay d-flex align-items-center justify-content-center">Hi-end</h1>
</div>
<!-- MAIN CONTENT -->
<div class="main-content row">
<div class="col-9">
<!-- SORT -->
<div class="sort d-flex align-items-center justify-content-between pb-2">
<div class="wrapper-sort d-flex align-items-center gap-16">
<div class="sort-by-display d-flex gap-8">
<a href="" class="d-flex"><i class="static-icons static-icons-static-icon-category-grid"></i></a>
<a href="" class="d-flex"><i class="static-icons static-icons-static-icon-category-list"></i></a>
</div>
<p class="total-product">Tổng 865 sản phẩm</p>
</div>
<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>
<!-- PRODUCT LIST -->
<div class="product-list mt-3 pt-1 grid grid--3-cols">
<div class="p-item">
<a href="" class="p-image">
<img src="/images/static-image-pro-1.png" alt="Product" class="p-img d-flex w-100">
</a>
<a href="">
<h3 class="p-name">Lorem ipsum is placeholder text commonly used</h3>
</a>
<div class="p-price d-flex">
<div class="p-price-sale">72.880.000₫</div>
<div class="p-price-stock">82.880.000₫</div>
</div>
<div class="p-wrapper d-flex align-items-center justify-content-between mt-2">
<div class="p-summary">
<span class="ws-pre-line">+ Giá tốt nhất khi liên hệ ngay
+ Hỗ trợ kỹ thuật 24/7
+ Bảo hành chính hãng</span>
</div>
<a href="javascript:;" class="p-cart">
<i class="static-icons static-icons-static-icon-header-cart-pro"></i>
</a>
</div>
</div>
</div>
<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>
<!-- FILTER -->
<div class="col-3">
<div class="filter">
<h2 class="title text-20 text-uppercase font-weight-700">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">
<i class="check-box"></i>
<span>Accuphase (33)</span>
</a>
</li>
<li class="item">
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
<i class="check-box"></i>
<span>Accuphase (33)</span>
</a>
</li>
<li class="item">
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
<i class="check-box"></i>
<span>Accuphase (33)</span>
</a>
</li>
<li class="item">
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
<i class="check-box"></i>
<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">
<i class="check-box"></i>
<span>Accuphase (33)</span>
</a>
</li>
<li class="item">
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
<i class="check-box"></i>
<span>Accuphase (33)</span>
</a>
</li>
<li class="item">
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
<i class="check-box"></i>
<span>Accuphase (33)</span>
</a>
</li>
<li class="item">
<a href="javascript:;" class="d-flex align-items-center gap-8 mb-1">
<i class="check-box"></i>
<span>Accuphase (33)</span>
</a>
</li>
</ul>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<!-- DETAIL PAGE -->
<div class="detail-page">
<div class="container">
<!-- SECTION PRODUCT -->
<div class="section-product row">
<!-- IMAGE THUMB -->
<div class="col-5">
<div class="pro-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-pro-1.png">
<img src="/images/static-image-pro-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-pro-1.png">
<img src="/images/static-image-pro-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-pro-1.png">
<img src="/images/static-image-pro-1.png" alt="Sản phẩm" class="d-flex w-100" />
</a>
</div>
</div>
</div>
<div thumbsSlider="" class="swiper gallery-thumbs product-images-slider">
<div class="swiper-wrapper">
<!-- SLIDE -->
<div class="swiper-slide">
<img src="/images/static-image-pro-1.png" alt="Sản phẩm" class="d-flex w-100" />
</div>
<!-- SLIDE -->
<div class="swiper-slide">
<img src="/images/static-image-pro-1.png" alt="Sản phẩm" class="d-flex w-100" />
</div>
<!-- SLIDE -->
<div class="swiper-slide">
<img src="/images/static-image-pro-1.png" alt="Sản phẩm" class="d-flex w-100" />
</div>
</div>
</div>
</div>
</div>
<!-- INFO -->
<div class="col-6 offset-1">
<!-- -->
<h1 class="pro-name">Loa đứng Loa Cột Floor Standing Hi-end</h1>
<!-- -->
<p class="pro-sub-title text-16 font-weight-300">
Thương hiệu: <span class="color-primary">Fischer - Fischer</span>
<span class="ml-4">Star</span>
<span class="text-14 font-weight-400 color-blue ml-1">1 đánh giá</span>
</p>
<div class="gray-line mb-12px"></div>
<!-- -->
<div class="pro-price">
<p class="pro-price-sale mb-2">
<b class="title">Giá bán:</b>
<span class="text-28 font-weight-700 color-primary">189.900.000₫</span>
</p>
<p class="pro-price-stock mb-2">
<b class="title">Giá cũ:</b>
<del class="text-20 color-gray-2">189.900.000₫</del>
</p>
<p class="pro-price-saleoff mb-2">
<b class="title">Tiết kiệm:</b>
<span class="text-20">10.900.000₫</span>
<span class="text-16 color-primary ml-1">(-10%)</span>
</p>
</div>
<!-- -->
<div class="pro-status font-weight-300 my-3">
<span class="pro-status-item mr-1">Bảo hành: <b class="font-weight-600">12 tháng</b></span>
<span class="pro-status-item color-green font-weight-600">Còn hàng</span>
</div>
<!-- -->
<div class="pro-gift">
<p class="title mb-2">
<i class="static-icons static-icons-static-icon-red-gift mr-1"></i>
Quà khuyến mại
</p>
<ol class="list">
<li class="item">
<span class="marker">1</span>
Lì xì 1.000.000đ
</li>
<li class="item">
<span class="marker">2</span>
Miễn phí công lắp đặt
</li>
</ol>
</div>
<!-- -->
<div class="pro-cart d-flex align-items-center justify-content-between my-3">
<input type="number" name="product quantity" class="pro-cart-quantity" value="1" min="1">
<a href="" class="pro-cart-btn bg-primary color-white">Mua ngay</a>
<a href="" class="pro-cart-btn color-primary">
<i class="static-icons static-icons-static-icon-phone-ct-orange mr-2"></i>
Liên hệ ngay
</a>
</div>
<div class="gray-line mb-12px"></div>
<!-- -->
<div class="pro-social d-flex align-items-center gap-16">
<p class="text-16 font-weight-300">Chia sẻ:</p>
<ul class="list d-flex align-items-center gap-8">
<li>
<a href="javascript:;">
<i class="static-icons static-icons-static-icon-social-fb-orange"></i>
</a>
</li>
<li>
<a href="javascript:;">
<i class="static-icons static-icons-static-icon-social-gg-news-orange"></i>
</a>
</li>
<li>
<a href="javascript:;">
<i class="static-icons static-icons-static-icon-social-instagram-orange"></i>
</a>
</li>
</ul>
</div>
<!-- -->
<div class="pro-features my-3">
<ul class="list text-13 row">
<li class="col-6 d-flex align-items-center gap-12">
<i class="static-icons static-icons-static-icon-feature-delivery-orange"></i>
<p class="wrapper">
<b class="d-block text-uppercase mb-1">Miễn phí vận chuyển</b>
<span class="font-weight-300">Tất cả các đơn hàng trên 1.000.000đ</span>
</p>
</li>
<li class="col-6 d-flex align-items-center gap-12">
<i class="static-icons static-icons-static-icon-feature-delivery-orange"></i>
<p class="wrapper">
<b class="d-block text-uppercase mb-1">Đổi trả dễ dàng</b>
<span class="font-weight-300">1 đổi 1 trong 15 ngày</span>
</p>
</li>
</ul>
</div>
</div>
</div>
<div class="gray-line mb-12px"></div>
<!-- SECTION PRODUCT SAME CATEOGRY -->
<div class="section-product-same-category">
<h2 class="text-20 font-weight-700 text-uppercase my-4">Sản phẩm thường được mua cùng</h2>
<div class="product-list mb-5">
<div class="swiper swiper-relative-product">
<div class="swiper-wrapper grid grid--4-cols" id="js-product-same-category-list">
<div class="p-item">
<a href="" class="p-image">
<img src="/images/static-image-pro-1.png" alt="Product" class="p-img d-flex w-100">
</a>
<a href="">
<h3 class="p-name">Lorem ipsum is placeholder text commonly used</h3>
</a>
<div class="p-price d-flex">
<div class="p-price-sale">72.880.000₫</div>
<div class="p-price-stock">82.880.000₫</div>
</div>
<div class="p-wrapper d-flex align-items-center justify-content-between mt-2">
<div class="p-summary">
<span class="ws-pre-line">+ Giá tốt nhất khi liên hệ ngay
+ Hỗ trợ kỹ thuật 24/7
+ Bảo hành chính hãng</span>
</div>
<a href="javascript:;" class="p-cart">
<i class="static-icons static-icons-static-icon-header-cart-pro"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gray-line mb-12px"></div>
<!-- SECTION PRODUCT SAME PRICE -->
<div class="section-product-same-price">
<h2 class="text-20 font-weight-700 text-uppercase my-4">Sản phẩm tương tự</h2>
<div class="product-list mb-5">
<div class="swiper swiper-relative-product">
<div class="swiper-wrapper grid grid--4-cols" id="js-product-same-price-list">
<div class="p-item">
<a href="" class="p-image">
<img src="/images/static-image-pro-1.png" alt="Product" class="p-img d-flex w-100">
</a>
<a href="">
<h3 class="p-name">Lorem ipsum is placeholder text commonly used</h3>
</a>
<div class="p-price d-flex">
<div class="p-price-sale">72.880.000₫</div>
<div class="p-price-stock">82.880.000₫</div>
</div>
<div class="p-wrapper d-flex align-items-center justify-content-between mt-2">
<div class="p-summary">
<span class="ws-pre-line">+ Giá tốt nhất khi liên hệ ngay
+ Hỗ trợ kỹ thuật 24/7
+ Bảo hành chính hãng</span>
</div>
<a href="javascript:;" class="p-cart">
<i class="static-icons static-icons-static-icon-header-cart-pro"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gray-line mb-12px"></div>
<!-- SECTION DESCRIPTION -->
<div class="section-description my-3 row">
<div class="col-2">
<h2 class="text-16 font-weight-400 text-uppercase">Mô tả</h2>
</div>
<div class="col-10">
<div class="content static-html">
Loa Gauder Akustik Darc 140 | Audio Hoàng Hải.
Loa Gauder Akustik Darc 140 là loại loa đứng âm bass phản xạ 3 đường tiếng. Hệ thống loa âm bass được mở
rộng, loa tầm trung bằng gốm và loa tweeter bằng gốm hoặc kim cương. Đế Darc 140 bằng nhôm cực kỳ chắc chắn,
có thể điều chỉnh linh hoạt thông qua các chi tiết thiết kế ở phía dưới đế loa.
Người nghe sẽ bị ấn tượng ngay từ cái nhìn đầu tiên bởi âm lượng từ cặp loa này phát ra cực kỳ lớn, rất dễ
dàng lấp đầy cả căn phòng rộng hơn 50m2. Dải trung của hệ thống lại sở hữu chất âm trong, rõ hơn hẳn so với
dải trầm, đồng thời thể hiện sự đồng nhất rõ rệt giữa khoảng trên và khoảng dưới, khiến cho việc thể hiện
các nhạc cụ bộ dây cũng như giọng vocal cực kỳ xuất sắc. Quãng âm cao cũng được thể hiện rất mượt mà, rất
tốt nhưng không để lại được nhiều ấn tượng giống như âm trung.
Gauder Akustik Darc 140 có bộ lọc chéo siêu mỏng (> 60 dB / octave).Cầu loa BiWiring với các giắc đấu nối
WBT-Nextgen nổi tiếng, đã làm nên tên tuổi của Gauder Akustik. Hệ thống cân bằng 6 lần ở mức thấp và mức
cao. Bộ phân tần được trang bị độc quyền với các thành phần của Mundorf.
Thùng loa vẫn sử dụng cùng nguyên lý xếp chồng (Rib-Construction) các khung xương bằng nhôm dày 1,57 inch
xen kẽn với lớp vật liệu hấp thu rung động. DARC 140 dùng đến 4 củ loa bass, trong đó 2 được bố trí phía
trên, 2 ở phía dưới; Phần củ loa mid và treb được đặt ở giữa thân loa, ngang tầm tai. Toàn bộ các củ loa này
đều do Accuton chế tạo theo yêu cầu kỹ thuật riêng từ chủ hãng Tiến sĩ vật lý Roland Gauder - mọi thứ đều
được Sản xuất tại Đức.
</div>
</div>
</div>
<div class="gray-line mb-12px"></div>
<!-- SECTION SPEC -->
<div class="section-spec my-3 row">
<div class="col-2">
<h2 class="text-16 font-weight-400 text-uppercase">Thông số kỹ thuật</h2>
</div>
<div class="col-10">
<div class="content static-html">
<table class="attributes">
<tbody>
<tr class="option-item">
<td class="op_name"><strong>CPU</strong></td>
<td>
<div class="wordWrap">Intel Core i7&nbsp;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&nbsp;</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&nbsp;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>
</div>
<div class="gray-line mb-12px"></div>
<!-- SECTION REVIEW -->
<div class="section-review row">
<div class="col-2">
<h2 class="text-16 font-weight-400 text-uppercase">Thảo luận (0)</h2>
</div>
<div class="col-10">
<h4 class="text-16 font-weight-700 mb-2">Chia sẻ suy nghĩ của bạn! Cho chúng tôi biết bạn nghĩ gì...</h4>
<a href="javascript:;" class="d-block mb-4">Để lại một đánh giá</a>
<div class="review-form">
<div class="review-star mb-3">
<p class="text-16 font-weight-700">Bạn đánh giá về sản phẩm này thế nào? *</p>
</div>
<div class="review-content">
<div class="review-form-item">
<label for="r-review" class="d-block mb-2 text-14 font-weight-700">Review *</label>
<textarea name="review" id="r-review" cols="30" rows="10" class="r-input"
placeholder="Hãy nói cho chúng tôi biết suy nghĩ của bạn về sản phẩm này"></textarea>
</div>
<div class="review-form-item">
<label for="r-name" class="d-block mb-2 text-14 font-weight-700">Họ Tên *</label>
<input type="text" name="name" id="r-name" class="r-input">
</div>
<div class="review-form-item">
<label for="r-email" class="d-block mb-2 text-14 font-weight-700">Email *</label>
<input type="email" name="email" id="r-email" class="r-input">
</div>
</div>
<a href="" class="review-btn">Lưu đánh giá</a>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer class="footer mt-4">
<!-- FOOTER TOP -->
<div class="footer-top">
<div class="container">
<ul class="features row list d-flex align-items-center">
<li class="col-3">
<p class="item d-flex align-items-center gap-8">
<i class="static-icons static-icons-static-icon-feature-delivery"></i>
<span class="text-13">
<b class="d-block font-weight-700">Miễn phí vận chuyển</b>
Tất cả các đơn hàng trên 1.000.000đ
</span>
</p>
</li>
<li class="col-3">
<p class="item d-flex align-items-center gap-8">
<i class="static-icons static-icons-static-icon-feature-calendar"></i>
<span class="text-13">
<b class="d-block font-weight-700">Đổi trả dễ dàng</b>
1 đổi 1 trong 15 ngày
</span>
</p>
</li>
<li class="col-3">
<p class="item d-flex align-items-center gap-8">
<i class="static-icons static-icons-static-icon-feature-wallet"></i>
<span class="text-13">
<b class="d-block font-weight-700">Thanh toán tiện lợi</b>
Trả tiền mặt, CK, trả góp 0%
</span>
</p>
</li>
<li class="col-3">
<p class="item d-flex align-items-center gap-8">
<i class="static-icons static-icons-static-icon-feature-phone"></i>
<span class="text-13">
<b class="d-block font-weight-700">Hỗ trợ nhiệt tình</b>
Tư vấn, giải đáp mọi thắc mắc
</span>
</p>
</li>
</ul>
</div>
</div>
<!-- FOOTER MID -->
<div class="footer-mid">
<div class="container">
<div class="row align-items-center">
<div class="col-2">
<a href="/" class="logo">
<img src="/images/audio-logo.png" alt="Logo" class="d-flex w-100">
</a>
</div>
<div class="col-6">
<p class="text-13">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.</p>
</div>
<div class="col-3 offset-1">
<div class="wrapper d-flex align-items-center justify-content-between">
<a href="javascript:;" class="d-flex">
<i class="static-icons static-icons-static-icon-social-fb"></i>
</a>
<a href="javascript:;" class="d-flex">
<i class="static-icons static-icons-static-icon-social-gg-news"></i>
</a>
<a href="javascript:;" class="d-flex">
<i class="static-icons static-icons-static-icon-social-youtube"></i>
</a>
<a href="javascript:;" class="d-flex">
<i class="static-icons static-icons-static-icon-social-twitter"></i>
</a>
<a href="javascript:;" class="d-flex">
<i class="static-icons static-icons-static-icon-social-instagram"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER BOTTOM -->
<div class="footer-bottom bg-secondary text-13 color-white">
<div class="container">
<div class="row">
<div class="col-3">
<h3 class="text-13 font-weight-700 text-uppercase mb-12px">Liên hệ</h3>
<ul class="list">
<li>
<a href="javascript:;" class="d-flex align-items-center gap-12">
<i class="static-icons 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:02438524.524" class="d-flex align-items-center gap-12">
<i class="static-icons static-icons-static-icon-phone-ct"></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-icons-static-icon-phone-ct"></i>
<span>Điện thoại: 0988.034.960</span>
</a>
</li>
</ul>
<div class="ministry-of-industry-and-trade">
<img src="/images/static-image-bct.png" alt="Bộ công thương" class="d-flex w-100">
</div>
</div>
<div class="col-3">
<h3 class="text-13 font-weight-700 text-uppercase mb-12px">THÔNG TIN HỮU ÍCH</h3>
<ul class="list">
<li>
<a href="javascript:;" class="d-flex align-items-center gap-12">
<span>Giới thiệu</span>
</a>
</li>
<li>
<a href="javascript:;" class="d-flex align-items-center gap-12">
<span>Tuyển dụng</span>
</a>
</li>
<li>
<a href="javascript:;" class="d-flex align-items-center gap-12">
<span>Tin tức</span>
</a>
</li>
<li>
<a href="javascript:;" class="d-flex align-items-center gap-12">
<span>Ý kiến khách hàng</span>
</a>
</li>
<li>
<a href="javascript:;" 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="javascript:;" class="d-flex align-items-center gap-12">
<span>Liên hệ</span>
</a>
</li>
</ul>
</div>
<div class="col-3">
<h3 class="text-13 font-weight-700 text-uppercase mb-12px">HỖ TRỢ MUA HÀNG</h3>
<ul class="list">
<li>
<a href="javascript:;" 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="javascript:;" class="d-flex align-items-center gap-12">
<span>Các hình thức thanh toán</span>
</a>
</li>
<li>
<a href="javascript:;" class="d-flex align-items-center gap-12">
<span>Tại sao chọn mua hàng online</span>
</a>
</li>
<li>
<a href="javascript:;" class="d-flex align-items-center gap-12">
<span>Các hình thức mua hàng</span>
</a>
</li>
<li>
<a href="javascript:;" class="d-flex align-items-center gap-12">
<span>Chính sách vận chuyển</span>
</a>
</li>
<li>
<a href="javascript:;" 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="javascript:;" 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-3">
<h3 class="text-13 font-weight-700 text-uppercase mb-12px">THÔNG TIN KHUYẾN MẠI</h3>
<ul class="list">
<li>
<a href="javascript:;" class="d-flex align-items-center gap-12">
<span>Thông tin khuyến mại</span>
</a>
</li>
<li>
<a href="javascript:;" class="d-flex align-items-center gap-12">
<span>Sản phẩm khuyến mại</span>
</a>
</li>
<li>
<a href="javascript:;" class="d-flex align-items-center gap-12">
<span>Sản phẩm bán chạy</span>
</a>
</li>
<li>
<a href="javascript:;" class="d-flex align-items-center gap-12">
<span>Sản phẩm mới</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- COPYRIGHT -->
<div class="copy-right bg-secondary color-white">
<div class="container">
<h5 class="text-13 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>