/* Variables */
.btn {
  border-radius: 0 !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: bold !important;
  font-size: 12px !important;
  padding: 10px 25px !important;
  z-index: 0 !important;
  overflow: hidden !important;
  border-width: 1px !important;
  border: 1px solid black  !important;
}
.btn.btn-upper {
  text-transform: uppercase !important;
}
.btn.btn-xs {
  padding: 5px 15px !important;
  font-size: 10px !important;
}
.btn.btn-lg {
  padding: 15px 30px !important;
  font-size: 15px !important;
}
.btn.btn-full {
  width: 100%;
}
.btn.btn-style-1 {
  position: relative;
  background-color: transparent !important;
}
.btn.btn-style-1:after,
.btn.btn-style-1:before {
  position: absolute !important;
  content: "" !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.btn.btn-style-1:after {
  background-color: #FFF !important;
  z-index: -1 !important;
  transform: translateY(-100%) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1.1, 0.33, 1.02) !important;
}
.btn.btn-style-1:before {
  background-color: #0e7b9e !important;
  z-index: -2 !important;
}
.btn.btn-style-1:hover:after,
.btn.btn-style-1.actived:after {
  transform: translateY(0) !important;
}
.btn.btn-style-2 {
  position: relative !important;
  background-color: transparent !important;
}
.btn.btn-style-2:after,
.btn.btn-style-2:before {
  position: absolute !important;
  content: "" !important;
}
.btn.btn-style-2:after {
  top: 50% !important;
  left: 50% !important;
  width: 100% !important;
  height: 0 !important;
  background-color: #FFF !important;
  transform: translateX(-50%) translateY(-50%) rotate(45deg) !important;
  transition: all .3s !important;
  z-index: -1 !important;
}
.btn.btn-style-2:before {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #0e7b9e !important;
  z-index: -2 !important;
}
.btn.btn-style-2:hover:after,
.btn.btn-style-2.actived:after {
  height: 350% !important;
}
.btn.btn-style-3 {
  position: relative !important;
  background-color: transparent !important;
  overflow: hidden !important;
}
.btn.btn-style-3:after,
.btn.btn-style-3:before {
  position: absolute !important;
  content: "" !important;
}
.btn.btn-style-3:after {
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  transform: translateX(-50%) translateY(-50%) !important;
  border-radius: 50% !important;
  background-color: #0e6d8c !important;
  z-index: -1 !important;
  transition: all 0.3s cubic-bezier(0.12, 1.14, 0, 1.19) !important;
  opacity: 0;
}
.btn.btn-style-3:before {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #0e7b9e !important;
  z-index: -2 !important;
}
.btn.btn-style-3:hover:after,
.btn.btn-style-3.actived:after {
  width: 100px !important;
  height: 100px !important;
  opacity: 1 !important;
}
.btn.btn-primary {
  background-color: #0e7b9e !important;
  border: 1px solid #0e7b9e !important;
  color: #FFF !important;
  transition: background .3s, color .3s !important;
}
.btn.btn-primary:hover,
.btn.btn-primary.actived {
  background-color: #FFF !important;
  color: #0e7b9e !important;
}
.btn.btn-primary.btn-style-3:hover,
.btn.btn-primary.btn-style-3.actived {
  color: #FFF !important;
}
.btn.btn-ghost {
  background-color: #FFF !important;
  border-color: #000 !important;
  color: #000 !important;
  transition: all .3s !important;
  overflow: hidden !important;
}
.btn.btn-ghost:hover,
.btn.btn-ghost.actived {
  background-color: #0e7b9e !important;
  color: #FFF !important;
}
.btn.btn-ghost.btn-style-1:after {
  background-color: #0e7b9e !important;
}
.btn.btn-ghost.btn-style-1:before {
  background-color: #FFF !important;
}
.btn.btn-ghost.btn-style-1:hover,
.btn.btn-ghost.btn-style-1.actived {
  color: #FFF !important;
}
.btn.btn-ghost.btn-style-2:after {
  background-color: #0e7b9e !important;
}
.btn.btn-ghost.btn-style-2:before {
  background-color: #FFF !important;
}
.btn.btn-ghost.btn-style-2:hover,
.btn.btn-ghost.btn-style-2.actived {
  color: #FFF !important;
}
.btn.btn-ghost.btn-style-3:after {
  background-color: #0e7b9e !important;
}
.btn.btn-ghost.btn-style-3:before {
  background-color: #FFF !important;
}
.btn.btn-ghost.btn-style-3:hover,
.btn.btn-ghost.btn-style-3.actived {
  color: #FFF !important;
}
.btn.btn-success {
  background-color: #5cb85c !important;
  border-color: #4EA94E !important;
  color: #FFF !important;
}
.btn.btn-success:hover {
  background-color: #4EA94E !important;
}
.btn.btn-success.btn-style-1:after {
  background-color: #4EA94E !important;
}
.btn.btn-success.btn-style-1:before {
  background-color: #5cb85c !important;
}
.btn.btn-success.btn-style-1:hover,
.btn.btn-success.btn-style-1.actived {
  color: #FFF !important;
}
.btn.btn-success.btn-style-2:after {
  background-color: #4EA94E !important;
}
.btn.btn-success.btn-style-2:before {
  background-color: #5cb85c !important;
}
.btn.btn-success.btn-style-2:hover,
.btn.btn-success.btn-style-2.actived {
  color: #FFF !important;
}
.btn.btn-success.btn-style-3:after {
  background-color: #4EA94E !important;
}
.btn.btn-success.btn-style-3:before {
  background-color: #5cb85c !important;
}
.btn.btn-success.btn-style-3:hover,
.btn.btn-success.btn-style-3.actived {
  color: #FFF !important;
}
.btn.btn-info {
  background-color: #00316a !important;
  border: 1px solid #00316a !important;
  color: #FFF !important;
  transition: background .3s, color .3s !important;
}
.btn.btn-info:hover,
.btn.btn-info.actived {
  background-color: #FFF !important;
  color: #00316a !important;
}
.btn.btn-info.btn-style-1:before {
  background-color: #00316a !important;
}
.btn.btn-info.btn-style-2:before {
  background-color: #00316a !important;
}
.btn.btn-info.btn-style-3:before {
  background-color: #00316a !important;
}
.btn.btn-info.btn-style-3:after {
  background-color: black !important;
}
.btn.btn-info.btn-style-3:hover,
.btn.btn-info.btn-style-3.actived {
  color: #FFF !important;
}
.btn.btn-info.btn-border {
  border: 1px solid #FFF !important;
}
.btn.btn-transparent {
  background-color: transparent !important;
  border: 1px solid #0e7b9e !important;
  color: #0e7b9e !important;
  transition: background .3s, color .3s !important;
  /* ko co style 2, 3 cho transparent*/
}
.btn.btn-transparent:hover,
.btn.btn-transparent.actived {
  background-color: #FFF !important;
  color: #0e7b9e !important;
}
.btn.btn-transparent.btn-style-1:before {
  background-color: transparent !important;
}
.btn.btn-transparent.btn-style-1:hover,
.btn.btn-transparent.btn-style-1.actived {
  color: #0e7b9e !important;
}
.btn.btn-transparent.white {
  border: 1px solid #FFF !important;
  color: #FFF !important;
}
.btn.btn-transparent.white:hover,
.btn.btn-transparent.white.actived {
  background-color: #FFF !important;
  color: #0e7b9e !important;
  border: 1px solid #0e7b9e !important;
}
.btn.btn-transparent.white.btn-style-1:hover,
.btn.btn-transparent.white.btn-style-1.actived {
  color: #0e7b9e !important;
}
.btn.btn-transparent.white.btn-style-1:before {
  background-color: transparent !important;
}
.btn.btn-transparent.black {
  border: 1px solid #000 !important;
  color: #000 !important;
}
.btn.btn-transparent.black:hover,
.btn.btn-transparent.black.actived {
  background-color: #FFF !important;
  color: #0e7b9e !important;
  border: 1px solid #0e7b9e !important;
}
.btn.btn-transparent.black.btn-style-1:hover,
.btn.btn-transparent.black.btn-style-1.actived {
  color: #0e7b9e !important;
}
.btn.btn-transparent.black.btn-style-1:before {
  background-color: transparent !important;
}