webiste mau thoi trang 2

demo-thoitrang-2/assets/js/main.js

@@ -0,0 +1,162 @@
+$(document).ready(function () {
+
+    $(".content-footer-main .item .title").click(function () {
+        $(this).parents(".show-footer").toggleClass("active");
+    });
+})
+
+
+
+$(document).ready(function () {
+
+    var sync1 = $("#sync1");
+    var sync2 = $("#sync2");
+    var slidesPerPage = 7; //globaly define number of elements per page
+    var syncedSecondary = true;
+
+    sync1.owlCarousel({
+        items: 2,
+        slideSpeed: 2000,
+        nav: true,
+        center: false,
+        autoplay: false,
+        autoplayTimeout: 2000,
+        autoplaySpeed: 1000,
+        autoplayHoverPause: true,
+        dots: false,
+        loop: false,
+        lazyLoad: true,
+        responsiveRefreshRate: 200,
+        margin: 20,
+        navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
+    }).on('changed.owl.carousel', syncPosition);
+
+    sync2
+        .on('initialized.owl.carousel', function () {
+            sync2.find(".owl-item").eq(0).addClass("current");
+        })
+        .owlCarousel({
+            items: slidesPerPage,
+            margin: 15,
+            loop: false,
+            dots: false,
+            nav: false,
+            navText: ['<span class="fa fa-chevron-left"></span>', '<span class="fa fa-chevron-right"></span>'],
+            slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
+            responsiveRefreshRate: 100
+        }).on('changed.owl.carousel', syncPosition2);
+
+    function syncPosition(el) {
+        //if you set loop to false, you have to restore this next line
+        //var current = el.item.index;
+
+        //if you disable loop you have to comment this block
+        var count = el.item.count - 1;
+        var current = Math.round(el.item.index - (el.item.count / 2) - .5);
+
+        if (current < 0 && 1 < 2) {
+            current = count;
+        }
+        if (current > count) {
+            current = 0;
+        }
+
+        //end block
+
+        sync2
+            .find(".owl-item")
+            .removeClass("current")
+            .eq(current)
+            .addClass("current");
+        var onscreen = sync2.find('.owl-item.active').length - 1;
+        var start = sync2.find('.owl-item.active').first().index();
+        var end = sync2.find('.owl-item.active').last().index();
+
+        if (current > end) {
+            sync2.data('owl.carousel').to(current, 100, true);
+        }
+        if (current < start && 1 < 2) {
+            sync2.data('owl.carousel').to(current - onscreen, 100, true);
+        }
+    }
+
+    function syncPosition2(el) {
+        if (syncedSecondary) {
+            var number = el.item.index;
+            sync1.data('owl.carousel').to(number, 100, true);
+        }
+    }
+
+    sync2.on("click", ".owl-item", function (e) {
+        e.preventDefault();
+        var number = $(this).index();
+        sync1.data('owl.carousel').to(number, 300, true);
+    });
+
+    $("#title_tab_scroll_pro a").click(function () {
+        $("#title_tab_scroll_pro a").removeClass("active");
+        $(this).addClass("active");
+        var idTab = $(this).attr('href');
+
+        $('.content-tab').removeClass('active');
+        $(idTab).addClass('active')
+        return false;
+    });
+});
+
+const MIN_PAGE_PRICE = parseInt('0');
+const MAX_PAGE_PRICE = parseInt('1000000');
+
+var current_min = parseInt('0');
+var current_max = parseInt('1000000');
+
+$(document).ready(function () {
+    $('.max-price-filter').html(formatCurrency(current_max) + ' đ');
+    $('#input-min-price-filter').val(formatCurrency(current_min))
+    $('#input-max-price-filter').val(formatCurrency(current_max));
+    $("#slider-range").slider({
+        range: "max",
+        max: 0,
+        min: 0,
+        max: MAX_PAGE_PRICE,
+        values: 2,
+        slide: function (event, ui) {
+            console.log(ui)
+            var max = Math.floor(ui.value);
+            $('.max-price-filter').html(formatCurrency(max) + ' đ');
+            $('#input-max-price-filter').html(formatCurrency(max));
+        },
+    });
+
+    $("#slider-range").slider("option", "max", MAX_PAGE_PRICE);
+})
+
+
+function formatCurrency(a) {
+    var b = parseFloat(a).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+    var len = b.length;
+    b = b.substring(0, len - 3);
+    return b;
+}
+
+function finterPriceSli() {
+    var getMinPriceString = $('#input-min-price-filter').val();
+    var getMaxPriceString = $('#input-max-price-filter').val();
+    var getMinPrice = parseInt(getMinPriceString.replace(/\./g, ''));
+    var getMaxPrice = parseInt(getMaxPriceString.replace(/\./g, ''));
+    var textMinPrice = 'trieu';
+    var textMaxPrice = 'trieu';
+    if (getMinPrice < 1000000) {
+        var minPrice = Math.floor(getMinPrice / 1000);
+        textMinPrice = 'ngan';
+    } else {
+        var minPrice = Math.floor(getMinPrice / 1000000);
+    }
+    if (getMaxPrice < 1000000) {
+        var maxPrice = Math.round(getMaxPrice / 1000);
+        textMaxPrice = 'ngan';
+    } else {
+        var maxPrice = Math.round(getMaxPrice / 1000000);
+    }
+    window.location.href = '?p=' + minPrice + textMinPrice + '-' + maxPrice + textMaxPrice;
+}

demo-thoitrang-2/cart.html

@@ -0,0 +1,23 @@
+<!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="stylesheet" href="./assets/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
+
+</head>
+
+<body>
+</body>
+
+</html>

demo-thoitrang-2/category.html

