:root {
    --mau-nen: rgba(255,255,255);
    --mau-td: #333333;
    --mau-td-revert: #eeeeee;
    --mau-icon: #333333;
    --boxshadow: #eeeeee;
    --mau-trending: #171818;
    --mau-drop: rgb(255,255,255);
    --mau-hover-drop: #d4d4d444;
    --mau-boder-item: #adadad;
    --mau-menu: #eeeeee;
    --mau-hint: #999999;
    --mau-gray: #6C6C6C;
    --mau-spot-head: #f7f7f7;
    --time-transition: .2s ease;
    --layer: 2022;
}

.color-md {
  color: var(--mau-md) !important;
}

.w-1200 {
  max-width: 1200px;
  width: 100%;
}
.w-1300 {
    max-width: 1200px;
    width: 100%;
}

.w-1920 {
    max-width: 1920px;
    width: 100%;
}

.color-white {
  color: white;
}

.a-simple {
  text-decoration: none;
  color: inherit;
}

.a-simple:hover {
  color: inherit;
}

@keyframes slideRight {
  from {
    left: -100%;
  }
  to {
    left: 0px;
  }
}

.obj-fit {
  object-fit: cover;
}

.center-all {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.anim-title {
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0)), linear-gradient(to right, var(--mau-td), var(--mau-td), var(--mau-td));
  background-size: 100% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  text-decoration: none;
}

.anim-title:hover {
 /* background-size: 0 2px, 100% 2px;*/
  color: var(--mau-td);
}

.anim-title-white {
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0)), linear-gradient(to right, white, white, white);
  background-size: 100% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  text-decoration: none;
}

.anim-title-white:hover {
 /* background-size: 0 2px, 100% 2px;*/
  color: white;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.color-white {
  color: white !important;
}

.button-simple:focus, .button-simple, .button-simple:focus, .button-simple:active {
  box-shadow: none !important;
  border: none;
}

.input-simple {
  border-radius: 5px;
  height: 36px;
/*  border-style: solid;
  border-color: var(--mau-md);*/
}

.input-simple:focus {
  border-style: solid;
  border-color: var(--mau-md);
  box-shadow: none;
}

.item-zoom-image, .item-zoom-image img {
  overflow: hidden;
  transition: var(--time-transition);
  transform: scale(1);
  filter: brightness(100%);
}

.item-zoom-image:hover img {
  transform: scale(1.1);
  filter: brightness(60%);
}

.toggle_background {
  background-repeat: no-repeat !important;
  background-position: 100% 100% !important;
  background-size: 100% 0% !important;
  transition: .3s ease;
}

.toggle_background:hover {
  background-size: 100% 100% !important;
}

.color_white_hover:hover {
  color: white;
}

.center-ngang {
  display: flex;
  align-items: center;
}

.center-doc {
  display: flex;
  justify-content: center;
}