@charset "UTF-8";
/*

Sample html:
<div class="main-products-loop">
  <div class="flash-sale-container">
    <span class="flash-sale-text">
      Flash Sale trong <span class="flash-sale-countdown" data-start="1673629200" data-end="1673888400">02 ngày 08 giờ 04 phút 11 giây</span>
    </span>
  </div>
</div>

Make flash-sale-container distintive from other elements on the page with dashed border and different background color
Accent color: #f15e24, #f4ece8
Elements inside are modern looking with bold font and accent color
If elements inside a container with main-products-loop class, the design is simpler and smaller to avoid too much distraction

*/
.flash-sale-container {
  border: 1px dashed #f15e24;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

.flash-sale-text {
  font-weight: bold;
  font-size: 1.5em;
  color: #f15e24;
}

.flash-sale-countdown {
  font-weight: bold;
  font-size: 1.2em;
  color: #f15e24;
}

.main-products-loop .flash-sale-container,
.flash-sale-products .flash-sale-container,
.products-loop .flash-sale-container {
  border: none;
  background-color: transparent;
  padding: 0;
  margin-bottom: 0;
}

.main-products-loop .flash-sale-text,
.flash-sale-products .flash-sale-text,
.products-loop .flash-sale-text {
  font-weight: normal;
  font-size: 1em;
  color: #474747;
}

.main-products-loop .flash-sale-countdown,
.flash-sale-products .flash-sale-countdown,
.products-loop .flash-sale-countdown {
  font-weight: normal;
  font-size: 1em;
  color: #f15e24;
}

.flash-sale-products {
  margin-bottom: 30px;
}

.flash-sale-products h3 {
  /* align title to center and make bigger, all caps */
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  color: #f15e24;
  text-transform: uppercase;
}
/*# sourceMappingURL=flash-sale-countdown.css.map */