text: // const products = [
  //   {
  //     id: 1,
  //     name: "Relaxed-fit cat show view",
  //     brand: "zaza",
  //     type: "men",
  //     price: "$1,234.23",
  //     img: "images/item01.jpg",
  //     color: "black",
  //     size: "L",
  //     Qty: 100,
  //     sold: 55,
  //     sale: "50%",
  //     evaluate: 1,
  //     productType:"Sweater"
  //   },
  //   {
  //     id: 2,
  //     name: "Relaxed-fit cat show view",
  //     brand: "zaza",
  //     type: "men",
  //     price: "$100.00",
  //     img: "images/img0102.jpg",
  //     color: "gray",
  //     size: "L",
  //     Qty: 100,
  //     sold: 55,
  //     sale: "0%",
  //     evaluate: 5,
  //     productType:"Sweater"
  //   },
  //   {
  //     id: 3,
  //     name: "Relaxed-Fit Cotton Shirt",
  //     brand: "POLO",
  //     type: "women",
  //     price: "$100.00",
  //     img: "images/item02.jpg",
  //     color: "grey",
  //     size: "L",
  //     Qty: 100,
  //     sold: 10,
  //     sale: "0%",
  //     evaluate: 4,
  //     productType:"Shirt"
  //   },
  //   {
  //     id: 4,
  //     name: "Relaxed-Fit Cotton Shirt",
  //     brand: "zaza",
  //     price: "$400.00",
  //     img: "images/item02-2.jpg",
  //     color: "grey",
  //     size: "L",
  //     Qty: 100,
  //     sold: 10,
  //     sale: "10%",
  //     evaluate: 4,
  //     productType:"Shirt"
  //   },
  
  //   {
  //     id: 5,
  //     name: "Tailored Fit Mesh-Panel Polo",
  //     brand: "zaza",
  //     price: "$460.00",
  //     type: "women",
  //     img: "images/item03-2.jpg",
  //     color: "blue",
  //     size: "L",
  //     Qty: 100,
  //     sold: 90,
  //     sale: "0",
  //     evaluate: 4,
  //     productType:"Polo"
  //   },
  //   {
  //     id: 6,
  //     name: "Tailored Fit Mesh-Panel Polo",
  //     brand: "POLO",
  //     type: "women",
  //     price: "$460.00",
  //     img: "images/item03-1.jpg",
  //     color: "blue",
  //     size: "L",
  //     Qty: 100,
  //     sold: 30,
  //     sale: "13%",
  //     evaluate: 4,
  //     productType:"Polo"
  //   },
  //   {
  //     id: 7,
  //     name: "Slim Fit Cotton Oxford Shirt",
  //     brand: "Levis",
  //     type: "women",
  //     price: "$460.00",
  //     img: "images/item04-1.jpg",
  //     color: "blue",
  //     size: "L",
  //     Qty: 100,
  //     sold: 90,
  //     sale: "0%",
  //     evaluate: 4,
  //     productType:"Shirt"
  //   },
  //   {
  //     id: 8,
  //     name: "Slim Fit Cotton Oxford Shirt",
  //     brand: "Levis",
  //     type: "women",
  //     price: "$560.00",
  //     img: "images/item04-2.jpg",
  //     color: "blue",
  //     size: "M",
  //     Qty: 100,
  //     sold: 10,
  //     sale: "0%",
  //     evaluate: 4,
  //     productType:"Shirt"
  //   },
  //   {
  //     id: 9,
  //     name: "Faxon Canvas Low-Top Sneaker",
  //     brand: "Levis",
  //     type: "men",
  //     price: "$160.00",
  //     img: "images/item051.jpg",
  //     color: "blue",
  //     size: "42",
  //     Qty: 100,
  //     sold: 0,
  //     sale: "0%",
  //     evaluate: 0,
  //     productType:"Shoes"
  //   },
  //   {
  //     id: 10,
  //     name: "Faxon Canvas Low-Top Sneaker",
  //     brand: "Levis",
  //     type: "men",
  //     price: "$170.00",
  //     img: "images/item052.jpg",
  //     color: "gray",
  //     size: "42",
  //     Qty: 100,
  //     sold: 20,
  //     sale: "0%",
  //     evaluate: 5,
  //     productType:"Shoes"
  //   },
  //   {
  //     id: 11,
  //     name: "Viscose-Cashmere Scarf",
  //     brand: "LACOSTE",
  //     type: "men women",
  //     price: "$70.00",
  //     img: "images/item061.jpg",
  //     color: "gray",
  //     size: "42",
  //     Qty: 50,
  //     sold: 20,
  //     sale: "0%",
  //     evaluate: 3,
  //     productType:"Accessories"
  //   },
  //   {
  //     id: 12,
  //     name: "Viscose-Cashmere Scarf",
  //     brand: "LACOSTE",
  //     type: "men women",
  //     price: "$70.00",
  //     img: "images/item06-2.jpg",
  //     color: "black",
  //     size: "42",
  //     Qty: 50,
  //     sold: 40,
  //     sale: "20%",
  //     evaluate: 3,
  //     productType:"Accessories"
  //   },
  //   {
  //     id: 13,
  //     name: "Plaid Cotton Oxford Shirt",
  //     brand: "Levis",
  //     type: "men",
  //     price: "$730.00",
  //     img: "images/item071.jpg",
  //     color: "black",
  //     size: "42",
  //     Qty: 500,
  //     sold: 43,
  //     sale: "0%",
  //     evaluate: 3,
  //     productType:"Shirt"
  //   },
  //   {
  //     id: 14,
  //     name: "Rae Suede Sandal",
  //     brand: "GUESS",
  //     type: "women",
  //     price: "$130.00",
  //     img: "images/item09.jpg",
  //     color: "brown",
  //     size: "42",
  //     Qty: 500,
  //     sold: 1,
  //     sale: "0%",
  //     evaluate: 5,
  //     productType:"Shoes"
  //   },
  //   {
  //     id: 15,
  //     name: "Relaxed Painted Oxford Shirt",
  //     brand: "GUESS",
  //     type: "women",
  //     price: "$999.00",
  //     img: "images/item10.jpg",
  //     color: "brown",
  //     size: "42",
  //     Qty: 500,
  //     sold: 32,
  //     sale: "5%",
  //     evaluate: 5,
  //     productType:"Shirt"
  //   },
  //   {
  //     id: 16,
  //     name: "Rounded Cat Eye Sunglasses",
  //     brand: "GAP",
  //     type: "women",
  //     price: "$600.00",
  //     img: "images/item11.jpg",
  //     color: "black",
  //     size: "42",
  //     Qty: 500,
  //     sold: 2,
  //     sale: "0%",
  //     evaluate: 5,
  //     productType:"Accessories"
  //   },
  //   {
  //     id: 17,
  //     name: "Rounded Cat Eye Sunglasses",
  //     brand: "POLO",
  //     type: "women",
  //     price: "$300.00",
  //     img: "images/item12.jpg",
  //     color: "white",
  //     size: "42",
  //     Qty: 500,
  //     sold: 1,
  //     sale: "0%",
  //     evaluate: 5,
  //     productType:"Accessories"
  //   },
  // ];
  
  ///////////
  
  
  const products = [
    {
        id:1,
        name: "Relaxed-fit cat show view",
        brand: 'zaza',
        type:"men",
        price: "$1,234.23",
        img: ["images/item01.jpg","images/item011.jpg","images/item012.jpg"],
        color: "black",
        size: "L",
        Qty: 100,
        sold:55,      
        sale: "50%",
        evaluate:1,
        productType:"Sweater",
        review:[
          {
              IDreview:100,
              nameReview: "hoang anh",
              dateReview: "Jun 10,2021",
              titleReview: "That Good",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
          {
              IDreview:101,
              nameReview: "anh",
              dateReview: "Jun 10,2020",
              titleReview: "not bad",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
        ],
      },
      {
        id:2,
        name: "Relaxed-fit cat show view",
        brand: 'zaza',
        type:"men",
        price: "$100.00",
        img: ["images/img0102.jpg","images/item01.jpg","images/item012.jpg"],
        color: "gray",
        size: "L",
        Qty: 100,
        sold:55,      
        sale: "0%",
        evaluate:5,
        review:[
          {
              IDreview:100,
              nameReview: "hoang anh",
              dateReview: "Jun 10,2021",
              titleReview: "That Good",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
          {
              IDreview:101,
              nameReview: "anh",
              dateReview: "Jun 10,2020",
              titleReview: "not bad",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
         ],
         productType:"Sweater"
      },
      {
        id:3,
        name: "Relaxed-Fit Cotton Shirt",
        brand: 'POLO',
        type:"women",
        price: "$100.00",
        img: ["images/item02.jpg","images/item02-1.jpg","images/item02-2.jpg"],
        color: "grey",
        size: "L",
        Qty: 100,
        sold:10,      
        sale: "0%",
        evaluate:4,
        productType:"Shirt",
        review:[
       
        
          {
              IDreview:101,
              nameReview: "anh",
              dateReview: "Jun 10,2020",
              titleReview: "not bad",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
      ],
      },
      {
        id:4,
        name: "Relaxed-Fit Cotton Shirt",
        brand: 'zaza',
        price: "$400.00",
        img: ["images/item02-2.jpg","images/item02.jpg","images/item02-1.jpg"],
        color: "grey",
        size: "L",
        Qty: 100,
        sold:10,      
        sale: "10%",
        evaluate:4,
        review:[
          {
              IDreview:100,
              nameReview: "hoang anh",
              dateReview: "Jun 10,2021",
              titleReview: "That Good",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
          {
              IDreview:101,
              nameReview: "anh",
              dateReview: "Jun 10,2020",
              titleReview: "not bad",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
        ],
        productType:"Shirt"
      },
  
      {
        id:5,
        name: "Tailored Fit Mesh-Panel Polo",
        brand: 'zaza',
        price: "$460.00",
        type:"women",
        img: ["images/item03-2.jpg","images/item03-3.jpg","images/item03-4.jpg"],
        color: "blue",
        size: "L",
        Qty: 100,
        sold:90,      
        sale: "0",
        evaluate:4,
        review:[],
        productType:"Polo"
      },
      {
        id:6,
        name: "Tailored Fit Mesh-Panel Polo",
        brand: 'POLO',
        type:"women",
        price: "$460.00",
        img: ["images/item03-1.jpg","images/item03-4.jpg", "images/item03-5.jpg "],
        color: "blue",
        size: "L",
        Qty: 100,
        sold:30,      
        sale: "13%",
        evaluate:4,
        productType:"Polo",
        review:[
          {
              IDreview:100,
              nameReview: "hoang anh",
              dateReview: "Jun 10,2021",
              titleReview: "That Good",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
          {
              IDreview:101,
              nameReview: "anh",
              dateReview: "Jun 10,2020",
              titleReview: "not bad",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
      ],
      },
      {
        id:7,
        name: "Slim Fit Cotton Oxford Shirt",
        brand: 'Levis',
        type:"women",
        price: "$460.00",
        img: ["images/item04-1.jpg","images/item04-2.jpg", "images/item04-3.jpg"],
        color: "blue",
        size: "L",
        Qty: 100,
        sold:90,      
        sale: "0%",
        evaluate:4,
        review:[],
        productType:"Shirt"
      },
      {
        id:8,
        name: "Slim Fit Cotton Oxford Shirt",
        brand: 'Levis',
        type:"women",
        price: "$560.00",
        img: ["images/item04-2.jpg", "images/item04-4.jpg", "images/item04-5.jpg"],
        color: "blue",
        size: "M",
        Qty: 100,
        sold:10,      
        sale: "0%",
        evaluate:4,
        productType:"Shirt",
        review:[
          {
              IDreview:100,
              nameReview: "hoang anh",
              dateReview: "Jun 10,2021",
              titleReview: "That Good",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
          {
              IDreview:101,
              nameReview: "anh",
              dateReview: "Jun 10,2020",
              titleReview: "not bad",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
      ],
      },
      {
        id:9,
        name: "Faxon Canvas Low-Top Sneaker",
        brand: 'Levis',
        type:"men",
        price: "$160.00",
        img: ["images/item051.jpg", "images/item05-1.jpg", "images/item05-2.jpg"],
        color: "blue",
        size: "42",
        Qty: 100,
        sold:0,      
        sale: "0%",
        evaluate:0,
        productType:"Shoes",
        review:[
          {
              IDreview:100,
              nameReview: "hoang anh",
              dateReview: "Jun 10,2021",
              titleReview: "That Good",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
          {
              IDreview:101,
              nameReview: "anh",
              dateReview: "Jun 10,2020",
              titleReview: "not bad",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
      ],
      },
      {
        id:10,
        name: "Faxon Canvas Low-Top Sneaker",
        brand: 'Levis',
        type:"men",
        price: "$170.00",
        img: ["images/item052.jpg","images/item051.jpg", "images/item05-3.jpg"],
        color: "gray",
        size: "42",
        Qty: 100,
        sold:20,      
        sale: "0%",
        evaluate:5,
        productType:"Shoes",
        review:[]
      },
      {
        id:11,
        name: "Viscose-Cashmere Scarf",
        brand: 'LACOSTE',
        type:"men women",
        price: "$70.00",
        img: ["images/item061.jpg", "images/item06-1.jpg", "images/item06-3.jpg"],
        color: "gray",
        size: "42",
        Qty: 50,
        sold:20,      
        sale: "0%",
        evaluate:3,
        productType:"Accessories",
        review:[]
      },
      {
        id:12,
        name: "Viscose-Cashmere Scarf",
        brand: 'LACOSTE',
        type:"men women",
        price: "$70.00",
        img: ["images/item06-2.jpg","images/item061.jpg", "images/item06-1.jpg"],
        color: "black",
        size: "42",
        Qty: 50,
        sold:40,      
        sale: "20%",
        evaluate:3,
        productType:"Accessories",
        review:[
          {
              IDreview:100,
              nameReview: "david",
              dateReview: "Jun 10,2019",
              titleReview: "Good",
              contentReview: "That is goood!",
              rateReview: 4
  
          },
          {
              IDreview:101,
              nameReview: "anh",
              dateReview: "Jun 10,2020",
              titleReview: "not bad",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
      ],
      },
      {
        id:13,
        name: "Plaid Cotton Oxford Shirt",
        brand: 'Levis',
        type:"men",
        price: "$730.00",
        img: ["images/item071.jpg","images/item07-2.jpg","images/item07-2.jpg"],
        color: "black",
        size: "42",
        Qty: 500,
        sold:43,      
        sale: "0%",
        evaluate:3,
        productType:"Shirt",
        review:[
          {
              IDreview:100,
              nameReview: "hoang anh",
              dateReview: "Jun 10,2021",
              titleReview: "That Good",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
  
      ],
      },
      {
        id:14,
        name: "Rae Suede Sandal",
        brand: 'GUESS',
        type:"women",
        price: "$130.00",
        img: ["images/item09.jpg","images/item09-1.jpg","images/item09-2.jpg"],
        color: "brown",
        size: "42",
        Qty: 500,
        sold:1,      
        sale: "0%",
        evaluate:5,
        review:[],
        productType:"Shoes"
      },
      {
        id:15,
        name: "Relaxed Painted Oxford Shirt",
        brand: 'GUESS',
        type:"women",
        price: "$999.00",
        img: ["images/item10.jpg","images/item10-1.jpg","images/item10-2.jpg"],
        color: "brown",
        size: "42",
        Qty: 500,
        sold:32,      
        sale: "5%",
        evaluate:5,
        productType:"Shirt",
        review:[
          {
              IDreview:100,
              nameReview: "hoang anh",
              dateReview: "Jun 10,2021",
              titleReview: "That Good",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
          {
              IDreview:101,
              nameReview: "anh",
              dateReview: "Jun 10,2020",
              titleReview: "not bad",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
      ],
      },
      {
        id:16,
        name: "Rounded Cat Eye Sunglasses",
        brand: 'POLO',
        type:"women",
        price: "$600.00",
        img: ["images/item11.jpg","images/item11-1.jpg","images/item11-2.jpg"],
        color: "black",
        size: "42",
        Qty: 500,
        sold:2,      
        sale: "0%",
        evaluate:5,
        
        productType:"Accessories",
        review:[
          {
              IDreview:100,
              nameReview: "hoang anh",
              dateReview: "Jun 10,2021",
              titleReview: "That Good",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
          {
              IDreview:101,
              nameReview: "anh",
              dateReview: "Jun 10,2020",
              titleReview: "not bad",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
      ],
      },
      {
        id:17,
        name: "Rounded Cat Eye Sunglasses",
        brand: 'POLO',
        type:"women",
        price: "$300.00",
        img: ["images/item12.jpg","images/item12-1.jpg", "images/item12-2.jpg"],
        color: "white",
        size: "42",
        Qty: 500,
        sold:1,      
        sale: "0%",
        evaluate:5,
        productType:"Accessories",
        review:[
          {
              IDreview:100,
              nameReview: "hoang anh",
              dateReview: "Jun 10,2021",
              titleReview: "That Good",
              contentReview: "This theme is amazing!",
              rateReview: 4
  
          },
        
      ],
      },
  
  ]
  const producttypeArr  = products.map((val) => val.productType);
  var productType = producttypeArr.filter((val, idx) => {
    return idx === producttypeArr.findIndex((v) => val === v);
  });
  function renderProductType(list){
    $(".productType").empty()
      list.forEach(val =>{
        $(".productType").append(`
          <li><a class="sortAbtribute" id="${radomData_id()}">${val}</a></li>
        `)
      })
  }
  //render productType
  renderProductType(productType)
  //lay ra cac nhan brand
  const brandList = products.map((val) => val.brand);
  
  const uniqueBrandList = brandList.filter((val, idx) => {
    return idx === brandList.findIndex((v) => val === v);
  });
  //render compare title
  var newcompareList = JSON.parse(localStorage.getItem("compareList"))
  
  
  
  
  //render cac brand len nav
  //render brand
  function render(list) {
    $(".vendor").empty()
    list.forEach((val) => {
      $(".vendor").append(`
          <li><a class="sortAbtribute" id="${radomData_id()}">${chuanHoaChuoi(val.toString())}</a></li>
          `);
    });
  
  }
  render(uniqueBrandList);
  
  //render price
  const priceList = ["$10-$100","$100-$200","$200-$300","$300-$400", "$400-$500"]
  function renderPriceList(list) {
    $(".price").empty()
    list.forEach((val) => {
      $(".price").append(`
          <li><a class="sortAbtribute" id="${radomData_id()}">${chuanHoaChuoi(val.toString())}</a></li>
          `);
    });
  
  }
  renderPriceList(priceList)
  
  
  //lay ra cac san phan co thuoc tinh women
  const WomenList = products.filter((val) => val.type == "women");
  //lay ra cac san phan co thuoc tinh men
  const MenList = products.filter((val) => val.type == "men");
  //best seller
  var BestSellerProducts = [];
  BestSellerProducts = [...products]
   .sort(function (p1, p2) {
      return p2.sold - p1.sold;
    })
    .filter((val, idx) => {
      //lay top 8 sp ban nhieu nhat
      return idx < 8;
    });
  //render trendding products
  var trenddingProducts = [];
  trenddingProducts = products
    .sort(function (p1, p2) {
      return p2.Qty - p1.Qty;
    })
    .filter((val, idx) => {
      //lay top 8 sp co sl nhieu nhat trong mang
      return idx < 8;
    });
  
  ///lay pathName ra de render cho Men Hay Women
  const pathName = localStorage.getItem("pathName");
  
  if (pathName.toLowerCase() == "women") {
    $(".navigation li").find(".women").css("color", "blue"); //boi xanh nav o header
    $(".block ul").find(".fill-women").addClass("active-fillter"); //boi xanh nav o fillter
    $(".name-collection").text(pathName);
    $(".totalProWomen").text(WomenList.length);
  
    renderProducts(WomenList, ".itemList");
  } else {
    $(".navigation li").find(".men").css("color", "blue"); //boi xanh nav o header
    $(".block ul").find(".fill-men").addClass("active-fillter"); //boi xanh nav o fillter
    $(".name-collection").text(pathName);
    $(".totalProWomen").text(MenList.length);
    $(".type").text("Men");
    renderProducts(MenList, ".itemList");
  }
  
  //render star
  function renderStar(list) {
    list.forEach((val) => {
      $(`.${val.id}`).empty();
    });
    list.forEach((val) => {
      for (let i = 0; i < val.evaluate; i++) {
        $(`.${val.id}`).append(`
                 <i class="fas fa-star starActive"></i>
           `);
      }
    });
    list.forEach((val) => {
      for (let i = 0; i < 5 - val.evaluate; i++) {
        $(`.${val.id}`).append(`
        <i class="far fa-star"></i>
        `);
      }
    });
    
  }
  
  //render san pham len giao dien
  function renderProducts(list, bestSeller_list) {
    $(`${bestSeller_list}`).empty();
    list.forEach((val) => {
      const pricesale = +val.sale.slice(0, val.sale.length - 1);
  //const idRadom = radomData_id()
      if (pricesale > 0) {
        $(`${bestSeller_list}`).append(`
          <did class="col-4 col-md-4 col-sm-6">
         <div class="card" id="${val.id}">
           <div class="img">
             <span class="sale">${val.sale}</span>
             <div class="icons">
               <span class="icon_eye"><i class="far fa-eye"></i></span>
               <span class="icon_heart"><i class="far fa-heart"></i></span>
               <span class="icon_compare clickCompare compareRender" id = ${radomData_id()} data-id="${val.id}"><i data-id="${val.id}" class="las la-balance-scale icon__clickCompare" style = "font-size:22px"></i> </span>
             </div>
             <a><img src="${val.img[0]}" alt="" class="goDetails"  style="cursor: pointer;"></a>
             <div class="clock">
             <div class="clock__day">
               <span class="day"></span>
               <span>Day</span>
             </div>
             <div class="clock__hour">
               <span class="hour"></span>
               <span>Hrs</span>
             </div>
             <div class="clock__min">
               <span class="min"></span>
               <span>Min</span>
             </div>
             <div class="clock__sec">
               <span class="sec"></span>
               <span>Sec</span>
             </div>
           </div>
           </div>
           <div class="card__about">
               <p class="title"><a href="">${val.brand}</a> </p>
               <div class="card__about-start ${val.id}" ></div>
                 <p class="card__nameProduct"><a href="">${val.name}</a></p>
                 <p class="card__priceProduct"><span class="priceSlae">${TinhTienSauSale(
                   val.price,
                   pricesale
                 )}</span><span class="initiPrice">${val.price}</span></p>
  
                 <div class="addToCart" id="myBtn">
                   <a class="addtocart"  data-id="${
                     val.id
                   }"> <i class="las la-shopping-bag"></i>Add To Cart</a>
                 </div>
           </div>
       </div>
       </div>
       
         
         `);
      } else {
        $(`${bestSeller_list}`).append(`
          <did class="col-4 col-md-4 col-sm-6">
         <div class="card" id="${val.id}">
           <div class="img">
            
             <div class="icons">
               <span class="icon_eye"><i class="far fa-eye"></i></span>
               <span class="icon_heart"><i class="far fa-heart"></i></span>
               <span class="icon_compare clickCompare compareRender" id = ${radomData_id()} data-id="${val.id}"><i data-id="${val.id}" class="las la-balance-scale icon__clickCompare" style = "font-size:22px"></i></span>
             </div>
             <a><img src="${val.img[0]}" alt="" class="goDetails" style="cursor: pointer;"></a>
            
           </div>
           <div class="card__about">
                  <p class="title"><a href="">${val.brand}</a> </p>
                  <div class="card__about-start ${val.id}" ></div>
                  <p class="card__nameProduct"><a href="">${val.name}</a></p>
                  <p class="card__priceProduct">${val.price}</p>
  
                  <div class="addToCart">
                      <a class="addtocart" data-id="${val.id}"> <i class="las la-shopping-bag"></i>Add To Cart</a>
                  </div>
           </div>
       </div>
       </div>
       
         
         `);
      }
    });
  
    renderStar(list); //render star
    renderCompare(newcompareList)  
  }
  
  
  
  function renderCompare(list){
   console.log("pl");
    list.forEach(val =>{
      $(`#${val.id} .compareRender`).removeClass("icon_compare")
      $(`#${val.id} .compareRender`).addClass("active-icon_compare")
    })
  }
  
  
  /////////////////////////
  
  
  
  //su kien thay doi slect
  $("#items").change(function () {
    const changeText = $("#items").val();
    const collectionCurrent = $(".active-fillter").children("a").text();
    if (collectionCurrent.toLowerCase() == "womens") {
      if (changeText.toLowerCase() == "priceascending") {
        //sap xep theo tang gia
        WomenList.sort(function (a, b) {
          return TinhTienSort(a.price, a.sale) - TinhTienSort(b.price, b.sale);
        });
  
        $("#loading").css("display", "inline-block"); //hien loading
        $(".bcLoading").css("display", "block"); //load den man hinh
        setTimeout(function () {
         
          $("#loading").css("display", "none");
          $(".bcLoading").css("display", "none"); //load den man hinh
          renderProducts(WomenList, ".itemList"); //render lai mang
        }, 1000);
      }
      else if(changeText.toLowerCase() == "pricedecending"){
        //sap xep theo tang gia
        WomenList.sort(function (a, b) {
          return TinhTienSort(b.price, b.sale) - TinhTienSort(a.price, a.sale);
        });
  
        $("#loading").css("display", "inline-block"); //hien loading
        $(".bcLoading").css("display", "block"); //load den man hinh
        setTimeout(function () {
        
          $("#loading").css("display", "none");
          $(".bcLoading").css("display", "none"); //load den man hinh
          renderProducts(WomenList, ".itemList"); //render lai mang
        }, 1000);
      }
      else if(changeText.toLowerCase() == "bestseller"){
        //sap xep theo tang so luong ban
       const bestSellerCurrent = WomenList.sort(function (p1, p2) {return p2.sold - p1.sold;})
  
        $("#loading").css("display", "inline-block"); //hien loading
        $(".bcLoading").css("display", "block"); //load den man hinh
        setTimeout(function () {
        
          $("#loading").css("display", "none");
          $(".bcLoading").css("display", "none"); //load den man hinh
          renderProducts(bestSellerCurrent, ".itemList"); //render lai mang
        }, 1000);
      }
      else if(changeText.toLowerCase() == "featured"){
         //sap xep theo so luong sp trong kho
       const FeaturedCurrent = WomenList.sort(function (p1, p2) {return p2.Qty - p1.Qty;})
        $("#loading").css("display", "inline-block"); //hien loading
        $(".bcLoading").css("display", "block"); //load den man hinh
        setTimeout(function () {
        
          $("#loading").css("display", "none");
          $(".bcLoading").css("display", "none"); //load den man hinh
          renderProducts(FeaturedCurrent, ".itemList"); //render lai mang
        }, 1000);
      }
  
  
    }
    //dang o vi tri la MANS
    if (collectionCurrent.toLowerCase() == "mens") {
      if (changeText.toLowerCase() == "priceascending") {
        //sap xep theo tang gia
        MenList.sort(function (a, b) {
          return TinhTienSort(a.price, a.sale) - TinhTienSort(b.price, b.sale);
        });
  
        $("#loading").css("display", "inline-block"); //hien loading
        $(".bcLoading").css("display", "block"); //load den man hinh
        setTimeout(function () {
         
          $("#loading").css("display", "none");
          $(".bcLoading").css("display", "none"); //load den man hinh
          renderProducts(MenList, ".itemList"); //render lai mang
        }, 1000);
      }
      else if(changeText.toLowerCase() == "pricedecending"){
        //sap xep theo tang gia
        MenList.sort(function (a, b) {
          return TinhTienSort(b.price, b.sale) - TinhTienSort(a.price, a.sale);
        });
  
        $("#loading").css("display", "inline-block"); //hien loading
        $(".bcLoading").css("display", "block"); //load den man hinh
        setTimeout(function () {
        
          $("#loading").css("display", "none");
          $(".bcLoading").css("display", "none"); //load den man hinh
          renderProducts(MenList, ".itemList"); //render lai mang
        }, 1000);
      }
      else if(changeText.toLowerCase() == "bestseller"){
        //sap xep theo tang so luong ban
       const bestSellerCurrent__men = MenList.sort(function (p1, p2) {return p2.sold - p1.sold;})
  
        $("#loading").css("display", "inline-block"); //hien loading
        $(".bcLoading").css("display", "block"); //load den man hinh
        setTimeout(function () {
        
          $("#loading").css("display", "none");
          $(".bcLoading").css("display", "none"); //load den man hinh
          renderProducts(bestSellerCurrent__men, ".itemList"); //render lai mang
        }, 1000);
      }
      else if(changeText.toLowerCase() == "featured"){
         //sap xep theo so luong sp trong kho
       const FeaturedCurrent__men = MenList.sort(function (p1, p2) {return p2.Qty - p1.Qty;})
        $("#loading").css("display", "inline-block"); //hien loading
        $(".bcLoading").css("display", "block"); //load den man hinh
        setTimeout(function () {
        
          $("#loading").css("display", "none");
          $(".bcLoading").css("display", "none"); //load den man hinh
          renderProducts(FeaturedCurrent__men, ".itemList"); //render lai mang
        }, 1000);
      }
  
  
    }
      //dang o vi tri la Trendding
    if (collectionCurrent.toLowerCase() == "trending") {
        if (changeText.toLowerCase() == "priceascending") {
          //sap xep theo tang gia
          trenddingProducts.sort(function (a, b) {
            return TinhTienSort(a.price, a.sale) - TinhTienSort(b.price, b.sale);
          });
    
          $("#loading").css("display", "inline-block"); //hien loading
          $(".bcLoading").css("display", "block"); //load den man hinh
          setTimeout(function () {
           
            $("#loading").css("display", "none");
            $(".bcLoading").css("display", "none"); //load den man hinh
            renderProducts(trenddingProducts, ".itemList"); //render lai mang
          }, 1000);
        }
        else if(changeText.toLowerCase() == "pricedecending"){
          //sap xep theo tang gia
          trenddingProducts.sort(function (a, b) {
            return TinhTienSort(b.price, b.sale) - TinhTienSort(a.price, a.sale);
          });
    
          $("#loading").css("display", "inline-block"); //hien loading
          $(".bcLoading").css("display", "block"); //load den man hinh
          setTimeout(function () {
          
            $("#loading").css("display", "none");
            $(".bcLoading").css("display", "none"); //load den man hinh
            renderProducts(trenddingProducts, ".itemList"); //render lai mang
          }, 1000);
        }
        else if(changeText.toLowerCase() == "bestseller"){
          //sap xep theo tang so luong ban
         const trenArr__bestSeller = MenList.sort(function (p1, p2) {return p2.sold - p1.sold;})
    
          $("#loading").css("display", "inline-block"); //hien loading
          $(".bcLoading").css("display", "block"); //load den man hinh
          setTimeout(function () {
          
            $("#loading").css("display", "none");
            $(".bcLoading").css("display", "none"); //load den man hinh
            renderProducts(trenArr__bestSeller, ".itemList"); //render lai mang
          }, 1000);
        }
        else if(changeText.toLowerCase() == "featured"){
           //sap xep theo so luong sp trong kho
         const FeaturedCurrent__tren = MenList.sort(function (p1, p2) {return p2.Qty - p1.Qty;})
          $("#loading").css("display", "inline-block"); //hien loading
          $(".bcLoading").css("display", "block"); //load den man hinh
          setTimeout(function () {
          
            $("#loading").css("display", "none");
            $(".bcLoading").css("display", "none"); //load den man hinh
            renderProducts(FeaturedCurrent__tren, ".itemList"); //render lai mang
          }, 1000);
        }
    
    
      }
  
  
       //dang o vi tri la BestSeller
    if (collectionCurrent.toLowerCase() == "best seller") {
      if (changeText.toLowerCase() == "priceascending") {
        //sap xep theo tang gia
        BestSellerProducts.sort(function (a, b) {
          return TinhTienSort(a.price, a.sale) - TinhTienSort(b.price, b.sale);
        });
  
        $("#loading").css("display", "inline-block"); //hien loading
        $(".bcLoading").css("display", "block"); //load den man hinh
        setTimeout(function () {
         
          $("#loading").css("display", "none");
          $(".bcLoading").css("display", "none"); //load den man hinh
          renderProducts(BestSellerProducts, ".itemList"); //render lai mang
        }, 1000);
      }
      else if(changeText.toLowerCase() == "pricedecending"){
        //sap xep theo tang gia
        BestSellerProducts.sort(function (a, b) {
          return TinhTienSort(b.price, b.sale) - TinhTienSort(a.price, a.sale);
        });
  
        $("#loading").css("display", "inline-block"); //hien loading
        $(".bcLoading").css("display", "block"); //load den man hinh
        setTimeout(function () {
        
          $("#loading").css("display", "none");
          $(".bcLoading").css("display", "none"); //load den man hinh
          renderProducts(BestSellerProducts, ".itemList"); //render lai mang
        }, 1000);
      }
      else if(changeText.toLowerCase() == "bestseller"){
        //sap xep theo tang so luong ban
       const bestseller_ass = BestSellerProducts.sort(function (p1, p2) {return p2.sold - p1.sold;})
  
        $("#loading").css("display", "inline-block"); //hien loading
        $(".bcLoading").css("display", "block"); //load den man hinh
        setTimeout(function () {
        
          $("#loading").css("display", "none");
          $(".bcLoading").css("display", "none"); //load den man hinh
          renderProducts( bestseller_ass, ".itemList"); //render lai mang
        }, 1000);
      }
      else if(changeText.toLowerCase() == "featured"){
         //sap xep theo so luong sp con
       const FeaturedCurrent__bestSeller = BestSellerProducts.sort(function (p1, p2) {return p2.Qty - p1.Qty;})
        $("#loading").css("display", "inline-block"); //hien loading
        $(".bcLoading").css("display", "block"); //load den man hinh
        setTimeout(function () {
        
          $("#loading").css("display", "none");
          $(".bcLoading").css("display", "none"); //load den man hinh
          renderProducts(FeaturedCurrent__bestSeller, ".itemList"); //render lai mang
        }, 1000);
      }
  
  
    }
  
  
  
  
  });
  
  //su kien click vao nav FIllter
  $(".collection li").click(function (e) {
    e.preventDefault();
    $("li").removeClass("active-fillter");
    $(this).addClass("active-fillter");
    const name = $(this).text();
  
    if (
      name.toLowerCase().includes("mens") ||
      name.toLowerCase().includes("trending") ||
      name.toLowerCase().includes("best seller")
    ) {
      $(".name-collection").text($(this).text());
    }
  
    if (name.toLowerCase() == "womens") {
      $("#loading").css("display", "inline-block"); //hien loading
      $(".bcLoading").css("display", "block"); //load den man hinh
      setTimeout(function () {
        $(".totalProWomen").text(WomenList.length);
        $(".type").text("Women");
        renderProducts(WomenList, ".itemList");
        $("#loading").css("display", "none");
        $(".bcLoading").css("display", "none"); //load den man hinh
        //  location.reload();//load lai trang
      }, 1000);
      clearAllFill()//xoa shipping by
  
    }
    if (name.toLowerCase() == "mens") {
  
      $("#loading").css("display", "inline-block");
      $(".bcLoading").css("display", "block"); //load den man hinh
      setTimeout(function () {
        renderProducts(MenList, ".itemList");
        $(".type").text("Men");
        $(".totalProWomen").text(MenList.length);
        $("#loading").css("display", "none");
        $(".bcLoading").css("display", "none"); //load den man hinh
        // location.reload();//load lai trang
      }, 1000);
      clearAllFill()//xoa shipping by
   
    } else if (name.toLowerCase() == "best seller") {
      $("#loading").css("display", "inline-block");
      $(".bcLoading").css("display", "block"); //load den man hinh
      setTimeout(function () {
        renderProducts(BestSellerProducts, ".itemList");
        $(".type").text("Best Seller");
        $(".totalProWomen").text(BestSellerProducts.length);
        $("#loading").css("display", "none");
        $(".bcLoading").css("display", "none"); //load den man hinh
        // location.reload();//load lai trang
      }, 1000);
      clearAllFill()//xoa shipping by
   
    } else if (name.toLowerCase() == "trending") {
      $("#loading").css("display", "inline-block");
      $(".bcLoading").css("display", "block"); //load den man hinh
      setTimeout(function () {
        $(".type").text("Trending");
        renderProducts(trenddingProducts, ".itemList");
        $(".totalProWomen").text(trenddingProducts.length);
        $("#loading").css("display", "none");
        $(".bcLoading").css("display", "none"); //load den man hinh
      }, 1000);
      clearAllFill()//xoa shipping by
      
    }
  });
  
  //chuan hoa chuoi(viet hoa ky tu dau)
  
  function chuanHoaChuoi(String) {
    String = String.toLowerCase().split("");
    String[0] = String[0].toUpperCase();
    String = String.join("");
    return String;
  }
  
  //click de dong mo nav left
  $(".block_top").click(function (e) {
    $(this).find(".icons").toggleClass("active-icons");
  
    $(this).next().slideToggle();
  });
  
  
  
  //click vao grid thay doi khung san pham tren 1 hang
  $(".quatity-twoCol").click(function (e) { 
    e.preventDefault();
    $(".quatity-oneCol").removeClass("active-grid")
    $(".quatity-threeCol").removeClass("active-grid")
    $(".quatity-fourCol").css("opacity","0.4")
    $(this).addClass("active-grid")
    $(".itemList").children().removeClass("col-4");//remove col-4
    $(".itemList").children().removeClass("col-3");//remove col-4
    $(".itemList").children().addClass("col-6");//chuyen sang col-6
  
  });
  
  $(".quatity-threeCol").click(function (e) { 
    e.preventDefault();
    $(".quatity-oneCol").removeClass("active-grid")
    $(".quatity-twoCol").removeClass("active-grid")
    $(".quatity-fourCol").css("opacity","0.4")
    $(this).addClass("active-grid")
    $(".itemList").children().removeClass("col-6");//remove col-6
    $(".itemList").children().removeClass("col-3");//remove col-6
    
  
    $(".itemList").children().addClass("col-4");//chuyen sang col-4
  
  });
  
  $(".quatity-fourCol").click(function (e) { 
    e.preventDefault();
    $(".quatity-oneCol").removeClass("active-grid")
    $(".quatity-twoCol").removeClass("active-grid")
    $(".quatity-threeCol").removeClass("active-grid")
    $(this).css("opacity","1")
    $(".itemList").children().removeClass("col-4");//remove col-6
    $(".itemList").children().removeClass("col-6");//remove col-6
    
  
    $(".itemList").children().addClass("col-3");//chuyen sang col-4
  
  });
  
  
  
  
  
  ////////////////////////////////////////
  //click chuyen toi tran details
  
  // //click lay ra ID de xem chi tiet san pham
  // $(document).click(function (e) { 
  //   //e.preventDefault();
  //     const target = e.target
     
  //     if(target.classList.contains("goDetails")){
  //       const dataID = target.parentNode.parentNode.parentNode.id
  //       //lay ra san pham co ma la dataID
  //       const item = products.filter(val =>{
  //           return val.id==dataID
  //       })
  
  //      //dua vao localStore
      
  //      localStorage.setItem("item", JSON.stringify(item))
       
  //      window.location.href = "details.html"
  //     }
      
  // });
  
  
  
  
  
  //thuc hien click vao them gio hang
  var productCart = []; //luu tru danh sach sp trong cart
  if (localStorage.getItem("cartProduct") !== null) {
    productCart = JSON.parse(localStorage.getItem("cartProduct"));
    $(".login__cart-num").text(productCart.length); //load so luong sp trong mang len giao dien
  }
  // localStorage.removeItem("cartProduct")
  
  var uniqueproductCart = unique(productCart); //danh sach cac san pham khong trung nhau trong cart
  var numProductInCart = tanXuat(uniqueproductCart, productCart); //tan xuat xuat hien cua cac phan tu trong cart
  
  // lam xong phan them san pham vao gio hang
  $(document).click(function (e) {
    //e.preventDefault();
    const target = e.target;
    // console.log(target.classList.contains("addToCart"));
    if (target.classList.contains("addtocart")) {
      const IDcurrent = target.dataset.id;
      console.log(IDcurrent);
      const item = products.filter((val) => val.id == IDcurrent);
      productCart.push(item[0]);
  
      $(".login__cart-num").text(productCart.length); //load so luong sp trong mang len giao dien
  
      localStorage.setItem(
        "cartProduct",
        JSON.stringify(productCart.flat(Infinity))
      );
      uniqueproductCart = unique(productCart); //danh sach cac san pham khong trung nhau trong cart
      numProductInCart = tanXuat(uniqueproductCart, productCart); //tan xuat xuat hien cua cac phan tu trong cart
  
      renderCartTab(uniqueproductCart, numProductInCart);
  
      $(".login__content_cart").hide();
  
      //  mo model
      renderModel(item[0], productCart);
  
      $("#myModal").fadeIn(500);
      $("#myModal").addClass("active-model");
      document.querySelector("body").style.overflow = "hidden";
    }
  });
  
  // //render model
  function renderModel(item, listProduct) {
    $(".box").empty();
    $(".box").append(`
    <div class="row">
    <div class="col-6 col-sm-12">
      <div class="box__left">
        <div class="box__left-title">
          <i class="fas fa-check"></i><span>Added to cart successfully!</span>
        </div>
        <div class="img">
          <img src="${item.img[0]}" alt="">
          <p class="name">${item.name}</p>
          <p class="QTY">QTY: ${item.Qty}</p>
          <div class="total">Price: <span class="total-price">${
            item.price
          }</span></div>
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-12">
      <div class="box__right">
        <div class="box__right-top">
          <p class="right_acc">There are <span class="num">${
            listProduct.length
          }</span> items
           
          </p>
          <p class="right_acc">in your cart</p>
          <p class="total_right">TOTAL: <span class="box__right-money">${
            "$" + totalMoney(uniqueproductCart, numProductInCart).toFixed(2)
          }</span></p>
          
        </div>
        <div class="coutinua">
          <a href="">CONTINUA SHOPPING</a>
        </div>
        <div class="viewcart">
          <a href="cart.html">VIEW CART</a>
        </div>
        <div class="term">
        <input type="checkbox" id="checkboxColl">
        <label for="checkboxColl">I agree with the terms and conditions</label>
       
        </div>
        <div class="checkout">
          <a href="">PROCEED TO CHECKOUT</a>
        </div>
      </div>
    </div>
  </div>`);
  }
  
  //lay ra mang cac phan tu doc lap
  function unique(arr) {
    const newArr = [];
    for (let i = 0; i < arr.length; i++) {
      let bool = true;
      for (let j = i + 1; j < arr.length; j++) {
        if (arr[i].id == arr[j].id) {
          bool = false;
        }
      }
      if (bool) {
        newArr.push(arr[i]);
      }
    }
    return newArr;
  }
  
  //lay ra tan xuat xuat hien cua cac phan tu trong mang
  function tanXuat(arr1, arr2) {
    const arrCount = [];
    for (let i = 0; i < arr1.length; i++) {
      let count = 0;
      for (let j = 0; j < arr2.length; j++) {
        if (arr1[i].id == arr2[j].id) {
          count++;
        }
      }
      arrCount.push(count);
    }
    return arrCount;
  }
  
  function totalMoney(uniqueproductCart, numProductInCart) {
    var totalMoney = uniqueproductCart.reduce((acc, val, idx) => {
      const pricesale = +val.sale.slice(0, val.sale.length - 1);
      if (pricesale == 0) {
        var newMoney =
          +val.price.slice(1, -1).replace(/,/g, "") * numProductInCart[idx];
      } else {
        var newMoney =
          TinhTienSauSale(val.price, pricesale).slice(1, -1).replace(/,/g, "") *
          numProductInCart[idx];
      }
  
      return acc + newMoney;
    }, 0);
    return totalMoney;
  }
  
  function TinhTienSort(money, saleNum) {
    const newMoney = +money.slice(1, -1).replace(/,/g, "");
    const pricesale = +saleNum.toString().slice(0, saleNum.length - 1);
  
    return newMoney - (newMoney * pricesale) / 100;
  }
  
  
  
  
  
  
  
  //su kien loc SHOPPING BY
  
  
  
  const FillterName = []
  const FillterValue = []
  
  
  $(document).click(function (e) { 
   // e.preventDefault();
    const target = e.target
    if(target.classList.contains("sortAbtribute")){
           const id = target.getAttribute("id")
          const item = $(`#${id}`).text()
          const nameClass = target.parentNode.parentNode.classList.value
  
  
          FillterName.push(nameClass)
          FillterValue.push(item)
         
          //an cai vua click vao
          $(`#${id}`).hide()
  
              
          $("#loading").css("display", "inline-block"); //hien loading
         $(".bcLoading").css("display", "block"); //load den man hinh
         setTimeout(function () {
         
          $(".fillter__shopping").show()///show shopping by
          
          if( $(".collection .active-fillter a").text().toLowerCase() == "womens" ){
            showProduct(WomenList)//render product len 
          }
          else if( $(".collection .active-fillter a").text().toLowerCase() == "mens" ){
            showProduct(MenList)//render product len 
          }
          else if( $(".collection .active-fillter a").text().toLowerCase() == "trending" ){
            showProduct(trenddingProducts)//render product len 
          }
          else if( $(".collection .active-fillter a").text().toLowerCase() == "best seller" ){
            showProduct(BestSellerProducts)//render product len 
          }
        
        
          $("#loading").css("display", "none");
          $(".bcLoading").css("display", "none"); //load den man hinh
          //  location.reload();//load lai trang
        }, 500);
        renderShopping(FillterName,FillterValue)
    }
  });
  
  //click de xoa 1 phan tu fillter
  $(document).click(function (e) { 
    // e.preventDefault();
    const target = e.target
    
    if(target.classList.contains("value-fillter")){
       let item = target.parentNode.parentNode.dataset.id
     
        
      FillterValue.forEach((val,idx) =>{
        if(val.toLowerCase()==item.toLowerCase()){
          FillterName.splice(idx,1)
          FillterValue.splice(idx,1)
         
        }
      })
      if( $(".collection .active-fillter a").text().toLowerCase() == "womens" ){
        showProduct(WomenList)//render product len 
      }
      else if( $(".collection .active-fillter a").text().toLowerCase() == "mens" ){
        showProduct(MenList)//render product len 
      }
      else if( $(".collection .active-fillter a").text().toLowerCase() == "trending" ){
        showProduct(trenddingProducts)//render product len 
      }
      else if( $(".collection .active-fillter a").text().toLowerCase() == "best seller" ){
        showProduct(BestSellerProducts)//render product len 
      }
      renderShopping(FillterName,FillterValue)
     if(FillterValue.length == 0){
      clearAllFill()//neu ma khong co dieu kien lap thi render lai danh sach ban dau
     }
     }
    });
  
  
  
  // //render len SHOPPING BY
  function renderShopping(name,value){
    $(".shoppingBy").empty();
    const uniqueFillterName = name.filter((val,idx) =>{
      return idx === name.findIndex(v => val === v)
    }) 
    
    uniqueFillterName.forEach((val,idx) =>{
  
      $(".shoppingBy").append(`
      <li><span style="font-sixe:12px">${val.toUpperCase()}</span></li>
      `)
      name.forEach((v, pos) =>{
        if(val.toLowerCase() == v.toLowerCase()){
          $(".shoppingBy").append(`
          <li class="shoppingBy-item" data-id="${value[pos]}" style="margin:0px"><span class="remove__fillter">x</span><a><span class="value-fillter" class="${radomData_id()}">${value[pos]}</span></a></li>
          `)
        }
      })
    })
  }
  
  //loc san phan hien thi len man hinh
  function showProduct(list){
      var fillList = [...list];//sao chep ds san pham goc
      
      FillterName.forEach((val,idx) =>{
        //th1: vao vender
        if(val.toLowerCase() == "vendor"){
          fillList = fillList.filter(product =>{
              return product.brand.toLowerCase() == FillterValue[idx].toLowerCase()
            })
          // console.log(fillList);
            //render len sp
            renderProducts(fillList, ".itemList");
        }
        else if(val.toLowerCase() == "producttype"){
          fillList = fillList.filter(product =>{
            return product.productType.toLowerCase() == FillterValue[idx].toLowerCase()
          })
        // console.log(fillList);
          //render len sp
          renderProducts(fillList, ".itemList");
        }
        else if(val.toLowerCase() == "price"){  
          let priceList = changeMoney(FillterValue[idx])   
          console.log(priceList); 
          fillList = fillList.filter(product =>{
              return TinhTienSort(product.price, product.sale) >= priceList[0] && TinhTienSort(product.price, product.sale) <= priceList[1]
          })
  
          renderProducts(fillList, ".itemList");
        }
  
      })
  }
  
  
  
  
  //click clear all
  $(".shoppingBy-clear").click(function (e) { 
    e.preventDefault();
    clearAllFill()
  
  });
  
  function clearAllFill(){
  
    $("#loading").css("display", "inline-block"); //hien loading
    $(".bcLoading").css("display", "block"); //load den man hinh
    setTimeout(function () {
      $(".shoppingBy").empty();
      $(".fillter__shopping").hide()
      if( $(".collection .active-fillter a").text().toLowerCase() == "womens" ){
        renderProducts(WomenList, ".itemList");
      }
      else if( $(".collection .active-fillter a").text().toLowerCase() == "mens" ){
        renderProducts(MenList, ".itemList");
      }
      else if( $(".collection .active-fillter a").text().toLowerCase() == "trending" ){
        renderProducts(trenddingProducts, ".itemList");
      }
      else if( $(".collection .active-fillter a").text().toLowerCase() == "best seller" ){
        renderProducts(BestSellerProducts, ".itemList");
      }
      $("#loading").css("display", "none");
      $(".bcLoading").css("display", "none"); //load den man hinh
      //  location.reload();//load lai trang
    }, 500);
  
    FillterName.length=0;
    FillterValue.length=0;
    renderProductType(productType)
    render(uniqueBrandList);
    renderPriceList(priceList)
  }
  
    
  
  //chuyen doi tien te
  //$100-$200 => [100,200]
  
  function changeMoney(strMoney){
      let stringMoney = strMoney.split("-")
      const money = stringMoney.map(val =>{
         return +val.slice(1,val.length);
      })
      return money
  }
  // console.log(changeMoney("$100-$200"));
  
  
  //click fillter mo trong reponsive
  $(".product__reponsiveFilter").click(function (e) { 
    e.preventDefault();
    document.querySelector("body").style.overflow = 'hidden';      
     $(".reponsive-filter").show()
    // $(".reponsive-filter").addClass("active__reponsive-filter")
  });
  
  $(document).click(function (e) { 
    //e.preventDefault();
    const target = e.target
    if(e.target.classList.contains("model-nav-close") || target.classList.contains("background-reponse")){
     
      $(".reponsive-filter").hide()
      document.querySelector("body").style.overflow = 'visible';
    }
  });
  
  
  
  function radomData_id(){
    return Math.floor(Math.random() * 100000)
  }
  