@@ -0,0 +1,237 @@
+<!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="stylesheet" href="./assets/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
+
+</head>
+
+<body>
+    <div class="product-category">
+        <div class="global-breadcrumb">
+            <div class="container">
+                <div id="breadcrumb" class="breadcrumb">
+                    <ol itemscope="" itemtype="http://schema.org/BreadcrumbList">
+                        <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="home">
+                            <a href="/" itemprop="item" class="nopad-l">
+                                <span itemprop="name">Trang chủ</span>
+                                <i>/</i>
+                            </a>
+                            <meta itemprop="position" content="1">
+                        </li>
+                        <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
+                            <a href="/san-pham" itemprop="item">
+                                <span itemprop="name">
+                                    Sản phẩm
+                                </span> <span class="last-bre"> </span>
+                            </a>
+                            <meta itemprop="position" content="2">
+                        </li>
+                    </ol>
+                    <div class="d-flex align-items space-between name-cate">
+                        <div class="name">Thời trang nữ</div>
+                        <p>TẤT CẢ 320 SẢN PHẨM</p>
+                    </div>
+                </div>
+                <div class="clearfix"></div>
+            </div>
+        </div>
+        <div class="filter-category">
+            <div class="container">
+                <div class="content-filter d-flex align-items space-between">
+                    <div class="item left">
+                        <div class="title d-flex">
+                            <b>DANH MỤC:</b>
+                            <p>THỜI TRANG NỮ</p>
+                            <i class="fa fa-sort-down"></i>
+                        </div>
+                        <div class="hover-content">
+                            <a href="">Thời trang nam</a>
+                            <a href="">Thời trang nam</a>
+                            <a href="">Thời trang nam</a>
+                        </div>
+                    </div>
+                    <div class="item d-flex align-items mid space-center">
+                        <b class="title-filter">Giá bán</b>
+                        <div class="content-filter-price d-flex align-items">
+                            <div id="slider-range"></div>
+                            <div class="vertical-price-filter">
+                                <div class="vertical-price-filter-child">
+                                    <div id="input-max-price-filter">0</div>
+                                    <div class="price-curency">đ</div>
+                                </div>
+                            </div>
+                            <div class="info-finter-price">
+                                <span class="button-filter" onclick="finterPriceSli()">Lọc</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="item d-flex align-items right">
+                        <b class="title">SẮP XẾP THEO:</b>
+                        <select onchange="location.href=this.value" class="sort-pro">
+                            <option value="">Sắp xếp sản phẩm</option>
+
+                            <option value="?sort=new">Mới nhất</option>
+
+                            <option value="?sort=price-asc">Giá tăng dần
+                            </option>
+
+                            <option value="?sort=price-desc">Giá giảm dần
+                            </option>
+
+                            <option value="?sort=view">Lượt xem</option>
+
+                            <option value="?sort=comment">Trao đổi</option>
+
+                            <option value="?sort=rating">Đánh giá</option>
+
+                            <option value="?sort=name">Tên A-&gt;Z</option>
+
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container">
+            <div class="list-product d-flex flex-wrap">
+                <div class="product-item">
+                    <a href="" class="image-product">
+                        <img src="./assets/images/product-deal.png" alt="">
+
+                    </a>
+                    <div class="box-sale saleoff">- 17%</div>
+                    <div class="info-product d-flex">
+                        <div class="content-info">
+                            <a href="" class="product-title">
+                                Cream Cropped Woven Vest (Áo vest)
+                            </a>
+                            <div class="product-price-main d-flex align-items">
+                                <b class="price">
+                                    37.490.000 đ
+                                </b>
+                                <del class="old-price">38.490.000 đ</del>
+                            </div>
+                        </div>
+                        <a href="javascript" class="buy-cart">
+                            <i class="icon_2023 cart"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="product-item">
+                    <a href="" class="image-product">
+                        <img src="./assets/images/product-deal.png" alt="">
+
+                    </a>
+                    <div class="box-sale saleoff">- 17%</div>
+                    <div class="info-product d-flex">
+                        <div class="content-info">
+                            <a href="" class="product-title">
+                                Cream Cropped Woven Vest (Áo vest)
+                            </a>
+                            <div class="product-price-main d-flex align-items">
+                                <b class="price">
+                                    37.490.000 đ
+                                </b>
+                                <del class="old-price">38.490.000 đ</del>
+                            </div>
+                        </div>
+                        <a href="javascript" class="buy-cart">
+                            <i class="icon_2023 cart"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="product-item">
+                    <a href="" class="image-product">
+                        <img src="./assets/images/product-deal.png" alt="">
+
+                    </a>
+                    <div class="box-sale saleoff">- 17%</div>
+                    <div class="info-product d-flex">
+                        <div class="content-info">
+                            <a href="" class="product-title">
+                                Cream Cropped Woven Vest (Áo vest)
+                            </a>
+                            <div class="product-price-main d-flex align-items">
+                                <b class="price">
+                                    37.490.000 đ
+                                </b>
+                                <del class="old-price">38.490.000 đ</del>
+                            </div>
+                        </div>
+                        <a href="javascript" class="buy-cart">
+                            <i class="icon_2023 cart"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="product-item">
+                    <a href="" class="image-product">
+                        <img src="./assets/images/product-deal.png" alt="">
+
+                    </a>
+                    <div class="box-sale saleoff">- 17%</div>
+                    <div class="info-product d-flex">
+                        <div class="content-info">
+                            <a href="" class="product-title">
+                                Cream Cropped Woven Vest (Áo vest)
+                            </a>
+                            <div class="product-price-main d-flex align-items">
+                                <b class="price">
+                                    37.490.000 đ
+                                </b>
+                                <del class="old-price">38.490.000 đ</del>
+                            </div>
+                        </div>
+                        <a href="javascript" class="buy-cart">
+                            <i class="icon_2023 cart"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="product-item">
+                    <a href="" class="image-product">
+                        <img src="./assets/images/product-deal.png" alt="">
+
+                    </a>
+                    <div class="box-sale saleoff">- 17%</div>
+                    <div class="info-product d-flex">
+                        <div class="content-info">
+                            <a href="" class="product-title">
+                                Cream Cropped Woven Vest (Áo vest)
+                            </a>
+                            <div class="product-price-main d-flex align-items">
+                                <b class="price">
+                                    37.490.000 đ
+                                </b>
+                                <del class="old-price">38.490.000 đ</del>
+                            </div>
+                        </div>
+                        <a href="javascript" class="buy-cart">
+                            <i class="icon_2023 cart"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+
+<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"
+    type="text/css" />
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
+<script src="./assets/js/main.js"></script>
+
+</html>

demo-thoitrang-2/huongdan.html

