upload

2021-03-24 10:47:36 +07:00
commit 920706d3b5
74 changed files with 14206 additions and 0 deletions
--- a/images/banner-video.jpg
+++ b/images/banner-video.jpg
--- a/images/banner_under-1.jpg
+++ b/images/banner_under-1.jpg
--- a/images/banner_under-2.jpg
+++ b/images/banner_under-2.jpg
--- a/images/banner_under-3.jpg
+++ b/images/banner_under-3.jpg
--- a/images/bg-home-collection.png
+++ b/images/bg-home-collection.png
--- a/images/box-title-bg.png
+++ b/images/box-title-bg.png
--- a/images/buildpc_1616486818.xls
+++ b/images/buildpc_1616486818.xls
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="vi">
+  <head>
+    <title>Báo giá sản phẩm</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <style>
+        .list_table{border-collapse:collapse;}
+        .list_table td{border:solid 1px #e1e1e1;padding:5px;vertical-align:middle;}
+        .cart_first_tr{background-color:#cccccc;}
+        BODY, FORM, TABLE, TD, SPAN, DIV{font-family:Arial, Helvetica, sans-serif;font-size:12px;}
+        .title a{color:#0000FF;font-family:Arial, Helvetica, sans-serif;font-size:12px;text-decoration:none;}
+        .title a:hover{color:#0000FF;text-decoration:underline;}
+        table{width: 100%}
+    </style>
+</head>
+<body>
+
+    <div style="max-width: 900px;margin: 0 auto;">
+      <table>
+        <tr>
+            <td colspan="3" valign="top" style="    padding-left: 20px;">
+                <img src="/static/assets/default/images/logo_static.png?1" alt="" />
+            </td>
+            <td colspan="5" align="right" style="line-height: 19px;">
+                <b>Công ty PC Xanh</b> <br>
+                Showroom: Tầng 2, Toà Viettel Port, Cầu Diễn, Bắc Từ Liêm, Hà Nội<br>
+            </td>
+        </tr>
+        <tr><td colspan="8"></td></tr>
+        <tr>
+            <td colspan="8" style="border-top: 4px double #ccc;;font-size:21px; font-weight:bold; text-align:center; padding:15px 0;">BẢNG BÁO GIÁ THIẾT BỊ</td>
+        </tr>
+      </table>  
+      
+      <div style="padding: 10px;"></div>
+
+        <table class="list_table" width="100%">
+            <tr style="color: #ffffff; background-color:#f58634; text-align: center;">
+                <td> <strong>STT </strong></td>
+                <td> <strong>Mã sản phẩm</strong></td>
+
+                <td width="300" colspan="2"> <strong>Tên sản phẩm </strong></td>
+                <td> <strong>Bảo hành </strong></td>
+                <td> <strong>Số lượng </strong></td>
+                <td> <strong>Đơn giá </strong></td>
+                <td>Thành tiền</td>
+            </tr>
+
+             
+            
+            
+
+             
+            
+            
+            <tr valign="middle">
+                <td>1</td>
+                <td>Glee - 01</td>
+                <td colspan="2"> <b><a href="http://pcxanh8.hurasoft.com/hurasoft-khong-xoa-san-pham-test">[Hurasoft - Không xoá] Sản phẩm test</a></b> </td>
+                <td align="center"> 2 năm  </td>
+                <td align="center"> 2   </td>
+                <td align="center"> 
+                     15.000.000  VNĐ  
+                </td>
+                <td align="right">  
+                     30.000.000   VNĐ 
+                </td>
+            </tr>
+            
+
+            <tr>
+                <td colspan="6" align="right" style="background:#b8cce4;padding: 15px">Thanh toán</td>
+                <td colspan="2" align="right" style="background:#b8cce4;padding: 15px">
+                    <b>  30.000.000  VNĐ</b>
+                </td>
+            </tr>
+        </table>
+
+      <table><tr><td colspan="8"> </td></tr></table>
+
+
+    </div>
+  </body>
+</html>
--- a/images/feo.png
+++ b/images/feo.png
--- a/images/icon-bct-2021.png
+++ b/images/icon-bct-2021.png
--- a/images/icon-hot.png
+++ b/images/icon-hot.png
--- a/images/icon-new.png
+++ b/images/icon-new.png
--- a/images/icon/001-fan.png
+++ b/images/icon/001-fan.png
--- a/images/icon/003-router.png
+++ b/images/icon/003-router.png
--- a/images/icon/017-ssd.png
+++ b/images/icon/017-ssd.png
--- a/images/icon/018-laptop.png
+++ b/images/icon/018-laptop.png
--- a/images/icon/021-printer.png
+++ b/images/icon/021-printer.png
--- a/images/icon/022-webcam.png
+++ b/images/icon/022-webcam.png
--- a/images/icon/023-mouse.png
+++ b/images/icon/023-mouse.png
--- a/images/icon/024-computer.png
+++ b/images/icon/024-computer.png
--- a/images/icon/026-monitor.png
+++ b/images/icon/026-monitor.png
--- a/images/icon/043-cpu.png
+++ b/images/icon/043-cpu.png
--- a/folder/001-fan.png
+++ b/folder/001-fan.png
--- a/folder/003-router.png
+++ b/folder/003-router.png
--- a/folder/017-ssd.png
+++ b/folder/017-ssd.png
--- a/folder/018-laptop.png
+++ b/folder/018-laptop.png
--- a/folder/021-printer.png
+++ b/folder/021-printer.png
--- a/folder/022-webcam.png
+++ b/folder/022-webcam.png
--- a/folder/023-mouse.png
+++ b/folder/023-mouse.png
--- a/folder/024-computer.png
+++ b/folder/024-computer.png
--- a/folder/026-monitor.png
+++ b/folder/026-monitor.png
--- a/folder/043-cpu.png
+++ b/folder/043-cpu.png
--- a/folder/icon_game.png
+++ b/folder/icon_game.png
--- a/folder/icon_giangday.png
+++ b/folder/icon_giangday.png
--- a/folder/icon_sieuthi.png
+++ b/folder/icon_sieuthi.png
--- a/folder/tinified.zip
+++ b/folder/tinified.zip
--- a/images/icon/icon_game.png
+++ b/images/icon/icon_game.png
--- a/images/icon/icon_giangday.png
+++ b/images/icon/icon_giangday.png
--- a/images/icon/icon_sieuthi.png
+++ b/images/icon/icon_sieuthi.png
--- a/images/icon_zalo.png
+++ b/images/icon_zalo.png
--- a/images/logo_pc_xanh.png
+++ b/images/logo_pc_xanh.png
--- a/images/pc_xanh_splice.png
+++ b/images/pc_xanh_splice.png
--- a/images/product-1.jpg
+++ b/images/product-1.jpg
--- a/images/product-2.jpg
+++ b/images/product-2.jpg
--- a/images/product-3.jpg
+++ b/images/product-3.jpg
--- a/images/product-4.jpg
+++ b/images/product-4.jpg
--- a/images/product-5.jpg
+++ b/images/product-5.jpg
--- a/images/product-6.jpg
+++ b/images/product-6.jpg
--- a/images/sale-off.png
+++ b/images/sale-off.png
--- a/images/slider.jpg
+++ b/images/slider.jpg
--- a/images/star.png
+++ b/images/star.png
--- a/images/star_sprite.png
+++ b/images/star_sprite.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,719 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title> Local </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">   
+
+    <!-- gland -->
+    <link rel="stylesheet" href="http://pcxanh8.hurasoft.com/static/assets/default/script/libs.css">
+    <link rel="stylesheet" href="http://pcxanh8.hurasoft.com/static/assets/default/script/pc_xanh.css">
+    <!-- End gland -->
+
+    <!-- <link rel="stylesheet" media="screen" href="scss/lib.css" /> -->
+    <link rel="stylesheet" media="screen" href="scss/pc_xanh.css" />   
+    
+</head>
+<body> 
+
+<header>
+    <div class="header-top-container">
+        <div class="top-item font-300 text-13 container clearfix">
+            <div class="item">
+                <a href="javascript:void(0)"> <i class="fa fa-map-marker"></i> Hệ thống showroom </a>
+
+                <div class="sub-item text-14 font-500">
+                    <p class="text-20 font-600 mb-2">Showroom</p>
+                    <hr>
+                    <p>
+                        <i class="fa fa-map-marker"></i> Địa chỉ: Tầng 2, Toà Viettel Port, Cầu Diễn, Bắc Từ Liêm, Hà Nội
+                        <a href="https://goo.gl/maps/WzaMWn2qK4Cv31jw6" rel="nofollow" target="_blank" style="color: #f58634;">[Xem đường đi]</a>
+                    </p>
+                        
+                </div>
+            </div>
+
+            <div class="item">
+                <a href="javascript:void(0)" class="orange-linear"> <i class="fa fa-phone"></i> Bán hàng trực tuyến </a>
+
+                <div class="sub-item header-banhang">
+                    <table width="100%">
+                        <tbody>
+                            <tr>
+                                <td class="text-center">
+                                    <div class="online-title"> HỖ TRỢ TẠI HÀ NỘI/TOÀN QUỐC</div>
+                                </td>
+                            </tr>
+
+                            <tr>
+                                <td valign="top" width="380">
+                                    <div class="online-content">
+                                        <b>Bán hàng online</b>  
+
+                                        <p>
+                                            <img data-src="images/icon_zalo.png" class="lazy" width="15px"> 
+                                            Mr A<span class="bg icon_tel_support">&nbsp;</span> 000.000.000
+                                        </p>
+
+                                        <p>
+                                            <img data-src="{{ 'icon_zalo.png' | asset_url }}" class="lazy" width="15px"> 
+                                            Mr A<span class="bg icon_tel_support">&nbsp;</span> 000.000.000
+                                        </p>
+                                    </div>
+                                </td>
+                            </tr>
+
+                            <tr>
+                                <td valign="top" width="380">
+                                    <div class="online-content">
+                                        <b>Kỹ thuật - Bảo hành</b>  
+                                        <p>
+                                            <img data-src="{{ 'icon_zalo.png' | asset_url }}" class="lazy" width="15px"> 
+                                            Mr A  <span class="bg icon_tel_support">&nbsp;</span> 000.000.000
+                                        </p>
+                                        
+                                        <p>
+                                            <img data-src="{{ 'icon_zalo.png' | asset_url }}" class="lazy" width="15px"> 
+                                            Mr A  <span class="bg icon_tel_support">&nbsp;</span> 000.000.000
+                                        </p>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <div class="item">
+                <a href=""> <i class="fa fa-wrench"></i> Yêu cầu kỹ thuật </a>
+            </div>
+
+            <div class="item">
+                <a href=""> <i class="fa fa-book"></i> Chính sách - hướng dẫn </a>
+            </div>
+
+            <div class="item">
+                <a href="/tin-tuc"> <i class="fa fa-newspaper-o"></i> Tin hay mỗi ngày </a>
+            </div>
+        </div>
+
+        <div class="container">
+            <div class="header-middle-container">
+                <div class="header-logo text-center">
+                    <a href="/"> <img src="images/logo_pc_xanh.png" alt="Pc Xanh" /> </a>
+                </div>
+    
+                <div class="header-search">
+                    <form method="get" action="/tim" name="search" class="d-flex align-items-center flex-wrap bg-white position-relative">
+                        <div class="search-select-container">
+                            <input type="hidden" name="scat_id" id="js-scat-id" value="1">
+                            <select id="js-select-cat">
+                                <option data-id="">Tất cả danh mục</option>
+                                
+                                <option data-id="1">PC GAMING INTEL test</option> 
+                                
+                                <option data-id="2">PC GAMING-ĐỒ HỌA</option> <option data-id="5">MÀN HÌNH MÁY TÍNH</option> <option data-id="9">CPU- BỘ VI XỬ LÍ</option> <option data-id="47">VGA - CARD ĐỒ HỌA</option> <option data-id="12">PC GAMING INTEL</option> <option data-id="18">PC AMD RYZEN GAMING - ĐỒ HỌA</option> <option data-id="22">BỘ M&amp;#193;Y T&amp;#205;NH CHƠI GAME</option> <option data-id="28">PC STREAM GAME &amp;amp; PC GIẢ LẬP ANDROID</option> <option data-id="31">CASE VĂN PH&amp;#210;NG &amp;amp; PC GAME NHẸ</option> <option data-id="34">MAINBOARD - Bo mạch chủ</option> <option data-id="37">CPU - Bộ vi xử l&amp;#253;</option> <option data-id="44">RAM - Bộ nhớ trong</option> <option data-id="50">Ổ CỨNG HDD - SSD</option> <option data-id="53">PH&amp;#205;M CHUỘT - GAMING GEAR</option> <option data-id="60">TẢN NHIỆT - COOLING</option> 
+                            </select>
+                        </div>
+    
+                        <input type="text" id="js-seach-input" name="q" placeholder="Nhập nội dung tìm kiếm ..." value="" autocomplete="off" class="text-search">
+                        
+                        <button type="submit" class="btn-search orange text-18"><i class="fa fa-search"></i></button>
+                    </form>
+
+                    <div class="autocomplete-suggestions js-box-result is-actie-scroll" id="js-seach-result"></div>
+                </div>
+    
+                <div class="header-middle-right text-12 font-300">
+                    <div class="item">
+                        <i class="splice icon-phone"></i>
+    
+                        <p class="text m-0">
+                            Hotline
+                            <b class="text-14 d-block orange"> 000.000.0000 </b>
+                        </p>
+                    </div>
+    
+                    <div class="item item-buildpc">
+                        <a href="/buildpc" title="Xây dựng máy tính">
+                            <i class="splice icon-buildpc"></i>
+    
+                            <span class="text"> Xây dụng <br>Cấu hình PC </span>
+                        </a>
+                    </div>
+    
+                    <div class="item">
+                        <i class="splice icon-user"></i>
+    
+                        <p class="text m-0">
+                            <a href="/dang-ky" title="Đăng ký">Đăng ký</a>
+                            <a href="/dang-nhap" title="Đăng nhập">Đăng nhập</a>
+                        </p>
+                    </div>
+    
+                    <div class="item">
+                        <a href="/cart" title="Giỏ hàng của bạn">
+                            <i class="splice icon-cart"></i>
+                            <span class="cart-count js-cart-count">0</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="header-bottom-container">
+        <div class="container clearfix">
+            <div class="header-menu-group">
+                <p class="title m-0 font-600"> <i class="fa fa-bars pr-1"></i> DANH MỤC SẢN PHẨM </p>
+
+                <div class="cat-list-group">
+                    <!-- max 14 -->
+                    <div class="item">
+                        <a href="">
+                            <span class="cat-thumb" style="background-image: url(images/icon/018-laptop.png)"></span>
+                            <span class="cat-title"> Laptop - Máy tính xách tay </span>
+                        </a>
+
+                        <div class="sub-menu-group">
+                            <div class="box-item">
+                                <a href="" class="cat-2">Danh mục cấp 2</a>
+
+                                <a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a>
+                            </div>
+
+                            <div class="box-item">
+                                <a href="" class="cat-2">Danh mục cấp 2</a>
+
+                                <a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a>
+                            </div>
+
+                            <div class="box-item">
+                                <a href="" class="cat-2">Danh mục cấp 2</a>
+
+                                <a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a>
+                            </div>
+
+                            <div class="box-item">
+                                <a href="" class="cat-2">Danh mục cấp 2</a>
+                            </div>
+
+                            <div class="box-item">
+                                <a href="" class="cat-2">Danh mục cấp 2</a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- copy -->
+                    <div class="item"> <a href=""> <span class="cat-thumb" style="background-image: url(images/icon/024-computer.png)"></span> <span class="cat-title"> Laptop - Máy tính xách tay - Laptop - Máy tính xách tay </span> </a> <div class="sub-menu-group"></div></div><div class="item"> <a href=""> <span class="cat-thumb" style="background-image: url(images/icon/024-computer.png)"></span> <span class="cat-title"> Laptop - Máy tính xách tay </span> </a> <div class="sub-menu-group"> <div class="box-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a> </div><div class="box-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a> </div><div class="box-item"> <a href="" class="cat-2">Danh mục cấp 2</a> <a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a><a href=""> Danh mục cấp 3 </a> </div><div class="box-item"> <a href="" class="cat-2">Danh mục cấp 2</a> </div><div class="box-item"> <a href="" class="cat-2">Danh mục cấp 2</a> </div></div></div><div class="item"> <a href=""> <span class="cat-thumb" style="background-image: url(images/icon/043-cpu.png)"></span> <span class="cat-title"> Laptop - Máy tính xách tay </span> </a> <div class="sub-menu-group"></div></div><div class="item"> <a href=""> <span class="cat-thumb" style="background-image: url(images/icon/026-monitor.png)"></span> <span class="cat-title"> Laptop - Máy tính xách tay </span> </a> <div class="sub-menu-group"></div></div><div class="item"> <a href=""> <span class="cat-thumb" style="background-image: url(images/icon/icon_game.png)"></span> <span class="cat-title"> Laptop - Máy tính xách tay </span> </a> <div class="sub-menu-group"></div></div><div class="item"> <a href=""> <span class="cat-thumb" style="background-image: url(images/icon/001-fan.png)"></span> <span class="cat-title"> Laptop - Máy tính xách tay </span> </a> <div class="sub-menu-group"></div></div><div class="item"> <a href=""> <span class="cat-thumb" style="background-image: url(images/icon/021-printer.png)"></span> <span class="cat-title"> Laptop - Máy tính xách tay </span> </a> <div class="sub-menu-group"></div></div><div class="item"> <a href=""> <span class="cat-thumb" style="background-image: url(images/icon/003-router.png)"></span> <span class="cat-title"> Laptop - Máy tính xách tay </span> </a> <div class="sub-menu-group"></div></div><div class="item"> <a href=""> <span class="cat-thumb" style="background-image: url(images/icon/023-mouse.png)"></span> <span class="cat-title"> Laptop - Máy tính xách tay </span> </a> <div class="sub-menu-group"></div></div><div class="item"> <a href=""> <span class="cat-thumb" style="background-image: url(images/icon/icon_sieuthi.png)"></span> <span class="cat-title"> Thiết bị siêu thị </span> </a> <div class="sub-menu-group"></div></div><div class="item"> <a href=""> <span class="cat-thumb" style="background-image: url(images/icon/icon_giangday.png)"></span> <span class="cat-title"> Laptop </span> </a> <div class="sub-menu-group"></div></div><div class="item"> <a href=""> <span class="cat-thumb" style="background-image: url(images/icon/017-ssd.png)"></span> <span class="cat-title"> Máy tính xách tay </span> </a> <div class="sub-menu-group"></div></div><div class="item"> <a href=""> <span class="cat-thumb" style="background-image: url(images/icon/022-webcam.png)"></span> <span class="cat-title">Máy tính </span> </a> <div class="sub-menu-group"></div></div>
+                </div>
+            </div>
+
+            <div class="header-bottom-right">
+                <div class="item">
+                    <i class="splice icon-1"></i>
+                    <span class="text"> 100% hàng chính hãng </span>
+                </div>
+
+                <div class="item">
+                    <i class="splice icon-2"></i>
+                    <span class="text"> Ưu đãi tốt nhất </span>
+                </div>
+
+                <div class="item">
+                    <i class="splice icon-3"></i>
+                    <span class="text"> Miễn phí vận chuyển </span>
+                </div>
+
+                <div class="item">
+                    <i class="splice icon-4"></i>
+                    <span class="text"> Bảo hành tận nhà </span>
+                </div>
+
+                <div class="item">
+                    <i class="splice icon-5"></i>
+                    <span class="text"> Thanh toán tiện lợi </span>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
+
+<!-- homepage -->
+<h1 style="position: absolute; top: -99999px"> PC Xanh </h1>
+<section class="homepage container clearfix">
+    <div class="home-banner-container clearfix">
+        <div class="home-banner-left hover-img">
+            <div class="owl-carousel owl-theme custom-dots slider-home" id="js-slider-home">
+                <div class="item">
+                    <a href=""><img data-src="images/slider.jpg" alt="" class="owl-lazy"></a>
+                </div>
+                <div class="item">
+                    <a href=""><img data-src="images/slider.jpg" alt="" class="owl-lazy"></a>
+                </div>
+            </div>
+
+            <div class="clearfix banner-under-group">
+                <a href=""><img data-src="images/banner_under-1.jpg" alt="" class="lazy"/></a>
+                <a href=""><img data-src="images/banner_under-2.jpg" alt="" class="lazy"/></a>
+                <a href=""><img data-src="images/banner_under-3.jpg" alt="" class="lazy"/></a>
+            </div>
+        </div>
+
+        <div class="home-banner-right">
+            <div class="home-top-article-group bg-white">
+                <div class="title-group d-flex align-items-center justify-content-between pr-2 text-13 font-300">
+                    <p class="title m-0 text-white font-600 bg-orange"> TIN CÔNG NGHỆ NỔI BẬT </p>
+                    <a href="/tin-tuc" class="orange"> Xem tất cả <i class="fa fa-angle-double-right"></i> </a>
+                </div>
+
+                <div class="art-holder-group hover-img">
+                    <!-- limie: 4 -->
+                    <a href="" class="art-item">
+                        <span class="art-img">
+                            <img data-src="http://via.placeholder.com/110x64" alt="" class="lazy"/>
+                        </span>
+
+                        <span class="art-text">
+                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium, nostrum quaerat itaque consequatur dolores
+                        </span>
+                    </a>
+
+                    <a href="" class="art-item"> <span class="art-img"> <img data-src="http://via.placeholder.com/110x64/f00" alt="" class="lazy"/> </span> <span class="art-text"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium, nostrum quaerat itaque consequatur dolores </span> </a><a href="" class="art-item"> <span class="art-img"> <img data-src="http://via.placeholder.com/110x64/000" alt="" class="lazy"/> </span> <span class="art-text"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium, nostrum quaerat itaque consequatur dolores </span> </a><a href="" class="art-item"> <span class="art-img"> <img data-src="http://via.placeholder.com/110x64/a00" alt="" class="lazy"/> </span> <span class="art-text"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium, nostrum quaerat itaque consequatur dolores </span> </a>
+                </div>
+            </div>
+
+            <div class="banner-video-group">
+                <div class="video-holder js-home-video" data-url="https://www.youtube.com/watch?v=V9SYIbnYNhA&ab_channel=MinhAnComputer">
+                    <img data-src="images/banner-video.jpg" alt="" class="lazy"/>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- collection sale cuc da -->
+    <div class="home-collection-container">
+        <div class="bg-title lazy" data-bg="url(images/bg-home-collection.png)"></div>
+
+        <div class="collection-product-group bg-orange" id="js-collection-product-holder">
+            <div class="bg-white owl-carousel owl-theme custom-nav">
+                
+                <div class="p-item-2021">
+                    <div class="p-img">
+                        <a href=""> <img src="images/product-1.jpg" alt="" /> </a>
+                        <span class="p-sku">MÃ SP: SP004007</span>
+                        <span class="p-type">
+                            <i class="icon-new"></i>
+                            <i class="icon-hot"></i>
+                        </span>
+
+                        <span class="p-discount-2021">-20%</span>
+                    </div>
+                
+                    <div class="p-text">
+                        <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a>
+                        
+                        <div class="p-price-group">
+                            <span class="p-price"> 22.490.000đ </span>
+                            <del class="p-old-price"> 23.900.000đ </del>
+                            <span class="p-sale-off"> (Tiết kiệm: 1.410.000đ) </span>
+                        </div>
+                
+                        <div class="p-button">
+                            <span class="green"> <i class="fa fa-check"></i> Còn hàng </span>
+                            <!-- <span> <i class="fa fa-check"></i> Liên hệ </span> -->
+
+                            <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- copy -->
+                <div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-2.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> <i class="icon-new"></i> </span> <span class="p-discount-2021">-20%</span></div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> <del class="p-old-price"> 23.900.000đ </del> <span class="p-sale-off"> (Tiết kiệm: 1.410.000đ) </span> </div><div class="p-button"> <span> <i class="fa fa-check"></i> Liên hệ </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-3.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> <i class="icon-hot"></i> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> <del class="p-old-price"> 23.900.000đ </del> <span class="p-sale-off"> (Tiết kiệm: 1.410.000đ) </span> </div><div class="p-button"> <span> <i class="fa fa-check"></i> Liên hệ </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-4.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> </div><div class="p-button"> <span class="green"> <i class="fa fa-check"></i> Còn hàng </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-5.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> <i class="icon-new"></i> <i class="icon-hot"></i> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> <del class="p-old-price"> 23.900.000đ </del> <span class="p-sale-off"> (Tiết kiệm: 1.410.000đ) </span> </div><div class="p-button"> <span class="green"> <i class="fa fa-check"></i> Còn hàng </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-2.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> </div><div class="p-button"> <span> <i class="fa fa-check"></i> Liên hệ </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-4.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> <i class="icon-new"></i> <i class="icon-hot"></i> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> </div><div class="p-button"> <span> <i class="fa fa-check"></i> Liên hệ </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div>
+
+            </div>
+        </div>
+    </div>
+
+
+    <!-- collection tab -->
+    <div class="product-box-group collection-tab-group">
+        <div class="box-title">
+            <p class="title"> GIÁ SỐC CUỐI TUẦN </p>
+
+            <div class="title-rigt-group clearfix">
+                <div class="children-lists" id="js-collection-tab">
+                    <!-- limit 3 -> 4 -->
+                    <a href="/link-1" class="active"> Nổi bật </a>
+                    <a href="/link-2"> Laptop - Máy tính xách tay </a>
+                    <a href="/link-3"> PC, WorkstationPC, Workstation </a><a href="/link-4">Linh kiện máy tính</a>                
+                </div>
+
+                <a href="/link-1" class="orange view-all" id="js-collection-url"> Xem tất cả <i class="fa fa-angle-double-right"></i> </a>
+            </div>
+        </div>
+
+        <div class="js-product-holder">
+            <div class="bg-white owl-carousel owl-theme custom-nav">
+                
+                <div class="p-item-2021">
+                    <div class="p-img">
+                        <a href=""> <img src="images/product-1.jpg" alt="" /> </a>
+                        <span class="p-sku">MÃ SP: SP004007</span>
+                        <span class="p-type">
+                            <i class="icon-new"></i>
+                            <i class="icon-hot"></i>
+                        </span>
+
+                        <span class="p-discount-2021">-20%</span>
+                    </div>
+                
+                    <div class="p-text">
+                        <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a>
+                        
+                        <div class="p-price-group">
+                            <span class="p-price"> 22.490.000đ </span>
+                            <del class="p-old-price"> 23.900.000đ </del>
+                            <span class="p-sale-off"> (Tiết kiệm: 1.410.000đ) </span>
+                        </div>
+                
+                        <div class="p-button">
+                            <span class="green"> <i class="fa fa-check"></i> Còn hàng </span>
+                            <!-- <span> <i class="fa fa-check"></i> Liên hệ </span> -->
+
+                            <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- copy -->
+                <div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-2.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> <i class="icon-new"></i> </span> <span class="p-discount-2021">-20%</span></div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> <del class="p-old-price"> 23.900.000đ </del> <span class="p-sale-off"> (Tiết kiệm: 1.410.000đ) </span> </div><div class="p-button"> <span> <i class="fa fa-check"></i> Liên hệ </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-3.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> <i class="icon-hot"></i> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> <del class="p-old-price"> 23.900.000đ </del> <span class="p-sale-off"> (Tiết kiệm: 1.410.000đ) </span> </div><div class="p-button"> <span> <i class="fa fa-check"></i> Liên hệ </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-4.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> </div><div class="p-button"> <span class="green"> <i class="fa fa-check"></i> Còn hàng </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-5.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> <i class="icon-new"></i> <i class="icon-hot"></i> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> <del class="p-old-price"> 23.900.000đ </del> <span class="p-sale-off"> (Tiết kiệm: 1.410.000đ) </span> </div><div class="p-button"> <span class="green"> <i class="fa fa-check"></i> Còn hàng </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-2.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> </div><div class="p-button"> <span> <i class="fa fa-check"></i> Liên hệ </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-4.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> <i class="icon-new"></i> <i class="icon-hot"></i> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> </div><div class="p-button"> <span> <i class="fa fa-check"></i> Liên hệ </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div>
+
+            </div>
+        </div>
+    </div>
+
+
+    <!-- product-list -->
+    <div class="product-box-group">
+        <div class="box-title">
+            <h2 class="title"> laptop - máy tính xách tay </h2>
+
+            <div class="children-lists">
+                <!-- limit 3 -> 4 -->
+                <a href=""> Laptop theo hãng </a><a href=""> Laptop theo nhu cầu </a><a href=""> Laptop theo cấu hình </a><a href=""> Phụ kiện Laptop </a>
+            </div>
+
+            <a href="" class="orange view-all"> Xem tất cả <i class="fa fa-angle-double-right"></i> </a>
+        </div>
+
+        <div class="js-product-holder">
+            <div class="bg-white owl-carousel owl-theme custom-nav">
+                
+                <div class="p-item-2021">
+                    <div class="p-img">
+                        <a href=""> <img src="images/product-1.jpg" alt="" /> </a>
+                        <span class="p-sku">MÃ SP: SP004007</span>
+                        <span class="p-type">
+                            <i class="icon-new"></i>
+                            <i class="icon-hot"></i>
+                        </span>
+
+                        <span class="p-discount-2021">-20%</span>
+                    </div>
+                
+                    <div class="p-text">
+                        <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a>
+                        
+                        <div class="p-price-group">
+                            <span class="p-price"> 22.490.000đ </span>
+                            <del class="p-old-price"> 23.900.000đ </del>
+                            <span class="p-sale-off"> (Tiết kiệm: 1.410.000đ) </span>
+                        </div>
+                
+                        <div class="p-button">
+                            <span class="green"> <i class="fa fa-check"></i> Còn hàng </span>
+                            <!-- <span> <i class="fa fa-check"></i> Liên hệ </span> -->
+
+                            <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- copy -->
+                <div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-2.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> <i class="icon-new"></i> </span> <span class="p-discount-2021">-20%</span></div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> <del class="p-old-price"> 23.900.000đ </del> <span class="p-sale-off"> (Tiết kiệm: 1.410.000đ) </span> </div><div class="p-button"> <span> <i class="fa fa-check"></i> Liên hệ </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-3.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> <i class="icon-hot"></i> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> <del class="p-old-price"> 23.900.000đ </del> <span class="p-sale-off"> (Tiết kiệm: 1.410.000đ) </span> </div><div class="p-button"> <span> <i class="fa fa-check"></i> Liên hệ </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-4.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> </div><div class="p-button"> <span class="green"> <i class="fa fa-check"></i> Còn hàng </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-5.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> <i class="icon-new"></i> <i class="icon-hot"></i> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> <del class="p-old-price"> 23.900.000đ </del> <span class="p-sale-off"> (Tiết kiệm: 1.410.000đ) </span> </div><div class="p-button"> <span class="green"> <i class="fa fa-check"></i> Còn hàng </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-2.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> </div><div class="p-button"> <span> <i class="fa fa-check"></i> Liên hệ </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div><div class="p-item-2021"> <div class="p-img"> <a href=""> <img src="images/product-4.jpg" alt=""/> </a> <span class="p-sku">MÃ SP: SP004007</span> <span class="p-type"> <i class="icon-new"></i> <i class="icon-hot"></i> </span> </div><div class="p-text"> <a href="" class="p-name"> Màn hình LG 27GN950 27'', Nano ÍP, UHD(3840 x 2160), 144Hz, độ phân giải 4k </a> <div class="p-price-group"> <span class="p-price"> 22.490.000đ </span> </div><div class="p-button"> <span> <i class="fa fa-check"></i> Liên hệ </span> <a href="javascript:void(0)" class="p-buy icons" title="Thêm vào giỏ">  Thêm vào giỏ</a> </div></div></div>
+
+            </div>
+        </div>
+    </div>
+
+
+    <!-- article -->
+    <div class="home-article-container bg-white clearfix">
+        <div class="box-title" id="js-article-title">
+            <a href="javascript:void(0)" class="active"> Tin tức </a>
+            <a href="javascript:void(0)"> Tư vấn chọn mua </a>
+            <a href="javascript:void(0)"> Kiến thức </a>
+            <a href="javascript:void(0)"> Tin khuyến mãi </a>
+            <a href="javascript:void(0)"> Tin công ty </a>
+        </div>
+
+        <div class="box-holder hover-img clearfix">
+            <div class="art-big">
+                <a href="">
+                    <img data-src="http://via.placeholder.com/792x464" alt="" title="" class="lazy"/>
+
+                    <div class="art-big-text">
+                        <p class="art-title"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem voluptatum aliquam Voluptatem voluptatum aliquam </p>
+                        <time> 29/11/2019 </time>
+                    </div>
+                </a>
+            </div>
+
+            <div class="art-list-group">
+                <!-- limit 4 -->
+                <div class="art-item">
+                    <a href="" class="art-img">
+                        <img data-src="http://via.placeholder.com/792x464/f00" alt="" title="" class="lazy"/>
+                    </a>
+
+                    <div class="art-text">
+                        <a href=""> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem voluptatum aliquam </a>
+                        <time> 29/11/2019 </time>
+                    </div>
+                </div>
+
+                <div class="art-item"> <a href="" class="art-img"> <img data-src="http://via.placeholder.com/792x464/fe0" alt="" title="" class="lazy"/> </a> <div class="art-text"> <a href=""> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem voluptatum aliquam </a> <time> 29/11/2019 </time> </div></div><div class="art-item"> <a href="" class="art-img"> <img data-src="http://via.placeholder.com/792x464/acb" alt="" title="" class="lazy"/> </a> <div class="art-text"> <a href=""> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem voluptatum aliquam </a> <time> 29/11/2019 </time> </div></div><div class="art-item"> <a href="" class="art-img"> <img data-src="http://via.placeholder.com/792x464" alt="" title="" class="lazy"/> </a> <div class="art-text"> <a href=""> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem voluptatum aliquam </a> <time> 29/11/2019 </time> </div></div>
+            </div>
+        </div>
+    </div>
+
+</section>
+
+
+<footer>
+    <div class="footer-newsletter-container text-center">
+        <p>ĐĂNG KÝ NHẬN EMAIL THÔNG BÁO KHUYẾN MẠI HOẶC ĐỂ ĐƯỢC TƯ VẤN MIỄN PHÍ</p>
+
+        <div class="registor-form-group">
+            <input type="text" placeholder="Email của bạn..." id="js-email-newsletter"/>
+            <a href="javascript:void(0)" onclick="subscribe_newsletter('#js-email-newsletter')"> Gửi </a>
+        </div>
+    </div>
+
+    <div class="footer-info-group">
+        <div class="container clearfix">
+            <div class="info-item-group">
+                <p class="item-title"> Thông tin chung </p>
+                
+                <a href="/gioi-thieu"> Giới thiệu về PC Xanh </a>
+                <a href="/tin-tuc"> Tin tức </a>
+                <a href="/lien-he"> Liên hệ hợp tác </a>
+                <a href=""> Tuyển dụng </a>
+                <a href="/buildpc"> Xây dựng cấu hình PC </a>
+                <a href=""> Hướng Dẫn Mua Hàng </a>
+                <a href=""> Quy Định Và Hình Thức Thanh Toán </a>
+                <a href=""> Bán Hàng Trả Góp </a>
+            </div>
+
+            <div class="info-item-group">
+                <p class="item-title"> Quy định & chính sách </p>
+                
+                <a href=""> Chính Sách Bảo Hành </a>
+                <a href=""> Chính sách đổi, trả lại hàng </a>
+                <a href=""> Chính Sách Giao Hàng </a>
+                <a href=""> Bảo mật thông tin khách hàng </a>
+            </div>
+
+            <div class="info-item-group social">
+                <p class="item-title"> Cộng đồng PC Xanh </p>
+                
+                <a href="" target="_blank"> <i class="fa fa-facebook"></i> Facebook </a>
+                <a href="" target="_blank"> <i class="fa fa-youtube-play"></i> Youtube </a>
+                <a href="" target="_blank"> <i class="fa fa-users"></i> Group Gaming </a>
+                <a href="?show_version=mobile" class="view-mobile"> Xem bản mobile </a>
+                <a href="" target="_blank"> <img src="images/icon-bct-2021.png" alt="BCT" style="width: 170px;" /> </a>
+            </div>
+
+            <div class="info-item-group">
+                <p class="item-title"> Showroom </p>
+                
+                <p class="m-0">
+                    <i class="fa fa-map-marker pr-1"></i> Địa chỉ: Tầng 2, Toà Viettel Port, Cầu Diễn, Bắc Từ Liêm, Hà Nội
+                    <a href="https://goo.gl/maps/WzaMWn2qK4Cv31jw6" target="_blank" style="color: #fff000;"> [Xem đường đi] </a>
+                </p>
+
+                <p>
+                    <i class="fa fa-phone"></i> Hotline: 000.000.0000
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <p class="m-0 text-center font-300" style="color: #555555;padding: 10px 0;">
+        Copyright 2020 © - Bản quyền của PC Xanh - Tầng 2, Toà Viettel Port, Cầu Diễn, Bắc Từ Liêm, Hà Nội.
+    </p>
+</footer>
+
+
+
+<div class="global-fixed-right">
+    <a href="" target="_blank"  title="Fanpage"><i class="fa fa-facebook"></i></a>
+    <a href="" target="_blank"  title="Kênh Youtube"><i class="fa fa-youtube"></i></a>
+    <a href="/lien-he" title="Gửi liên hệ"><i class="fa fa-envelope"></i></a>
+    <a href="/lien-he" title="Liên hệ"><i class="fa fa-phone"></i></a>
+    <a href="/buildpc" title="Xây dựng cấu hình"><i class="fa fa-wrench"></i></a>
+    <a href="javascript:void(0)" title="Lên đầu trang" id="js-goTop"><i class="fa fa-arrow-up"></i></a>
+</div>
+
+
+<!-- Script -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.min.js"></script>
+<!-- carousel -->
+<script src="js/lib.js"></script>
+<!-- slick -->
+<!-- <script src="js/slick.js"></script> -->
+
+
+<!-- <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> -->
+
+<!-- pro-detail -->
+ <!-- <link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
+<script src="js/scrollToFixed.js"></script>-->
+<script src="js/magiczoom.js"></script>
+
+
+<!-- global -->
+<script>
+    var lazyLoadInstance = new LazyLoad({
+        elements_selector: ".lazy"
+    });
+
+    $(document).ready(function(){
+        changeIdSearch();
+
+
+        $('#js-goTop').click(function() {
+            $('body,html').animate({scrollTop:0},800);
+        });
+    })
+
+    $(window).scroll(function() {    
+        // scroll to top
+        if($(window).scrollTop() > 150) $(".global-fixed-right").addClass('active');
+        else $(".global-fixed-right").removeClass('active');
+    });
+
+    function changeIdSearch(){
+        $("#js-select-cat").on('change',function(){
+            var id = $("#js-select-cat option:selected").attr("data-id")
+            $("#js-scat-id").val(id);
+        })
+    }
+
+    // 
+    function run_carousel(holder){
+        $(holder + " .owl-carousel").owlCarousel({
+            items: 5,
+            margin: 10,
+            lazyLoad: true,
+            loop: false,
+            autoplay: false,
+            autoplayTimeout: 3000,
+            autoplaySpeed: 1500,
+            autoplayHoverPause: false,
+            dots: false,
+            nav: true,
+            navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
+            responsive : {
+                1600 : {
+                    items: 6
+                }
+            }
+        });
+    }
+
+
+    function getIdYoutube(url){
+        var video_id = url.split('v=')[1];
+        var ampersandPosition = video_id.indexOf('&');
+        if(ampersandPosition != -1) {
+            video_id = video_id.substring(0, ampersandPosition);
+        }
+        return video_id;
+    }
+</script>
+
+<!-- homepage -->
+<script>
+    $(document).ready(function(){
+
+        $('#js-slider-home').owlCarousel({
+            items: 1,
+            loop: true,
+            margin:10,
+            autoplay: true,
+            autoplayTimeout: 4000,
+            autoplaySpeed: 1500,
+            autoplayHoverPause:true,
+            nav: false,
+            navText: ["<i class='icon-arrow arrow-left'></i>","<i class='icon-arrow arrow-right'></i>"],
+            lazyLoad: true,
+            dots: true
+        });
+
+        run_BannerVideo(".js-home-video");
+
+        run_carousel("#js-collection-product-holder");
+
+        // product
+        run_carousel(".js-product-holder");
+
+
+        // tab-collection
+        $("#js-collection-tab a").click(function(){
+            event.preventDefault();
+
+            $("#js-collection-tab a").removeClass("active");
+            $(this).addClass("active");
+            
+            var url = $(this).attr("href");
+            $("#js-collection-url").attr("href",url)
+        });
+
+
+        // article- home-footer
+        $("#js-article-title a").click(function(){
+            $("#js-article-title a").removeClass("active");
+            $(this).addClass("active");
+            
+        });
+
+    });
+
+
+
+
+    function run_BannerVideo(holder) {
+        $(holder).click(function(){
+            var url = $(this).attr("data-url");
+            var url_code = getIdYoutube(url);
+            var videoUrl = "https://www.youtube.com/embed/"+url_code+"?rel=0&showinfo=0&autoplay=1";
+
+            $(this).html('<iframe allowfullscreen frameborder="0" class="lazy" src="' + videoUrl + '"></iframe>');
+            $(this).addClass("active");
+        });
+    }
+
+</script> 
+
+
+</body>
+</html>
--- a/js/carousel.js
+++ b/js/carousel.js
--- a/js/fancyboxmin.js
+++ b/js/fancyboxmin.js
--- a/js/lib.js
+++ b/js/lib.js
--- a/js/magiczoom.js
+++ b/js/magiczoom.js
--- a/js/mmenu.js
+++ b/js/mmenu.js
--- a/js/scrollToFixed.js
+++ b/js/scrollToFixed.js
--- a/js/slick.js
+++ b/js/slick.js
--- a/js/slickanimation.js
+++ b/js/slickanimation.js
@@ -0,0 +1,229 @@
+/*
+ slick-animation.js
+ Version: 0.3.3 Beta
+ Author: Marvin Hübner
+ Docs: https://github.com/marvinhuebner/slick-animation
+ Repo: https://github.com/marvinhuebner/slick-animation
+ */
+
+(function ($) {
+    $.fn.slickAnimation = function () {
+        var currentSlickSlider = $(this);
+
+        var slickItems = currentSlickSlider.find('.slick-list .slick-track > div');
+        var firstSlickItem = currentSlickSlider.find('[data-slick-index="0"]');
+
+        var animatedClass = 'animated';
+        var visible = {opacity: '1'};
+        var hidden = {opacity: '0'};
+
+        /**
+         * function for setting animationIn and animationOut class
+         * @param obj
+         * @param type
+         * @param animationIn
+         * @param animatedClass
+         * @param visibility
+         */
+
+        function slickSetAnimationDefault(obj, type, animationIn, animatedClass, visibility) {
+            visibility = typeof visibility !== 'undefined' ? visibility : false;
+
+            slickRemoveAnimation(obj, 'delay');
+            slickRemoveAnimation(obj, 'duration');
+
+            if (type['opacity'] == 1) {
+                obj.addClass(animationIn);
+                obj.addClass(animatedClass);
+            } else {
+                obj.removeClass(animationIn);
+                obj.removeClass(animatedClass);
+            }
+
+            if (visibility) obj.css(type);
+        }
+
+        /**
+         * get timeout when delay, duration, delay and duration is set
+         * @param delayIn
+         * @param durationIn
+         * @returns {number}
+         */
+
+        function getTimeout(delayIn, durationIn) {
+            if (delayIn) {
+                return delayIn * 1000 + 1000;
+
+            } else if (durationIn) {
+                return durationIn * 1000;
+
+            } else if ((delayIn) || (durationIn)) {
+                return (delayIn * 1000) + (durationIn * 1000);
+            }
+            return 1000;
+        }
+
+        /**
+         * add css animations for delay and duration
+         * @param obj
+         * @param animation
+         * @param value
+         */
+        function slickAddAnimation(obj, animation, value) {
+            var delayInAttr = [
+                'animation-' + animation,
+                '-webkit-animation-' + animation,
+                '-moz-animation-' + animation,
+                '-o-animation-' + animation,
+                '-ms-animation-' + animation
+            ];
+            var delayInAttributes = {};
+            delayInAttr.forEach(function (entry) {
+
+                delayInAttributes[entry] = value + 's';
+            });
+            obj.css(delayInAttributes);
+        }
+
+        /**
+         * remove css animations for delay and duration
+         * @param obj
+         * @param animation
+         */
+        function slickRemoveAnimation(obj, animation) {
+            var delayInAttr = [
+                'animation-' + animation,
+                '-webkit-animation-' + animation,
+                '-moz-animation-' + animation,
+                '-o-animation-' + animation,
+                '-ms-animation-' + animation
+            ];
+            var delayInAttributes = {};
+            delayInAttr.forEach(function (entry) {
+
+                delayInAttributes[entry] = '';
+            });
+            obj.css(delayInAttributes);
+        }
+
+        slickItems.each(function () {
+            var slickItem = $(this);
+
+            slickItem.find('[data-animation-in]').each(function () {
+                var self = $(this);
+
+                self.css(hidden);
+
+                var animationIn = self.attr('data-animation-in');
+                var animationOut = self.attr('data-animation-out');
+                var delayIn = self.attr('data-delay-in');
+                var durationIn = self.attr('data-duration-in');
+                var delayOut = self.attr('data-delay-out');
+                var durationOut = self.attr('data-duration-out');
+
+                if (animationOut) {
+                    if (firstSlickItem.length > 0) {
+                        if (slickItem.hasClass('slick-current')) {
+
+                            slickSetAnimationDefault(self, visible, animationIn, animatedClass, true);
+
+                            if (delayIn) {
+                                slickAddAnimation(self, 'delay', delayIn);
+                            }
+                            if (durationIn) {
+                                slickAddAnimation(self, 'duration', durationIn);
+                            }
+
+                            setTimeout(function () {
+                                slickSetAnimationDefault(self, hidden, animationIn, animatedClass);
+                                slickSetAnimationDefault(self, visible, animationOut, animatedClass);
+                                if (delayOut) {
+                                    slickAddAnimation(self, 'delay', delayOut);
+                                }
+                                if (durationOut) {
+                                    slickAddAnimation(self, 'duration', durationOut);
+                                }
+                                setTimeout(function() {
+                                    slickRemoveAnimation(self, 'delay');
+                                    slickRemoveAnimation(self, 'duration');
+                                }, getTimeout(delayOut, durationOut));
+
+                            }, getTimeout(delayIn, durationIn));
+                        }
+                    }
+
+                    currentSlickSlider.on('afterChange', function (event, slick, currentSlider) {
+                        if (slickItem.hasClass('slick-current')) {
+
+                            slickSetAnimationDefault(self, visible, animationIn, animatedClass, true);
+
+                            if (delayIn) {
+                                slickAddAnimation(self, 'delay', delayIn);
+                            }
+                            if (durationIn) {
+                                slickAddAnimation(self, 'duration', durationIn);
+                            }
+
+                            setTimeout(function () {
+                                slickSetAnimationDefault(self, hidden, animationIn, animatedClass);
+                                slickSetAnimationDefault(self, visible, animationOut, animatedClass);
+
+                                if (delayOut) {
+                                    slickAddAnimation(self, 'delay', delayOut);
+                                }
+                                if (durationOut) {
+                                    slickAddAnimation(self, 'duration', durationOut);
+                                }
+                                setTimeout(function() {
+                                    slickRemoveAnimation(self, 'delay');
+                                    slickRemoveAnimation(self, 'duration');
+                                }, getTimeout(delayOut, durationOut));
+
+                            }, getTimeout(delayIn, durationIn));
+                        }
+                    });
+
+                    currentSlickSlider.on('beforeChange', function (event, slick, currentSlider) {
+                        slickSetAnimationDefault(self, hidden, animationOut, animatedClass, true);
+
+                    });
+                } else {
+
+                    if (firstSlickItem.length > 0) {
+                        if (slickItem.hasClass('slick-current')) {
+                            slickSetAnimationDefault(self, visible, animationIn, animatedClass, true);
+
+                            if (delayIn) {
+                                slickAddAnimation(self, 'delay', delayIn);
+                            }
+                            if (durationIn) {
+                                slickAddAnimation(self, 'duration', durationIn);
+
+                            }
+                        }
+                    }
+
+                    currentSlickSlider.on('afterChange', function (event, slick, currentSlider) {
+                        if (slickItem.hasClass('slick-current')) {
+                            slickSetAnimationDefault(self, visible, animationIn, animatedClass, true);
+
+                            if (delayIn) {
+                                slickAddAnimation(self, 'delay', delayIn);
+                            }
+                            if (durationIn) {
+                                slickAddAnimation(self, 'duration', durationIn);
+                            }
+                        }
+                    });
+
+
+                    currentSlickSlider.on('beforeChange', function (event, slick, currentSlider) {
+                        slickSetAnimationDefault(self, hidden, animationIn, animatedClass, true);
+                    });
+                }
+
+            });
+        });
+        return this;
+    }
+})(jQuery);
--- a/scss/carousel.css
+++ b/scss/carousel.css
@@ -0,0 +1,9 @@
+/**
+ * Owl Carousel v2.3.4
+*/
+.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
+
+/**
+ * Owl Carousel - Theme v2.3.4
+ */
+.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
--- a/scss/hoanglong.css
+++ b/scss/hoanglong.css
--- a/scss/hoanglong.css.map
+++ b/scss/hoanglong.css.map
--- a/scss/hoanglong.scss
+++ b/scss/hoanglong.scss
--- a/scss/lib.css
+++ b/scss/lib.css
--- a/scss/main.css
+++ b/scss/main.css
@@ -0,0 +1,563 @@
+@import url("https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css");
+body {
+  color: #222;
+  font-family: 'Roboto', sans-serif;
+  background: #f1f1f1;
+  position: relative;
+  min-width: 1200px;
+  font-size: 14px;
+}
+
+.bg-grey {
+  background: #E5E5E5;
+}
+
+a {
+  color: #222;
+  text-decoration: none;
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease;
+}
+
+a:hover {
+  text-decoration: none;
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease;
+}
+
+.ul, .ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+b {
+  font-weight: bold;
+}
+
+.clearfix::after {
+  content: '';
+  clear: both;
+  display: block;
+}
+
+.clear {
+  clear: both;
+}
+
+button, input, select {
+  outline: none !important;
+}
+
+table {
+  width: 100% !important;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  select, textarea, input {
+    font-size: 16px;
+  }
+}
+
+@media (min-width: 1200px) {
+  select, textarea, input {
+    font-size: 14px;
+  }
+}
+
+iframe {
+  max-width: 100%;
+}
+
+.text-10 {
+  font-size: 10px;
+}
+
+.text-11 {
+  font-size: 11px;
+}
+
+.text-12 {
+  font-size: 12px;
+}
+
+.text-13 {
+  font-size: 13px;
+}
+
+.text-14 {
+  font-size: 14px;
+}
+
+.text-15 {
+  font-size: 15px;
+}
+
+.text-16 {
+  font-size: 16px;
+}
+
+.text-17 {
+  font-size: 17px;
+}
+
+.text-18 {
+  font-size: 18px;
+}
+
+.text-20 {
+  font-size: 20px;
+}
+
+.text-22 {
+  font-size: 22px;
+}
+
+.text-24 {
+  font-size: 24px;
+}
+
+.blue {
+  color: #0083FF;
+}
+
+.red {
+  color: #ed2124;
+}
+
+.grey {
+  color: #999;
+}
+
+.bg-blue {
+  background: #0083FF;
+}
+
+.font-300 {
+  font-weight: 300;
+}
+
+.font-500 {
+  font-weight: 500;
+}
+
+.font-600 {
+  font-weight: 600;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.fit-img {
+  width: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto;
+  display: block;
+}
+
+@-webkit-keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-8deg);
+    transform: scale(0.9) rotate(-8deg);
+  }
+  30%, 50%, 70% {
+    -webkit-transform: scale(1.3) rotate(8deg);
+    transform: scale(1.3) rotate(8deg);
+  }
+  40%, 60% {
+    -webkit-transform: scale(1.3) rotate(-8deg);
+    transform: scale(1.3) rotate(-8deg);
+  }
+  100%, 80% {
+    -webkit-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+@keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-8deg);
+    transform: scale(0.9) rotate(-8deg);
+  }
+  30%, 50%, 70% {
+    -webkit-transform: scale(1.3) rotate(8deg);
+    transform: scale(1.3) rotate(8deg);
+  }
+  40%, 60% {
+    -webkit-transform: scale(1.3) rotate(-8deg);
+    transform: scale(1.3) rotate(-8deg);
+  }
+  100%, 80% {
+    -webkit-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+@-webkit-keyframes phonering {
+  0% {
+    -webkit-transform: rotate(0) scale(1) skew(1deg);
+  }
+  10% {
+    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
+  }
+  20% {
+    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
+  }
+  30% {
+    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
+  }
+  40% {
+    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
+  }
+  50% {
+    -webkit-transform: rotate(0) scale(1) skew(1deg);
+  }
+  100% {
+    -webkit-transform: rotate(0) scale(1) skew(1deg);
+  }
+}
+
+.label-container {
+  display: block;
+  position: relative;
+  padding-left: 30px;
+  margin-bottom: 14px;
+  cursor: pointer;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.label-container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.label-container .checkmark {
+  position: absolute;
+  top: 2px;
+  left: 0;
+  height: 15px;
+  width: 15px;
+  border: 1px solid #bbb;
+  background-color: #fff;
+  border-radius: 3px;
+}
+
+.label-container:hover input ~ .checkmark {
+  border-color: #14903f;
+}
+
+.label-container input:checked ~ .checkmark {
+  background-color: #d58430;
+  border-color: #d58430;
+}
+
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+.label-container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+.label-container .checkmark:after {
+  left: 4px;
+  top: 1px;
+  width: 6px;
+  height: 9px;
+  border: solid white;
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.radio-container {
+  position: relative;
+  padding-left: 25px;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  margin: 0 40px 0 0;
+}
+
+.radio-container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.radio-container .checkmark {
+  position: absolute;
+  top: 2px;
+  left: 0px;
+  height: 16px;
+  width: 16px;
+  background-color: #fff;
+  border-radius: 50%;
+  border: 2px solid #999;
+}
+
+.radio-container input:checked ~ .checkmark {
+  background-color: #fff;
+  border: 2px solid #008445;
+}
+
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+.radio-container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+.radio-container .checkmark:after {
+  top: 3px;
+  left: 3px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #008445;
+}
+
+.bg-popup {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  cursor: -webkit-grab;
+  cursor: grab;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+}
+
+.autocomplete-suggestions {
+  position: absolute;
+  width: 100%;
+  border: solid 1px #ddd;
+  right: 0;
+  margin-top: 2px;
+  max-height: 300px;
+  overflow: auto;
+  display: none;
+  background: #fff;
+  z-index: 999;
+}
+
+.autocomplete-suggestions a {
+  display: block;
+  padding: 10px;
+  overflow: hidden;
+}
+
+.autocomplete-suggestions a img {
+  width: 60px;
+  float: left;
+}
+
+.autocomplete-suggestions a .info {
+  display: block;
+  margin-left: 65px;
+}
+
+.autocomplete-suggestions a .info .name {
+  display: block;
+  color: #333;
+}
+
+.autocomplete-suggestions a .info .price {
+  color: #ec1c24;
+}
+
+.autocomplete-suggestions a:hover {
+  background-color: #f5f5f5;
+}
+
+.autocomplete-suggestions::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #f1f1f1;
+  border-radius: 10px;
+}
+
+.autocomplete-suggestions::-webkit-scrollbar {
+  width: 6px;
+  background-color: #f1f1f1;
+}
+
+.autocomplete-suggestions::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #ccc;
+}
+
+.icon-star {
+  background-image: url(../images/star_sprite.png);
+  width: 96px;
+  height: 19px;
+  vertical-align: text-bottom;
+  display: inline-block;
+  background-repeat: no-repeat;
+}
+
+.icon-star.star-0 {
+  background-position: 0 -109px;
+}
+
+.icon-star.star-1 {
+  background-position: 0 -88px;
+}
+
+.icon-star.star-2 {
+  background-position: 0 -66px;
+}
+
+.icon-star.star-3 {
+  background-position: 0 -42px;
+}
+
+.icon-star.star-4 {
+  background-position: 0 -21px;
+}
+
+.icon-star.star-5 {
+  background-position: 0 0;
+}
+
+.hover-img a {
+  position: relative;
+  overflow: hidden;
+  display: block;
+}
+
+.hover-img a::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -15%;
+  bottom: 0;
+  width: 0;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+  -webkit-transition: none;
+  transition: none;
+  -webkit-transform: skewX(-25deg);
+          transform: skewX(-25deg);
+}
+
+.hover-img a:hover::before {
+  width: 120%;
+  background-color: rgba(255, 255, 255, 0);
+  -webkit-transition: all .45s ease-out;
+  transition: all .45s ease-out;
+  z-index: 2;
+}
+
+.container {
+  padding: 0 10px;
+  max-width: 1230px;
+  min-width: 1230px;
+}
+
+.row {
+  margin: 0 -10px;
+}
+
+.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
+  padding: 0 10px;
+}
+
+#breadcrumb {
+  margin: 0 0 12px 0;
+  position: relative;
+  font-size: 13px;
+}
+
+#breadcrumb li {
+  float: left;
+  position: relative;
+  z-index: 1;
+}
+
+#breadcrumb li::after {
+  content: '/';
+  padding: 0 8px;
+}
+
+#breadcrumb li:last-child a {
+  color: #848484;
+}
+
+#breadcrumb li:last-child::after {
+  content: none;
+}
+
+#breadcrumb li a {
+  color: #0083FF;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 18px;
+}
+
+#breadcrumb h1 {
+  font-size: inherit;
+  font-weight: inherit;
+  margin: 0;
+  line-height: inherit;
+}
+
+.paging {
+  text-align: center;
+  margin: 16px 0 26px 0;
+}
+
+.paging a {
+  display: inline-block;
+  margin-right: 3px;
+  width: 35px;
+  height: 31px;
+  line-height: 31px;
+  border-radius: 5px;
+  border: 1px solid #edeef2;
+  color: #888;
+  background: #fff;
+}
+
+.paging a:hover, .paging a.current {
+  color: #fff;
+  background: #0083FF;
+  border-color: #0083FF;
+}
+/*# sourceMappingURL=main.css.map */
--- a/scss/main.css.map
+++ b/scss/main.css.map
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -0,0 +1,295 @@
+@import url("https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css");
+// @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
+
+body{
+    color:#222;
+    font-family: 'Roboto', sans-serif;
+    background:#f1f1f1 ;
+    position:relative;
+    min-width: 1200px;
+    font-size: 14px;
+}
+.bg-grey{
+    background: #E5E5E5;
+}
+a{
+    color: #222;
+    text-decoration: none;
+    transition: all .3s ease;
+}
+a:hover {
+    text-decoration: none;
+    transition: all .3s ease;
+    
+}
+.ul, .ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+img {
+    max-width: 100%;
+    height: auto;
+}
+b{
+    font-weight: bold;
+}
+.clearfix::after {
+    content: '';
+    clear: both;
+    display: block;
+}
+.clear {
+    clear: both;
+}
+button, input, select {
+    outline: none !important;
+}
+table{
+    width: 100% !important;
+    -webkit-overflow-scrolling: touch;
+}
+@media screen and (-webkit-min-device-pixel-ratio: 0){
+    select, textarea, input {
+        font-size: 16px;
+    }
+}
+@media(min-width: 1200px){
+    select, textarea, input {
+        font-size: 14px;
+    }
+}
+iframe {
+    max-width: 100%;
+}
+.text-10{
+    font-size: 10px;
+}
+.text-11{
+    font-size: 11px;
+}
+.text-12{
+    font-size: 12px;
+}
+.text-13{
+    font-size: 13px;
+}
+.text-14{
+    font-size: 14px;
+}
+.text-15{
+    font-size: 15px;
+}
+.text-16{
+    font-size: 16px;
+}
+.text-17{
+    font-size: 17px;
+}
+.text-18{
+    font-size: 18px;
+}
+.text-20{
+    font-size: 20px;
+}
+.text-22{
+    font-size: 22px;
+}
+.text-24{
+    font-size: 24px;
+}
+.blue{
+    color: #0083FF;
+}
+.red{
+    color: #ed2124;
+}
+.grey{
+    color: #999;
+}
+.bg-blue{
+    background: #0083FF;
+}
+.font-300{
+    font-weight: 300;
+}
+.font-500{
+    font-weight: 500;
+}
+.font-600{
+    font-weight: 600;
+}
+.underline{
+    text-decoration: underline;
+}
+.fit-img{
+    width: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-width: 100%;
+    max-height: 100%;
+    margin: auto;
+    display: block;
+}
+@keyframes tada{
+    0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1) }
+    10%,20%{-webkit-transform:scale(.9) rotate(-8deg);-ms-transform:scale(.9) rotate(-8deg);transform:scale(.9) rotate(-8deg) }
+    30%,50%,70%{-webkit-transform:scale(1.3) rotate(8deg);-ms-transform:scale(1.3) rotate(8deg);transform:scale(1.3) rotate(8deg) }
+    40%,60%{-webkit-transform:scale(1.3) rotate(-8deg);-ms-transform:scale(1.3) rotate(-8deg);transform:scale(1.3) rotate(-8deg) }
+    100%,80%{-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0) }
+}
+@-webkit-keyframes phonering {
+    0% {
+        -webkit-transform: rotate(0) scale(1) skew(1deg);
+    }
+    10% {
+        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
+    }
+    20% {
+        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
+    }
+    30% {
+        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
+    }
+    40% {
+        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
+    }
+    50% {
+        -webkit-transform: rotate(0) scale(1) skew(1deg);
+    }
+    100% {
+        -webkit-transform: rotate(0) scale(1) skew(1deg);
+    }
+}
+// checkbox
+.label-container{display:block;position:relative;padding-left:30px;margin-bottom:14px;cursor:pointer;font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
+.label-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0;}
+.label-container .checkmark{position:absolute;top:2px;left:0;height:15px;width:15px;border:1px solid #bbb;background-color:#fff;border-radius:3px;}
+.label-container:hover input ~ .checkmark{border-color:#14903f;}
+.label-container input:checked ~ .checkmark{background-color:#d58430;border-color:#d58430;}
+.checkmark:after{content:"";position:absolute;display:none;}
+.label-container input:checked ~ .checkmark:after{display:block;}
+.label-container .checkmark:after{left: 4px;top: 1px;width: 6px;height: 9px;border:solid white;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
+// radio
+.radio-container{position:relative;padding-left:25px;cursor:pointer;user-select:none;margin:0 40px 0 0;}
+.radio-container input{position:absolute;opacity:0;cursor:pointer;}
+.radio-container .checkmark{position:absolute;top:2px;left:0px;height:16px;width:16px;background-color:#fff;border-radius:50%;border:2px solid #999;}
+.radio-container input:checked ~ .checkmark{background-color:#fff;border:2px solid #008445;}
+.checkmark:after{content:"";position:absolute;display:none;}
+.radio-container input:checked ~ .checkmark:after{display:block;}
+.radio-container .checkmark:after{top:3px;left:3px;width:6px;height:6px;border-radius:50%;background:#008445;}
+.bg-popup{display: none;position: fixed;top:0;left: 0;right: 0;bottom: 0;cursor: grab;background: rgba(0, 0, 0, 0.5);z-index: 99}
+
+.autocomplete-suggestions{position:absolute;width: 100%;;border:solid 1px #ddd;right:0;margin-top:2px;max-height:300px;overflow:auto;display:none;background:#fff;z-index:999;}
+.autocomplete-suggestions a{display:block;padding:10px;overflow:hidden;}
+.autocomplete-suggestions a img{width:60px;float:left;}
+.autocomplete-suggestions a .info{display:block;margin-left:65px;}
+.autocomplete-suggestions a .info .name{display:block;color:#333;}
+.autocomplete-suggestions a .info .price{color:#ec1c24;}
+.autocomplete-suggestions a:hover{background-color:#f5f5f5;}
+.autocomplete-suggestions::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);background-color: #f1f1f1;border-radius: 10px;}
+.autocomplete-suggestions::-webkit-scrollbar{width: 6px;background-color: #f1f1f1;}
+.autocomplete-suggestions::-webkit-scrollbar-thumb{border-radius: 10px;background-color: #ccc;}
+
+.icon-star{background-image:url(../images/star_sprite.png);width: 96px;height: 19px;vertical-align:text-bottom;display:inline-block;background-repeat:no-repeat;}
+.icon-star.star-0{background-position:0 -109px;}
+.icon-star.star-1{background-position:0 -88px;}
+.icon-star.star-2{background-position:0 -66px;}
+.icon-star.star-3{background-position:0 -42px;}
+.icon-star.star-4{background-position:0 -21px;}
+.icon-star.star-5{background-position:0 0}
+.hover-img {
+	a{
+		position:relative;
+		overflow:hidden;
+		display: block;
+		&::before{
+			content:"";
+			position:absolute;
+			top:0;
+			left:-15%;
+			bottom:0;
+			width:0;
+			height:100%;
+			background-color:rgba(255, 255, 255, 0.5);
+			transition:none;
+			transform:skewX(-25deg);
+		}
+		&:hover::before{
+			width:120%;
+			background-color:rgba(255, 255, 255, 0);
+			transition:all .45s ease-out;
+			z-index:2;
+		}
+	}
+}
+.container {
+    padding: 0 10px;
+    max-width: 1230px;
+    min-width: 1230px;
+}
+.row {
+    margin: 0 -10px;
+}
+.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
+    padding: 0 10px;
+}
+#breadcrumb{
+    margin: 0 0 12px 0;
+    position: relative;
+    font-size: 13px;
+    li{
+        float: left;
+        position: relative;
+        z-index: 1;
+        &::after{
+            content:'/';
+            padding: 0 8px;
+        }
+        &:last-child{
+            a{
+                color: #848484;
+            }
+            &::after{
+                content: none;
+            }
+        }
+        a{
+            color: #0083FF;
+            font-weight: 500;
+            font-size: 15px;
+            line-height: 18px;
+        }
+    }
+    h1{
+        font-size: inherit;
+        font-weight: inherit;
+        margin: 0;
+        line-height: inherit;
+    }
+}
+.paging {
+    text-align: center;
+    margin: 16px 0 26px 0;
+    a{
+        display: inline-block;
+        margin-right: 3px;
+        width: 35px;
+        height: 31px;
+        line-height: 31px;
+        border-radius: 5px;
+        border: 1px solid #edeef2;
+        color: #888;
+        background: #fff;
+        &:hover, &.current{
+            color: #fff;
+            background: #0083FF;
+            border-color: #0083FF;
+        }
+    }
+    
+}
+
--- a/scss/mobile_css.css
+++ b/scss/mobile_css.css
--- a/scss/mobile_css.css.map
+++ b/scss/mobile_css.css.map
--- a/scss/mobile_css.scss
+++ b/scss/mobile_css.scss
--- a/scss/pc_xanh.css
+++ b/scss/pc_xanh.css
--- a/scss/pc_xanh.css.map
+++ b/scss/pc_xanh.css.map
--- a/scss/pc_xanh.scss
+++ b/scss/pc_xanh.scss