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