@@ -0,0 +1,370 @@
+<div class="md-contents" style="font-size:18px;line-height:1.75;">
+
+    <h2>1. Cài đặt webpack</h2>
+    <p><b>Bước 1:</b> Cài đặt Node.js và npm</p>
+    <p>Webpack cần Node.js và npm để hoạt động. Nếu chưa cài đặt Node.js và npm, có thể tải xuống từ trang chủ
+        của
+        Node.js (https://nodejs.org).</p>
+    <p><b>Bước 2:</b> Khởi tạo npm</p>
+    <ul>
+        <li>Khởi tạo bằng lệnh :</li>
+    </ul>
+    <blockquote style="display: block;overflow: auto;padding: 10px;background-color: #f8f8f8;border-left: 3px solid
+        #5488c7;margin: 0 0 1rem;">
+        <p style="margin: 0;
+        color: #818181;
+        font-style: italic;">npm install</p>
+    </blockquote>
+    <p>Sau khi chạy xong lên trên thì trong thư mục sẽ có 1 file package.json</p>
+    <p><b>Bước 3:</b> Cài đặt webpack</p>
+    <p>Sử dụng lệnh sau để cài đặt webpack và webpack-cli:</p>
+    <blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid
+        #5488c7; margin: 0 0 1rem;">
+        <p style="margin: 0;
+        color: #818181;
+        font-style: italic;">npm install webpack webpack-cli --save-dev</p>
+    </blockquote>
+    <p>Sau khi hoàn thành thì file package.json sẽ có nội dung như thế này:</p>
+    <b>Ví dụ:</b>
+    <img style="display: block;
+        margin: 10px 0;" class="progressive-img_full article-img" width="554" height="294"
+        src="https://repo.hurasoft.com/tieptk/webpack/raw/branch/master/webpack/dist/assets/images/file_package.png">
+
+    <p><b>Bước 4:</b> Tạo một tệp cấu hình webpack</p>
+    <p>Webpack sử dụng một tệp cấu hình để cấu hình cách webpack hoạt động. Tạo một tệp <b>webpack.config.js</b> mới
+        trong thư
+        mục gốc dự án và thêm các cài đặt sau:</p>
+    <b>Ví dụ:</b>
+
+    <pre style=" background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
+<code class="language-javascript">
+    const path = require('path');       
+        module.exports = {
+            entry: './src/index.js',
+            output: {
+                path: path.resolve(__dirname, 'dist'),
+                filename: 'bundle.js'
+            }
+    };
+</code>
+</pre>
+
+    <b>Ghi chú:</b>
+    <p>Cần cài thêm path bằng lệnh sau:</p>
+    <blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid
+            #5488c7; margin: 0 0 1rem;">
+        <p style="margin: 0;
+            color: #818181;
+            font-style: italic;">npm install --save-dev path</p>
+    </blockquote>
+
+    <p>Cần chia thành 2 Folder lớn: <b>disc</b> và <b>src</b></p>
+    <ul>
+        <li>Trong đó file disc sẽ chứa code html,image và file js được bundler ra của dự án</li>
+        <li>File <b>src</b> sẽ là file code <b>javascript</b> hoặc <b>typescript</b></li>
+    </ul>
+
+    <p><strong>Entry</strong>: Là file webpack sẽ bắt đầu làm việc và thực hiện viêc nạp file để thực hiện việc
+        bundler,
+        cần phải trỏ tên và đúng đường dẫn đến file code cần bundler</p>
+    <p><strong>Output</strong> : Nó sẽ có tác dụng chỉ cho webpack biết cần phải lưu file tên gì và được compile ra
+        đâu
+    </p>
+    <p><b>Bước 6:</b> Chạy webpack</p>
+    <p>Để chạy webpack, sử dụng lệnh sau:</p>
+    <blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid
+        #5488c7; margin: 0 0 1rem;">
+        <p style="margin: 0;
+        color: #818181;
+        font-style: italic;">npx webpack</p>
+    </blockquote>
+    <p>Lệnh này sẽ đóng gói mã nguồn JavaScript của bạn và lưu trữ nó trong thư mục đầu ra được chỉ định trong tệp
+        cấu
+        hình webpack.</p>
+
+    <h2>2. Hướng dẫn chi tiết về các cài đặt cơ bản webpack.config.js</h2>
+    <h3>2.1 Cấu hình đường dẫn đến tệp JavaScript chính với <b>Entry</b></h3>
+    <ul>
+        <li>Để chỉ định tệp JavaScript chính cho webpack, có thể sử dụng tùy chọn <b>Entry</b>.</li>
+    </ul>
+    <b>Ví dụ:</b>
+    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
+    <code>
+        module.exports = {
+            entry: './src/index.js',
+            // ...
+        };
+    </code>
+    </pre>
+    <ul>
+        <li>Trong ví dụ này, đang chỉ định rằng tệp JavaScript chính là <b>./src/index.js</b>.</li>
+    </ul>
+
+    <h3>2.1.2 Cấu hình tên và đường dẫn cho tệp đầu ra với <b>Output</b></h3>
+    <ul>
+        <li>Để chỉ định tên và đường dẫn cho tệp đầu ra của webpack, Có thể sử dụng tùy chọn <b>Ouput</b>.</li>
+    </ul>
+    <b>Ví dụ:</b>
+    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
+    <code>
+        const path = require('path');
+        
+        module.exports = {
+            entry: './src/index.js',
+            output: {
+                filename: 'bundle.js',
+                path: path.resolve(__dirname, 'dist')
+            },
+            // ...
+        };
+    </code>
+    </pre>
+    <ul>
+        <li>Trong ví dụ này, đang chỉ định rằng tệp đầu ra là <b>./dist/bundle.js.</b></li>
+    </ul>
+
+    <h3>2.1.3 Cấu hình các loader để xử lý các loại tệp khác nhau với <b>module</b></h3>
+    <ul>
+        <li>Webpack sử dụng các loader để xử lý các loại tệp khác nhau, chẳng hạn như các tệp CSS, hình ảnh và cả
+            JavaScript.
+            Để cấu
+            hình các loader,có thể sử dụng tùy chọn <b>module.rules</b>.</li>
+    </ul>
+    <b>Ví dụ:</b>
+    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
+    <code>
+        module.exports = {
+            entry: './src/index.js',
+                output: {
+                    filename: 'bundle.js',
+                    path: path.resolve(__dirname, 'dist')
+                },
+            module: {
+                rules: [
+                    { test: /\.tsx?$/, use: 'ts-loader' },
+                ]
+            },
+            // ...
+        };
+    </code>
+    </pre>
+    <ul>
+        <li>Trong ví dụ này, đang sử dụng ts-loader để xử lý tệp typescript.</li>
+    </ul>
+    <b>Có thể tham khảo thêm các ứng dụng khác như xử lý css,image <a
+            href="https://webpack.js.org/configuration/module/#rule" target="_blank">Tại đây</a></b>
+
+    <h3>2.1.4 Sử dụng các plugin để mở rộng chức năng của webpack</h3>
+    <ul>
+        <li><b>Webpack</b> được phát triển khá nhiều plugin <b>ví dụ:
+                HtmlWebpackPlugin,CleanWebpackPlugin.</b> Đây là một số plugin cơ bản hay được
+            sử dụng
+            nhất.</li>
+    </ul>
+    <p><b>2.1.4.1 </b><b>HtmlWebpackPlugin</b> có tác dụng tạo ra một tệp html có tiêu đề là
+        <b>webpack demo</b> và đặt
+        tên
+        là
+        <b>index.html</b> như ví dụ ở bên dưới:
+    </p>
+    <ul>
+        <li>Để sử dụng được <b>HtmlWebpackPlugin</b>, chạy câu lệnh sau:</li>
+    </ul>
+    <blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid
+                #5488c7; margin: 0 0 1rem;">
+        <p style="margin: 0;
+                color: #818181;
+                font-style: italic;">npm install --save-dev html-webpack-plugin</p>
+    </blockquote>
+    <ul>
+        <li>Sau đó thì thêm các đoạn mã code bên dưới vào file <b>webpack.config.js</b></li>
+    </ul>
+    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
+    <code>
+        const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+        module.exports = {
+            plugins: [
+                new HtmlWebpackPlugin({
+                title: 'webpack demo',
+                    filename: 'index.html',
+                    template: 'src/template.html'
+                })
+            ],
+            // ...
+        };
+    </code>
+    </pre>
+
+    <p><b>2.1.4.2</b> <b>CleanWebpackPlugin</b> có tác dụng xóa bỏ các tệp js,html,css.. đã
+        được bundler trước đấy:
+    </p>
+    <ul>
+        <li>Để sử dụng được <b>CleanWebpackPlugin</b>, chạy câu lệnh sau:</li>
+    </ul>
+    <blockquote style="display: block; overflow: auto; padding: 10px; background-color: #f8f8f8; border-left: 3px solid
+                    #5488c7; margin: 0 0 1rem;">
+        <p style="margin: 0;
+                    color: #818181;
+                    font-style: italic;">npm install --save-dev clean-webpack-plugin</p>
+    </blockquote>
+    <ul>
+        <li>Sau đó thì thêm các đoạn mã code bên dưới vào file <b>webpack.config.js</b></li>
+    </ul>
+    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
+    <code>
+        const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+        
+        module.exports = {
+            // ...
+            plugins: [
+                new CleanWebpackPlugin()
+            ]
+        };
+    </code>
+    </pre>
+
+    <h3>2.1.5 Sử dụng optimization cho cấu hình của webpack</h3>
+
+    <ul>
+        <li>Tùy chọn <b>Optimization</b> trong cấu hình webpack cho phép cấu hình tối ưu hoá cho quá trình đóng gói mã
+            nguồn.
+            Tùy
+            chọn này bao gồm các tối ưu hoá như tối ưu hoá đóng gói, tối ưu hoá nén và tối ưu hoá tải trang.</li>
+    </ul>
+
+    <p>Thêm các dòng bên dưới vào file <b>webpack.config.js</b> để tối ưu hóa đóng gói file bundler:</p>
+    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
+        <code>
+        optimization: {
+            minimize: true,
+            minimizer: [
+                new TerserPlugin({
+                    test: /\.js(\?.*)?$/i,
+                }),
+            ],
+        },
+        </code>
+        </pre>
+    <b>Ghi chú:</b>
+    <ul>
+        <li><b>minimize: true</b> chỉ định webpack nên tối ưu hóa đóng gói tập tin bằng plugin <b>TerserPlugin</b>
+            để nén
+            các tệp JavaScript</li>
+    </ul>
+
+    <p><b>Tuy nhiên</b> optimization còn có tùy chọn <b>SplitChunks</b>:</p>
+    <ul>
+        <li>Tùy chọn này cho phép cấu hình tách các module chung thành các tệp riêng biệt để tăng tốc độ tải trang</li>
+    </ul>
+
+    <p>Sử dụng đoạn mã code bên dưới vào file <b>webpack.config.js</b></p>
+
+    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
+            <code>
+            optimization: {
+                splitChunks: {
+                chunks: 'all',
+                },
+            },
+        </code>
+    </pre>
+
+    <h3>2.1.6 Tùy chọn resolve</h3>
+    <ul>
+        <li><b>Resolve</b> khi thêm vào file <b>webpack.config.js</b> cho phép chỉ định các đường dẫn và tệp thêm mới
+            theo
+            từng dự án giúp cho việc import các module và tệp tin trong mã nguồn trở nên dễ dàng và rõ ràng hơn.</li>
+    </ul>
+    <p>Sử dụng đoạn mã code bên dưới vào file <b>webpack.config.js</b></p>
+    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
+                <code>
+                resolve: {
+                    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
+                },
+            </code>
+        </pre>
+    <ul>
+        <li>Có thể sử dụng <b>Extensions</b> cho tùy chọn resolve để chỉ định danh sách các phần mở rộng tệp tin mặc
+            định cho
+            webpack tìm kiếm.</li>
+    </ul>
+    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
+                    <code>
+                    resolve: {
+                        extensions: ['.js', '.jsx', '.json'],
+                    },
+                </code>
+         </pre>
+    <b>Ghi chú:</b>
+    <ul>
+        <li>['.js', '.jsx', '.json'] là danh sách các phần mở rộng tệp tin mặc định cho webpack tìm kiếm. Nếu
+            import
+            một tệp tin mà không chỉ định phần mở rộng, webpack sẽ tìm kiếm các tệp tin có phần mở rộng này trước khi
+            trả về
+            lỗi.</li>
+    </ul>
+    <a href="https://webpack.js.org/configuration/resolve/">Tham khảo thêm ở đây</a>
+
+
+    <h3>2.1.7 Chế độ (mode) trong Webpack</h3>
+    <ul>
+        <li>Việc thiết lập kịch bản môi trường nhằm tăng thời gian deploy và giảm thời lượng chờ không cần thiết. Chế độ
+            này
+            được
+            Webpack giới thiệu trong phiên bản</li>
+        <li>Có 2 tùy chọn chính:</li>
+        <ul>
+            <li>development</li>
+            <li>production</li>
+        </ul>
+    </ul>
+
+    <p>Sử dụng đoạn mã code bên dưới vào file <b>webpack.config.js</b></p>
+    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
+        <code>
+        module.exports = {
+            mode: 'development'
+        }
+        </code>
+    </pre>
+    <b>Ghi chú:</b>
+    <ul>
+        <li>Chế độ development thực hiện một số ưu tiên riêng:</li>
+        <ul>
+            <li>Build nhanh</li>
+            <li>Ít tối ưu hoá code, nén code hơn.</li>
+            <li>Không xoá bỏ các comment trong code.</li>
+            <li>Cung cấp thêm thông tin lỗi và gợi ý</li>
+            <li>Cung cấp thêm khả năng debug tốt hơn.</li>
+        </ul>
+        <li>Chế độ production chậm hơn, tuy nhiên lại tối ưu tốt hơn kết quả đầu ra</li>
+    </ul>
+    <h3>2.1.7 Watch mode trong webpack.config.js</h3>
+    <ul>
+        <li>Thêm đoạn mã bên dưới:</li>
+    </ul>
+    <pre style="background-color: #f6f8fa;border: 1px solid #e5e5e5;line-height: 28px;border-radius: 3px;">
+        <code>
+        module.exports = {
+            watch: true // Thêm mới dòng này
+        }
+        </code>
+    </pre>
+    <ul>
+        <li>Sau đó chạy lệnh:</li>
+    </ul>
+    <blockquote style="display: block;overflow: auto;padding: 10px;background-color: #f8f8f8;border-left: 3px solid
+            #5488c7;margin: 0 0 1rem;">
+        <p style="margin: 0;
+            color: #818181;
+            font-style: italic;">npm run dev</p>
+    </blockquote>
+    <ul>
+        <li>Khi chúng ta thêm option này vào file config thì khi chạy câu lệnh <b>npm run dev</b> webpack sẽ luôn theo
+            dõi
+            các file,
+            bất cứ
+            thay đổi code nào sau khi ấn save sẽ được tự động build lại.</li>
+    </ul>
+</div>

demo-thoitrang-2/index.html

@@ -0,0 +1,504 @@
+<!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="stylesheet" href="./assets/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+
+</head>
+
+<body>
+    <div class="global-header">
+        <div class="container">
+            <div class="content-main-header d-flex align-items">
+                <a href="/" class="logo">
+                    <img src="./assets/images/logo.png" width="100%" height="100%" alt="logo">
+                </a>
+                <div class="header-mid d-flex align-items">
+                    <a href="/san-pham" class="item">Sản phẩm</a>
+                    <a href="/bo-suu-tap" class="item">Bộ sưu tập</a>
+                    <a href="" class="item">FASHION SHOW</a>
+                    <a href="/gioi-thieu" class="item">Giới thiệu</a>
+                    <a href="/cua-hang" class="item">Cửa hàng</a>
+                </div>
+                <div class="header-right d-flex align-items">
+                    <div class="form__input">
+                        <form method="get" action="/tim" enctype="multipart/form-data"
+                            class="clearfix search-form bg-white">
+                            <div class="searh-form-container">
+                                <input type="text" id="js-global-seach" class="text_search" name="q"
+                                    placeholder="Tìm kiếm" autocomplete="off">
+                                <button type="submit" class="submit-search">
+                                    <i class="icon_2023 search"></i>
+                                </button>
+                            </div>
+                        </form>
+                        <div class="autocomplete-suggestions" id="js-seach-holder"></div>
+                    </div>
+                    <a href="/taikhoan" class="item">
+                        <i class="icon_2023 account"></i>
+                    </a>
+                    <a href="/cart" class="item d-flex align-items">
+                        <div class="box-cart">
+                            <i class="icon_2023 cart"></i>
+                            <div class="icon-counter">1</div>
+                        </div>
+                        <div class="txt d-flex align-items">
+                            Giỏ hàng
+                            <span class="js-cart-counter cart-count">(2)</span>
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="homepage">
+        <div class="container">
+            <div class="banner">
+                <div class="main-banner owl-carousel custom-nav owl-theme owl-loaded owl-drag" id="js-slider-home">
+                    <a href="" class="item">
+                        <img src="./assets/images/banner.png" alt="">
+                    </a>
+                </div>
+            </div>
+            <div class="product-flash-sale">
+                <div class="title d-flex align-items space-between">
+                    <div class="left d-flex align-items">
+                        <h2>Giá sốc hôm nay</h2>
+                        <div class="product-time-holder js-item-deal-time">
+                            <div class="item-time"><b> 09 </b></div>
+                            <div class="item-time"><b> 51 </b></div>
+                            <div class="item-time"><b> 54 </b></div>
+                        </div>
+                    </div>
+                    <a href="/deal" class="more-all">
+                        Xem thêm <i class="fa fa-angle-right"></i>
+                    </a>
+                </div>
+                <div class="product-list d-flex" id="js-slider-deal">
+                    <div class="product-item-deal">
+                        <a href="" class="image-product">
+                            <img src="./assets/images/product-deal.png" alt="">
+                            <div class="saleoff">- 35%</div>
+                        </a>
+                        <div class="info-product d-flex">
+                            <div class="content-info">
+                                <a href="" class="product-title">
+                                    Cream Cropped Woven Vest (Áo vest)
+                                </a>
+                                <div class="product-price-main d-flex align-items">
+                                    <b class="price">
+                                        37.490.000 đ
+                                    </b>
+                                    <del class="old-price">38.490.000 đ</del>
+                                </div>
+                            </div>
+                            <a href="javascript" class="buy-cart">
+                                <i class="icon_2023 cart"></i>
+                            </a>
+                        </div>
+                        <div class="deal-count">
+                            <b>Đã bán 28</b>
+                            <span class="count-bg" style="width: 80%"></span>
+                        </div>
+                    </div>
+                    <div class="product-item-deal">
+                        <a href="" class="image-product">
+                            <img src="./assets/images/product-deal.png" alt="">
+                            <div class="saleoff">- 35%</div>
+                        </a>
+                        <div class="info-product d-flex">
+                            <div class="content-info">
+                                <a href="" class="product-title">
+                                    Cream Cropped Woven Vest (Áo vest)
+                                </a>
+                                <div class="product-price-main d-flex align-items">
+                                    <b class="price">
+                                        37.490.000 đ
+                                    </b>
+                                    <del class="old-price">38.490.000 đ</del>
+                                </div>
+                            </div>
+                            <a href="javascript" class="buy-cart">
+                                <i class="icon_2023 cart"></i>
+                            </a>
+                        </div>
+                        <div class="deal-count">
+                            <b>Đã bán 28</b>
+                            <span class="count-bg" style="width: 80%"></span>
+                        </div>
+                    </div>
+                    <div class="product-item-deal">
+                        <a href="" class="image-product">
+                            <img src="./assets/images/product-deal.png" alt="">
+                            <div class="saleoff">- 35%</div>
+                        </a>
+                        <div class="info-product d-flex">
+                            <div class="content-info">
+                                <a href="" class="product-title">
+                                    Cream Cropped Woven Vest (Áo vest)
+                                </a>
+                                <div class="product-price-main d-flex align-items">
+                                    <b class="price">
+                                        37.490.000 đ
+                                    </b>
+                                    <del class="old-price">38.490.000 đ</del>
+                                </div>
+                            </div>
+                            <a href="javascript" class="buy-cart">
+                                <i class="icon_2023 cart"></i>
+                            </a>
+                        </div>
+                        <div class="deal-count">
+                            <b>Đã bán 28</b>
+                            <span class="count-bg" style="width: 80%"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="banner-sale-home d-flex align-items">
+                <a href="" class="item"><img src="./assets/images/banner-sale-1.png" alt=""></a>
+                <a href="" class="item"><img src="./assets/images/banner-sale-2.png" alt=""></a>
+            </div>
+            <div class="product-new">
+                <div class="title text-center">
+                    <h2>NEW ARRIVAL</h2>
+                    <p>Các sản phẩm bắt nhịp quốc tế, nàng thời thượng không nên bỏ lỡ</p>
+                    <a href="">Xem thêm <i class="fa fa-angle-right"></i></a>
+                </div>
+                <div class="product-list d-flex flex-wrap">
+                    <div class="product-item">
+                        <a href="" class="image-product">
+                            <img src="./assets/images/product-deal.png" alt="">
+                        </a>
+                        <div class="box-sale new">NEW</div>
+                        <div class="info-product d-flex">
+                            <div class="content-info">
+                                <a href="" class="product-title">
+                                    Cream Cropped Woven Vest (Áo vest)
+                                </a>
+                                <div class="product-price-main d-flex align-items">
+                                    <b class="price">
+                                        37.490.000 đ
+                                    </b>
+                                    <del class="old-price">38.490.000 đ</del>
+                                </div>
+                            </div>
+                            <a href="javascript" class="buy-cart">
+                                <i class="icon_2023 cart"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="product-item">
+                        <a href="" class="image-product">
+                            <img src="./assets/images/product-deal.png" alt="">
+                        </a>
+                        <div class="box-sale new">NEW</div>
+                        <div class="info-product d-flex">
+                            <div class="content-info">
+                                <a href="" class="product-title">
+                                    Cream Cropped Woven Vest (Áo vest)
+                                </a>
+                                <div class="product-price-main d-flex align-items">
+                                    <b class="price">
+                                        37.490.000 đ
+                                    </b>
+                                    <del class="old-price">38.490.000 đ</del>
+                                </div>
+                            </div>
+                            <a href="javascript" class="buy-cart">
+                                <i class="icon_2023 cart"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="product-item">
+                        <a href="" class="image-product">
+                            <img src="./assets/images/product-deal.png" alt="">
+                        </a>
+                        <div class="box-sale new">NEW</div>
+                        <div class="info-product d-flex">
+                            <div class="content-info">
+                                <a href="" class="product-title">
+                                    Cream Cropped Woven Vest (Áo vest)
+                                </a>
+                                <div class="product-price-main d-flex align-items">
+                                    <b class="price">
+                                        37.490.000 đ
+                                    </b>
+                                    <del class="old-price">38.490.000 đ</del>
+                                </div>
+                            </div>
+                            <a href="javascript" class="buy-cart">
+                                <i class="icon_2023 cart"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="product-item">
+                        <a href="" class="image-product">
+                            <img src="./assets/images/product-deal.png" alt="">
+                        </a>
+                        <div class="box-sale new">NEW</div>
+                        <div class="info-product d-flex">
+                            <div class="content-info">
+                                <a href="" class="product-title">
+                                    Cream Cropped Woven Vest (Áo vest)
+                                </a>
+                                <div class="product-price-main d-flex align-items">
+                                    <b class="price">
+                                        37.490.000 đ
+                                    </b>
+                                    <del class="old-price">38.490.000 đ</del>
+                                </div>
+                            </div>
+                            <a href="javascript" class="buy-cart">
+                                <i class="icon_2023 cart"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="list-product-collection d-flex">
+                <a href="" class="item"><img src="./assets/images/banner-bst-1.png" alt=""></a>
+                <a href="" class="item"><img src="./assets/images/banner-bst-2.png" alt=""></a>
+                <a href="" class="item"><img src="./assets/images/banner-bst-3.png" alt=""></a>
+                <a href="" class="item"><img src="./assets/images/banner-bst-4.png" alt=""></a>
+            </div>
+            <div class="product-saleoff">
+                <div class="title text-center">
+                    <h2>Gợi ý dành riêng cho bạn</h2>
+                    <a href="">Xem thêm <i class="fa fa-angle-right"></i></a>
+                </div>
+                <div class="product-list d-flex flex-wrap">
+                    <div class="product-item">
+                        <a href="" class="image-product">
+                            <img src="./assets/images/product-deal.png" alt="">
+
+                        </a>
+                        <div class="box-sale saleoff">- 17%</div>
+                        <div class="info-product d-flex">
+                            <div class="content-info">
+                                <a href="" class="product-title">
+                                    Cream Cropped Woven Vest (Áo vest)
+                                </a>
+                                <div class="product-price-main d-flex align-items">
+                                    <b class="price">
+                                        37.490.000 đ
+                                    </b>
+                                    <del class="old-price">38.490.000 đ</del>
+                                </div>
+                            </div>
+                            <a href="javascript" class="buy-cart">
+                                <i class="icon_2023 cart"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="product-item">
+                        <a href="" class="image-product">
+                            <img src="./assets/images/product-deal.png" alt="">
+
+                        </a>
+                        <div class="box-sale saleoff">- 17%</div>
+                        <div class="info-product d-flex">
+                            <div class="content-info">
+                                <a href="" class="product-title">
+                                    Cream Cropped Woven Vest (Áo vest)
+                                </a>
+                                <div class="product-price-main d-flex align-items">
+                                    <b class="price">
+                                        37.490.000 đ
+                                    </b>
+                                    <del class="old-price">38.490.000 đ</del>
+                                </div>
+                            </div>
+                            <a href="javascript" class="buy-cart">
+                                <i class="icon_2023 cart"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="product-item">
+                        <a href="" class="image-product">
+                            <img src="./assets/images/product-deal.png" alt="">
+
+                        </a>
+                        <div class="box-sale saleoff">- 17%</div>
+                        <div class="info-product d-flex">
+                            <div class="content-info">
+                                <a href="" class="product-title">
+                                    Cream Cropped Woven Vest (Áo vest)
+                                </a>
+                                <div class="product-price-main d-flex align-items">
+                                    <b class="price">
+                                        37.490.000 đ
+                                    </b>
+                                    <del class="old-price">38.490.000 đ</del>
+                                </div>
+                            </div>
+                            <a href="javascript" class="buy-cart">
+                                <i class="icon_2023 cart"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="feedback-customer">
+                <div class="title text-center">
+                    <h2>Khách hàng nói về chúng tôi</h2>
+                    <a href="#">Xem thêm <i class="fa fa-angle-right"></i></a>
+                </div>
+                <div class="list-feedback d-flex">
+                    <div class="item-review">
+                        <img src="./assets/images/feeback-user-1.png" alt="">
+                        <i class="icon_star star5"></i>
+                        <p class="txt line-clamp-3">Lorem ipsum is placeholder text commonly used in the graphic, print,
+                            and
+                            publishing industries for previewing layouts
+                            and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print ...
+                        </p>
+                        <div class="info d-flex align-items">
+                            <img src="./assets/images/avatar.png" alt="">
+                            <b>Nguyễn Hồng Nhung</b>
+                            <span>0386 100 ***</span>
+                        </div>
+                    </div>
+                    <div class="item-review">
+                        <img src="./assets/images/feeback-user-2.png" alt="">
+                        <i class="icon_star star5"></i>
+                        <p class="txt line-clamp-3">Lorem ipsum is placeholder text commonly used in the graphic, print,
+                            and
+                            publishing industries for previewing layouts
+                            and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print ...
+                        </p>
+                        <div class="info d-flex align-items">
+                            <img src="./assets/images/avatar.png" alt="">
+                            <b>Nguyễn Hồng Nhung</b>
+                            <span>0386 100 ***</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="global-footer">
+        <div class="container">
+            <div class="box-contact d-flex">
+                <div class="left">
+                    <div class="box-form-email d-flex align-items">
+                        <div class="title">Đăng ký nhận bản tin</div>
+                        <div class="content-form">
+                            <input type="text" id="email-newsletter" placeholder="Email của bạn....">
+                            <a href="javascript:;" class="send-newsletter"
+                                onclick="subscribe_newsletter('#email-newsletter')">
+                                <i class="icon_2023 send-form"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="right">
+                    <div class="box-media d-flex align-items">
+                        <div class="title">Kết nối ngay</div>
+                        <div class="list-social d-flex align-items">
+                            <a href="" class="item">
+                                <i class="fa fa-facebook-f"></i>
+                            </a>
+                            <a href="" class="item">
+                                <i class="fa fa-google"></i>
+                            </a>
+                            <a href="" class="item">
+                                <i class="fa fa-youtube-play"></i>
+                            </a>
+                            <a href="" class="item">
+                                <i class="fa fa-google"></i>
+                            </a>
+                            <a href="" class="item">
+                                <i class="fa fa-instagram"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="content-footer-top d-flex">
+                <div class="item">
+                    <div style="margin-bottom: 40px;">
+                        <p>GỌI MUA HÀNG ONLINE (08: 00 - 21: 00 mỗi ngày)</p>
+                        <a href="tel: 1800 1162" class="phone">1800 1162</a>
+                        <p>Tất cả các ngày trong tuần (Trừ tết Âm Lịch)</p>
+                    </div>
+                    <div>
+                        <p>GỢI Ý & KHIẾU NẠI (08:30 - 20:30)</p>
+                        <a href="tel: 1800 1162" class="phone">1800 1162</a>
+                        <p>Tất cả các ngày trong tuần (Trừ tết Âm Lịch)</p>
+                    </div>
+                </div>
+                <div class="item">
+                    <p>HỆ THỐNG SHOWROOM</p>
+                    <a href="">
+                        <img src="./assets/images/shorrom-footer.png" alt="showroom">
+                    </a>
+                    <a href="" class="link-showrrom">Xem địa chỉ hệ thống 67 showroom <i
+                            class="fa fa-angle-right"></i></a>
+                </div>
+                <div class="item">
+                    <p>FANPAGE CỦA CHÚNG TÔI</p>
+                    <a href="">
+                        <img src="./assets/images/fanpage-footer.png" alt="fanpage">
+                    </a>
+                </div>
+            </div>
+            <div class="content-footer-main d-flex">
+                <div class="item">
+                    <div class="show-footer">
+                        <div class="title d-flex align-items">
+                            <p>HỖ TRỢ KHÁCH HÀNG</p>
+                            <i class="fa fa-angle-down"></i>
+                        </div>
+                        <div class="content">
+                            <a href="">test</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="item">
+                    <div class="show-footer">
+                        <div class="title d-flex align-items">
+                            <p>VỀ THỜI TRANG</p>
+                            <i class="fa fa-angle-down"></i>
+                        </div>
+                        <div class="content">
+                            <a href="/gioi-thieu">Giới thiệu</a>
+                            <a href="/lien-he">Liên hệ</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="item">
+                    <div class="show-footer">
+                        <div class="title d-flex align-items">
+                            <p>FASHION SHOW</p>
+                            <i class="fa fa-angle-down"></i>
+                        </div>
+                        <div class="content">
+                            <a href="">test</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="content-footer-bottom d-flex align-items space-between">
+                <a href="">
+                    <img src="./assets/images/pay.png" alt="pay">
+                </a>
+                <p>©2023 Sixdo.vn</p>
+                <a href="">
+                    <img src="./assets/images/bct.png" alt="btc">
+                </a>
+            </div>
+        </div>
+    </div>
+</body>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="./assets/js/main.js"></script>
+
+</html>

demo-thoitrang-2/product-detail.html

@@ -0,0 +1,280 @@
+<!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="stylesheet" href="./assets/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
+
+</head>
+
+<body>
+    <div class="product-detail">
+        <div class="global-breadcrumb">
+            <div class="container">
+                <div id="breadcrumb" class="breadcrumb">
+                    <ol itemscope="" itemtype="http://schema.org/BreadcrumbList">
+                        <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="home">
+                            <a href="/" itemprop="item" class="nopad-l">
+                                <span itemprop="name">Trang chủ</span>
+                                <i>/</i>
+                            </a>
+                            <meta itemprop="position" content="1">
+                        </li>
+                        <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
+                            <a href="/linh-kien-may-tinh/" itemprop="item">
+                                <span itemprop="name">
+                                    Linh Kiện Máy Tính
+                                </span> <span class="last-bre"> </span>
+                            </a>
+                            <meta itemprop="position" content="2">
+                        </li>
+                    </ol>
+                    <div class="name">Beige Midi Woven Dress</div>
+                </div>
+                <div class="clearfix"></div>
+            </div>
+        </div>
+        <div class="container">
+            <div class="main-product-detail d-flex">
+                <div class="product-image-detail">
+                    <div id="sync1" class="owl-theme owl-carousel custom-nav owl-loaded owl-drag">
+                        <a class="item" href="./assets/images/image-big-detail-1.png" data-fancybox="gallery">
+                            <img src="./assets/images/image-big-detail-1.png" alt="">
+                        </a>
+                        <a class="item">
+                            <img src="./assets/images/image-big-detail-2.png" alt="">
+                        </a>
+                        <a class="item">
+                            <img src="./assets/images/image-big-detail-3.jpg" alt="">
+                        </a>
+                        <a class="item">
+                            <img src="./assets/images/image-big-detail-4.jpg" alt="">
+                        </a>
+                        <a class="item">
+                            <img src="./assets/images/image-big-detail-5.jpg" alt="">
+                        </a>
+                        <a class="item">
+                            <img src="./assets/images/image-big-detail-6.jpg" alt="">
+                        </a>
+                    </div>
+                    <div id="sync2" class="owl-theme owl-carousel custom-nav owl-loaded owl-drag">
+                        <a href="./assets/images/image-big-detail-1.png" class="item">
+                            <img src="./assets/images/image-small-detail-1.png" alt="">
+                        </a>
+                        <a href="./assets/images/image-big-detail-2.png" class="item">
+                            <img src="./assets/images/image-small-detail-2.png" alt="">
+                        </a>
+                        <a href="./assets/images/image-big-detail-3.jpg" class="item">
+                            <img src="./assets/images/image-small-detail-3.png" alt="">
+                        </a>
+                    </div>
+                </div>
+                <div class="product-info-detail">
+                    <h1 class="name">Beige Midi Woven Dress</h1>
+                    <div class="d-flex align-items">
+                        <div class="sku">MSP: 68220804001DI0210</div>
+                        <div class="total-review d-flex align-items">
+                            <i class="icon_star star5"></i>
+                            <span>(1)</span>
+                        </div>
+                    </div>
+                    <div class="main-price d-flex align-items">
+                        <b class="price">1.148.000đ</b>
+                        <del class="old-price">2.296.000đ</del>
+                    </div>
+                    <a href="javascript:void()" class="click-size">
+                        <i class="icon_2023 size"></i>
+                        <span>Hướng dẫn kích thước</span>
+                    </a>
+                    <div class="product-btn-cart">
+                        <div class="btn-buy">
+                            <a href="javascript:void(0)" class="buy-go-cart btn-buyNow js-buyNow" data-id="7882"
+                                data-name="">
+                                Mua ngay
+                            </a>
+                        </div>
+                        <div class="btn-buy showrrom">
+                            <a href="javascript:void(0)" class="showrrom">
+                                <i class="icon_2023 map"></i>
+                                <span>TÌM SẢN PHẨM TẠI SHOWROOM</span>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="note-detail">
+                        <div>
+                            <p>MIỄN PHÍ GIAO HÀNG TOÀN QUỐC</p>
+                            <span>(Cho hóa đơn từ 300.000đ)</span>
+                        </div>
+                        <div>
+                            <p>ĐỔI TRẢ DỄ DÀNG</p>
+                            <span>(Đổi trả trong 7 ngày với lỗi do nhà sản xuất)</span>
+                        </div>
+                        <div>
+                            <p>TỔNG ĐÀI BÁN HÀNG 1800 1162</p>
+                            <span>(Miễn phí từ 8h00 - 21:00 mỗi ngày)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="content-product-detail">
+                <div class="list-tab d-flex align-items" id="title_tab_scroll_pro">
+                    <a href="#tabdesc" class="item-tab active">chi tiết sản phẩm</a>
+                    <a href="#tabinfo" class="item-tab">HƯỚNG DẪN BẢO QUẢN</a>
+                    <a href="#tabreview" class="item-tab">REVIEW</a>
+                </div>
+                <div class="content-tab nd active" id="tabdesc">
+                    <p>- Áo sọc sát nách cổ lọ thiết kế tối giản, trẻ trung</p>
+                    <p>- Trang phục phù hợp dạo phố, đi chơi, đi học....</p>
+                    <p>- Kích thước áo: S - M - L</p>
+                    <p>- Chiều dài: </p>
+                    <p>S: 51 cm - M: 52 cm - L: 53 cm</p>
+                    <p><strong>Hướng dẫn sử dụng</strong><br /> - Giặt tay bằng nước lạnh</p>
+                    <p>- Không ngâm, không tẩy </p>
+                    <p>- Giặt riêng các sản phẩm khác màu</p>
+                    <p>- Không vắt</p>
+                    <p>- Là ủi ở nhiệt độ thấp.</p>
+                    <p>- Khuyến kích giặt khô</p>
+                </div>
+            </div>
+            <div class="product-related">
+                <div class="title">Sản phẩm liên quan</div>
+                <div class="box-related d-flex">
+                    <div class="left">
+                        <img src="./assets/images/image-big-detail-1.png" alt="product" class="image-product-related">
+                    </div>
+                    <div class="right">
+                        <div class="product-list d-flex">
+                            <div class="product-item">
+                                <a href="" class="image-product">
+                                    <img src="./assets/images/product-deal.png" alt="">
+
+                                </a>
+                                <div class="box-sale saleoff">- 17%</div>
+                                <a href="" class="product-title">
+                                    Cream Cropped Woven Vest (Áo vest)
+                                </a>
+                                <div class="info-product d-flex align-items">
+                                    <div class="product-price-main d-flex align-items">
+                                        <b class="price">
+                                            37.490.000 đ
+                                        </b>
+                                        <del class="old-price">38.490.000 đ</del>
+                                    </div>
+                                    <a href="javascript" class="buy-cart">
+                                        <i class="icon_2023 cart"></i>
+                                    </a>
+                                </div>
+                            </div>
+                            <div class="product-item">
+                                <a href="" class="image-product">
+                                    <img src="./assets/images/product-deal.png" alt="">
+
+                                </a>
+                                <div class="box-sale saleoff">- 17%</div>
+                                <a href="" class="product-title">
+                                    Cream Cropped Woven Vest (Áo vest)
+                                </a>
+                                <div class="info-product d-flex align-items">
+                                    <div class="product-price-main d-flex align-items">
+                                        <b class="price">
+                                            37.490.000 đ
+                                        </b>
+                                        <del class="old-price">38.490.000 đ</del>
+                                    </div>
+                                    <a href="javascript" class="buy-cart">
+                                        <i class="icon_2023 cart"></i>
+                                    </a>
+                                </div>
+                            </div>
+                            <div class="product-item">
+                                <a href="" class="image-product">
+                                    <img src="./assets/images/product-deal.png" alt="">
+
+                                </a>
+                                <div class="box-sale saleoff">- 17%</div>
+                                <a href="" class="product-title">
+                                    Cream Cropped Woven Vest (Áo vest)
+                                </a>
+                                <div class="info-product d-flex align-items">
+                                    <div class="product-price-main d-flex align-items">
+                                        <b class="price">
+                                            37.490.000 đ
+                                        </b>
+                                        <del class="old-price">38.490.000 đ</del>
+                                    </div>
+                                    <a href="javascript" class="buy-cart">
+                                        <i class="icon_2023 cart"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="box-list-size">
+            <div class="title text-center">Hướng dẫn chọn kích thước</div>
+            <a href="javascript:void()" class="click-close">
+                <i class="fa fa-times"></i>
+            </a>
+            <table border="1">
+                <tr>
+                    <td><b>Thông số/ Cỡ</b></td>
+                    <td><b>S (27)</b></td>
+                    <td><b>M (28)</b></td>
+                    <td><b>L (29)</b></td>
+                    <td><b>XL (30)</b></td>
+                    <td><b>XXL (31)</b></td>
+                </tr>
+                <tr>
+                    <td><b>Chiều cao (cm)</b></td>
+                    <td>150 - 155</td>
+                    <td>155 - 163</td>
+                    <td>160 - 165</td>
+                    <td>162 - 166</td>
+                    <td>163 - 168</td>
+                </tr>
+                <tr>
+                    <td><b>Cân nặng (kg)</b></td>
+                    <td>41 - 46</td>
+                    <td>47 - 52</td>
+                    <td>53 - 58</td>
+                    <td>59 - 64</td>
+                    <td>65 - 69</td>
+                </tr>
+                <tr>
+                    <td><b>Vòng ngực (cm)</b></td>
+                    <td>79 - 82</td>
+                    <td>82 - 87</td>
+                    <td>88 - 94</td>
+                    <td>94 - 99</td>
+                    <td>99 - 104</td>
+                </tr>
+                <tr>
+                    <td><b>Rộng mông (cm)</b></td>
+                    <td>88 - 90</td>
+                    <td>90 - 94</td>
+                    <td>94 - 98</td>
+                    <td>98 - 102</td>
+                    <td>102 - 107</td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
+<script src="./assets/js/main.js"></script>
+
+</html>