/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/modules/client/common/styles/common.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.animate-jumpIn {
    animation: jumpIn 0.5s ease-out forwards;
}

.animate-jumpOut {
    animation: jumpOut 0.5s ease-in forwards;
}

.animate-gradient-x{
  background-size: 200% auto;
  animation: animateBg 2s infinite linear;
}

.animate-bg{
  position: relative;
  color: #fff;
  cursor: pointer;
  line-height: 28px;
  border-radius: 20px;
  width: 166px;
  text-align: center;
  background: repeating-linear-gradient(to right, red 0, #00f 50%, red 100%);
  background-size: 200% auto;
  animation: gradient 2s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.danh-muc-title{
  background-color: #fff;
  border-radius: 6px;
  line-height: 40px;
  font-weight: 700;
  font-size: 16px;
  color: #0090d0;
  margin: 0;
  width: 230px;
  margin-right: 12px;
  cursor: pointer;
}

.discount-text{
  font-weight: 700;
  background: url('/image/discount-background.png') no-repeat;
  background-position: center;
  color: #fff;
  z-index: 1;
  text-align: center;
  line-height: 26px;
}

@keyframes jumpOut {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    30% {
      transform: scale(1.05);
      opacity: 1;
    }
    100% {
      transform: scale(0.5);
      opacity: 0;
    }
}

@keyframes jumpIn {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }
    70% {
      transform: scale(1.05);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
}

@keyframes gradient {
  0%{
    background-position: 0% 0% ;
  }
  100%{
    background-position: -200% 0%;
  }
}