body {
  font-family: Inter;
  font-weight: 400;
  font-style: normal;
  background: white;
  color: #000000;
}

img {
  display: inline-block;
}

figure img {
  display: inline-block;
}

figure.image {
  margin-bottom: 24px;
}

.duan-item img:hover,
.news-item img:hover,
.linhvuc-item img:hover,
.n-article-item img:hover,
.tienich-item img:hover,
.tintuc-item img:hover,
.article-item img:hover,
.article img:hover {
  transform: scale(1.05);
  transition: all 150ms ease;
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 0px;
}

input::placeholder,
textarea::placeholder {
  color: #000;
  /* Màu chữ placeholder */
  opacity: 1;
  /* Độ mờ */
}

p {
  margin-bottom: 16px;
}

#special-menu.sticky {
  position: sticky;
  top: 85px;
  z-index: 998;
}

@media(max-width:1280px) {
  #special-menu.sticky {
    top: 65px;
  }
}

#special-logo {
  top: 20px;
  transition: transform 0.3s ease;
  /* Thêm chuyển tiếp cho hiệu ứng */
}

@media(max-width:1280px) {
  #special-logo {
    top: 8px;
  }
}

#special-logo.active {
  top: 8px;
}

#special-border-1,
#special-border-2 {
  transition: all 0.3s ease;
}

#company-name-mb {
  display: none;
}

@media(max-width:1280px) {
  #company-name-mb.active {
    display: inline;
  }
}

.language:hover {
  cursor: pointer;
}

.language.active {
  background: #f7c290d7;
}

@media (max-width:1280px) {
  .language.active {
    background: #faf590cc;
  }

}

/* Custom Iframe video*/
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* Tỷ lệ khung hình 16:9 */
  height: 0;
  border-radius: 12px;
  overflow: hidden;
}

.video-detail-page.video-container {
  aspect-ratio: 16/9;
  overflow: hidden;
  max-height: 300px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.svg-linhvuc {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.icon-tuyendung {
  width: 85px;
  height: 72px;
  flex-shrink: 0;
}

.card-item:hover .svg-linhvuc,
.card-item:hover .icon-tuyendung {
  filter: brightness(0) invert(1);
}


.icon-map {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.btn-icon-map:hover .icon-map {
  filter: brightness(0) saturate(100%) invert(22%) sepia(95%) saturate(751%) hue-rotate(358deg) brightness(103%) contrast(99%);
}

/* Menu giới thiệu */
.tab-item:hover,
.tab-item.active {
  background: #FEF200;
  color: #813F03;
  cursor: pointer;

}

.tab-item .tab-icon {
  max-width: 22px;
  max-height: 26px;
}

.tab-item:hover .tab-icon,
.tab-item.active .tab-icon {
  filter: brightness(0) saturate(100%) invert(22%) sepia(95%) saturate(751%) hue-rotate(358deg) brightness(103%) contrast(99%);
}

/* Custom SWiper */
.lichsu-button-next,
.lichsu-button-prev,
.giaithuong-button-next,
.giaithuong-button-prev,
.hinhanh-button-next,
.hinhanh-button-prev,
.video-button-next,
.video-button-prev {
  position: absolute;
  top: 40%;
  border: 1px solid #EFDA93;
  border-radius: 100%;
  height: 36px;
  width: 36px;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .lichsu-button-next:hover,
.lichsu-button-prev:hover,
.giaithuong-button-next:hover,
.giaithuong-button-prev:hover{
  background-color: #FEF200;
} */

.giaithuong-button-next,
.lichsu-button-next,
.hinhanh-button-next,
.video-button-next {
  right: -50px;
}

.giaithuong-button-prev,
.lichsu-button-prev,
.hinhanh-button-prev,
.video-button-prev {
  left: -50px;
  transform: rotate(180deg);

}

@media (max-width:1280px) {

  .lichsu-button-next,
  .lichsu-button-prev,
  .giaithuong-button-next,
  .giaithuong-button-prev,
  .hinhanh-button-next,
  .hinhanh-button-prev,
  .video-button-next,
  .video-button-prev {
    display: none;
  }
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  top: 105%;
}

.swiper-pagination-bullet {
  background: white;
  border: 1px solid #813F03;
}

.swiper-pagination-bullet-active {
  background: #813F03;
  border: 1px solid #813F03;
}

.swiper-custom .swiper-button-next,
.swiper-custom .swiper-button-prev {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  border: 1px solid #FEF200;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-custom .swiper-button-next:hover,
.swiper-custom .swiper-button-prev:hover {
  background: #fef10041;
}

.swiper-custom .swiper-button-next::after,
.swiper-custom .swiper-button-prev::after {
  content: "";
}

.swiper-custom .swiper-button-next {
  transform: rotate(180deg);
}


@media (min-width: 980px) {

  .swiper-custom .swiper-button-next,
  .swiper-custom .swiper-button-prev {
    width: 40px;
    height: 40px;
  }

  .swiper-custom .swiper-button-prev {
    left: 50px;
  }

  .swiper-custom .swiper-button-next {
    right: 50px;
  }

}

.swiper-custom-2 .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
}

.swiper-custom-2.swiper-khachhang .swiper-slide {
  background: white;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  border: 1px solid #E2E2E2;
  aspect-ratio: 8/5;
  width: 100%;
}


/* Custom Select box */
.select-box,
.select-box2 {
  position: relative;
  display: block;
  width: 100%;
}


.select-box__current,
.select-box__current2 {
  position: relative;
  border: 1px solid #813F03;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
}

.select-box__current:focus,
.select-box__current2:focus {
  &+.select-box__list {
    opacity: 1;
    animation-name: none;

    .select-box__option {
      cursor: pointer;
    }
  }

  .select-box__icon,
  .select-box__icon2 {
    transform: translateY(-50%) rotate(180deg);
  }
}

.select-box__icon,
.select-box__icon2 {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 12px;
  transition: 0.2s ease;
}

.select-box__value,
.select-box__value2 {
  display: flex;
}

.select-box__input,
.select-box__input2 {
  display: none;
}

.select-box__input:checked+.select-box__input-text,
.select-box__input2:checked+.select-box__input-text2 {
  display: block;
}

.select-box__input-text,
.select-box__input-text2 {
  display: none;
  width: 100%;
  margin: 0;
  padding: 12px 15px;
  background-color: #fff;
}

.select-box__list,
.select-box__list2 {
  position: absolute;
  z-index: 999;
  width: 100%;
  padding: 0;
  list-style: none;
  opacity: 0;
  animation-name: HideList;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: step-start;
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.9);
}

.select-box__option,
.select-box__option2 {
  display: block;
  padding: 15px;
  background-color: #fff;
}

.select-box__option:hover,
.select-box__option:focus,
.select-box__option2:hover,
.select-box__option2:focus {
  color: #546c84;
  background-color: #fbfbfb;
}

@keyframes HideList {
  from {
    transform: scaleY(1);
  }

  to {
    transform: scaleY(0);
  }
}

.shadow-custom {
  box-shadow: 0 4px 8px rgba(167, 166, 166, 0.1),
    0 -4px 8px rgba(167, 166, 166, 0.1),
    4px 0 8px rgba(167, 166, 166, 0.1),
    -4px 0 8px rgba(167, 166, 166, 0.1);
}

.shadow-custom-2 {
  box-shadow: 0 8px 16px rgba(167, 166, 166, 0.1),
    0 -8px 16px rgba(167, 166, 166, 0.1),
    8px 0 16px rgba(167, 166, 166, 0.1),
    -8px 0 16px rgba(167, 166, 166, 0.1);
}

/* Humberger button */

#humberger {
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#humberger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 52%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 24%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#humberger span:nth-child(1) {
  top: 14px;
}

#humberger span:nth-child(2) {
  top: 19px;
  opacity: 1;
}

#humberger span:nth-child(3) {
  top: 24px;
}

#humberger.open span:nth-child(1) {
  top: 19px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#humberger.open span:nth-child(2) {
  opacity: 0;
  left: -10px;
}

#humberger.open span:nth-child(3) {
  top: 19px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.mb-sidebar {
  transition: all 0.25s ease-in;
  /* display: none; */
  right: 200vw;
  position: fixed;
  top: 66px;
  width: 100vw;
  background: #813F03;
  height: 100vh;
  z-index: 999;
}

.mb-sidebar.open {
  right: 0;
  display: block;
  padding: 36px 20px;
}

/* custom collapse */
.collapse {
  border-radius: 0;
}

.collapse-title,
:where(.collapse > input[type="checkbox"]),
:where(.collapse > input[type="radio"]) {
  padding: 0;
  min-height: 2.5rem;
}

.collapse-arrow>.collapse-title:after {
  top: 1rem;
}

.collapse-content {
  padding-left: 12px;
  padding-right: 0;
}

.collapse[open]> :where(.collapse-content),
.collapse-open> :where(.collapse-content),
.collapse:focus:not(.collapse-close)> :where(.collapse-content),
.collapse:not(.collapse-close)> :where(input[type="checkbox"]:checked ~ .collapse-content),
.collapse:not(.collapse-close)> :where(input[type="radio"]:checked ~ .collapse-content) {
  padding-bottom: 0;
}

.collapse-title {
  font-size: 18px;
}

.collapse-title.submenu-mb {
  font-size: 16px;
}

.collapse.collapse-arrow input[type="checkbox"] {
  margin-left: 80vw;
}

.anhMaps {
  display: block;
  overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: 8px;
}

.anhMaps img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.anhMaps iframe {
  width: inherit;
}

.triagle {
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.tuyendung-card-info {
  color: #666;
  margin-top: 24px;
  padding-left: 12px;
}

.tuyendung-card-info span {
  color: #000;
}

.tuyendung-card-info li {
  position: relative;
}

.tuyendung-card-info li::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid #813F03;
  background: white;
  border-radius: 100%;
  top: 6px;
  left: -14px;
}

.card-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: all 300ms ease-in-out;
}

.card-item:hover {
  justify-content: flex-end;
  background: transparent;
  cursor: pointer;

}

@media (max-width:1280px) {
  .card-item:hover {
    justify-content: flex-start;

  }
}

.card-linear {
  background-image: linear-gradient(to bottom, transparent, #5f300565);
}

.card-item:hover svg path {
  fill: white;
}

.card-title {
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  color: #813F03;
}

.card-description {
  font-size: 15px;
}

.card-detail {
  font-size: 17px;
  height: auto;
  opacity: 1;
  transition: all 300ms linear;
}

.card-item:hover div {
  color: white;
}

.card-item:hover .card-detail {
  height: 0;
  opacity: 0;

}

.btn-see-all {
  /* flex bg-[#813F03] rounded-3xl w-[172px] h-10 px-3 gap-3 justify-center items-center text-white hover:text-[#813F03] hover:bg-[#FEF200]  */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #813F03;
  border-radius: 24px;
  width: 172px;
  height: 40px;
  padding: 0 12px;
  gap: 12px;
  color: white;
}

.icon-btn-see-all {
  width: 6px;
  height: 10px;
  background-image: url(../img/icon-arrow-white.png);
  transform: rotate(180deg);
  flex-shrink: 0;
}

.btn-see-all:hover {
  color: #813F03;
  background: #FEF200;
}

.btn-see-all:hover .icon-btn-see-all {
  background-image: url(../img/icon-arrow-brown.png);
  transform: rotate(0deg);
}

.btn-detail {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #813F03;
  border-radius: 21px;
  width: 40px;
  height: 40px;
  transition: all 300ms ease-in-out;
  overflow: hidden;

}

.btn-detail span {
  display: none;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 300ms ease-in-out 290ms;
  white-space: nowrap;
}

.card-item:hover .btn-detail {
  margin-top: 22px;
  background: #FEF200;
  border: 1px solid #FEF200;
  width: 150px;
  justify-content: space-between;
  border-radius: 21px;
  padding: 0 20px;

}

.card-item:hover .btn-detail span {
  display: inline-block;
  width: auto;
  opacity: 1;
  color: #813F03;
}

.news-item {
  position: relative;
}

.news-item::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid #E3BB97;
  background: #FFF5EC;
  border-radius: 100%;
  left: -16px;
  z-index: 10;
  top: 0;
}

.col2-item {
  position: relative;
}

.col2-item::after {
  content: "";
  position: absolute;
  height: 6px;
  width: 6px;
  border: 1px solid #FEF200;
  transform: rotate(45deg);
  top: 8px;
  left: -14px;
}

.col2-item:hover.col2-item::after {
  background: #FEF200;
}

.mxh-item {
  transition: all 200ms linear;
  transform: scale(100%);
  max-height: 18px;
}

.mxh-item:hover svg path {
  fill: #FEF200;
}

.mxh-item:hover {
  transform: scale(110%);
}

/* Breadscrum */
.breadscrum img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(26%) saturate(0%) hue-rotate(63deg) brightness(94%) contrast(88%);
}

.breadscrum img:hover {
  filter: brightness(0) saturate(100%) invert(23%) sepia(92%) saturate(786%) hue-rotate(359deg) brightness(100%) contrast(99%);
}

.breadscrum-item:hover {
  color: #813F03;
}

.breadscrum-item::before {
  position: absolute;
  content: "";
  background: url(../img/icon-arrow-right-black.png) center 100% no-repeat;
  top: 3px;
  left: -15px;
  width: 6px;
  height: 9px;
  filter: brightness(0) saturate(100%) invert(48%) sepia(26%) saturate(0%) hue-rotate(63deg) brightness(94%) contrast(88%);
}

@media(max-width:980px) {
  .breadscrum-item::before {
    left: -10px;
    top: 3px;
    width: 6px;
    height: 9px;
  }
}

/* Các nút ở bài chi tiết */
/* px-3 py-1.5 h-6 flex gap-1.5 items-center rounded-sm bg-[#f7f7f7] hover:bg-[#FEF200] hover:text-[#813F03] */
.btn-tacvu {
  padding: 6px 12px;
  height: 24px;
  display: flex;
  gap: 6px;
  align-items: center;
  border-radius: 0.125rem;
  background-color: #f7f7f7;
}

.btn-tacvu:hover {
  color: #813F03;
}

/* flex  bg-[#813F03] rounded-3xl w-[166px] h-10 px-3 gap-3 justify-center items-center text-white text-[14px] */
/* flex shrink-0  border border-[#813F03] rounded-3xl w-[186px] h-10 px-3 gap-3 justify-center items-center text-[#813F03] text-[14px] */
.btn-duan-seeall {
  display: flex;
  background: #813F03;
  border-radius: 1.5rem;
  height: 40px;
  padding: 0 12px;
  gap: 8px;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 14px;
}

.btn-duan-seeall:hover {
  border: 1px solid #813F03;
  color: #813F03;
  background: white;
}

.btn-duan-seeall:hover img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(92%) saturate(786%) hue-rotate(359deg) brightness(100%) contrast(99%);
}

/* Phân trang */
.paging.SplitPages {
  display: flex;
  gap: 8px;
}

.paging.SplitPages a {
  border: 1px solid rgb(223, 222, 222);
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.paging.SplitPages a:hover,
.paging.SplitPages a.hientai {
  color: white;
  background: #813F03;
  filter: brightness(0.9);
}

.paging.SplitPages a.dau {
  background: url(../img/icon-arrow-pre2.png) no-repeat center;
}

.paging.SplitPages a.truoc {
  background: url(../img/icon-arrow-pre1.png) no-repeat center;
}

.paging.SplitPages a.sau {
  background: url(../img/icon-arrow-pre1.png) no-repeat center;
  transform: rotate(180deg);
}

.paging.SplitPages a.cuoi {
  background: url(../img/icon-arrow-pre2.png) no-repeat center;
  transform: rotate(180deg);
}

/* animation ring phone */

.coccoc-alo-ph-circle {
  width: 80px;
  height: 80px;
  top: -20px;
  left: -20px;
  position: absolute;
  background-color: transparent;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid rgba(30, 30, 30, 0.4);
  opacity: 0.1;
  -webkit-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
  -moz-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
  -ms-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
  -o-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
  animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.coccoc-alo-phone {
  background-color: transparent;
  position: relative;
  cursor: pointer;
  z-index: 200000 !important;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -webkit-transition: visibility 0.5s;
  -moz-transition: visibility 0.5s;
  -o-transition: visibility 0.5s;
  transition: visibility 0.5s;
}

.coccoc-alo-phone.coccoc-alo-red .coccoc-alo-ph-circle-fill {
  background-color: rgba(255, 65, 65, 0.5);
  opacity: 0.75 !important;
}

.coccoc-alo-ph-circle-fill {
  width: 50px;
  height: 50px;
  top: -5px;
  left: -5px;
  position: absolute;
  background-color: #000;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: 0.1;
  -webkit-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -moz-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -ms-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -o-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
  animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.coccoc-alo-ph-img-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: rgba(30, 30, 30, 0.1) url(https://drive.google.com/uc?id=1V3N2b79QjDWetC_ss9wI3c-xpWDymn9R) no-repeat center center;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: 0.7;
  -webkit-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
  -moz-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
  -ms-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
  -o-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
  animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
}

.coccoc-alo-phone.coccoc-alo-red .coccoc-alo-ph-img-circle {
  background-color: #d93536;
}

.coccoc-alo-phone.coccoc-alo-red .coccoc-alo-ph-circle {
  border-color: #d93536;
  opacity: 0.5;
}

.coccoc-alo-phone.coccoc-alo-red.coccoc-alo-hover .coccoc-alo-ph-circle,
.coccoc-alo-phone.coccoc-alo-red:hover .coccoc-alo-ph-circle {
  border-color: #d93536;
  opacity: 0.5;
}

.coccoc-alo-phone.coccoc-alo-red.coccoc-alo-hover .coccoc-alo-ph-circle-fill,
.coccoc-alo-phone.coccoc-alo-red:hover .coccoc-alo-ph-circle-fill {
  background-color: rgba(230, 44, 44, 0.5);
  opacity: 0.75 !important;
}

.coccoc-alo-phone.coccoc-alo-red.coccoc-alo-hover .coccoc-alo-ph-img-circle,
.coccoc-alo-phone.coccoc-alo-red:hover .coccoc-alo-ph-img-circle {
  background-color: #d93536;
}

@media (max-width: 1280px) {
  .coccoc-alo-ph-circle {
    width: 60px;
    height: 60px;
    top: -14px;
    left: -14px;
  }

  .coccoc-alo-ph-circle-fill {
    width: 40px;
    height: 40px;
    top: -4px;
    left: -4px;
  }

  .coccoc-alo-ph-img-circle {
    width: 32px;
    height: 32px;
  }
}

@-moz-keyframes coccoc-alo-circle-anim {
  0% {
    transform: rotate(0) scale(0.5) skew(1deg);
    opacity: 0.1;
  }

  30% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.5;
  }

  100% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.1;
  }
}

@-webkit-keyframes coccoc-alo-circle-anim {
  0% {
    transform: rotate(0) scale(0.5) skew(1deg);
    opacity: 0.1;
  }

  30% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.5;
  }

  100% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.1;
  }
}

@-o-keyframes coccoc-alo-circle-anim {
  0% {
    transform: rotate(0) scale(0.5) skew(1deg);
    opacity: 0.1;
  }

  30% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.5;
  }

  100% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.1;
  }
}

@keyframes coccoc-alo-circle-anim {
  0% {
    transform: rotate(0) scale(0.5) skew(1deg);
    opacity: 0.1;
  }

  30% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.5;
  }

  100% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.1;
  }
}

@-moz-keyframes coccoc-alo-circle-fill-anim {
  0% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }

  50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.2;
  }

  100% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

@-webkit-keyframes coccoc-alo-circle-fill-anim {
  0% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }

  50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.2;
  }

  100% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

@-o-keyframes coccoc-alo-circle-fill-anim {
  0% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }

  50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.2;
  }

  100% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

@keyframes coccoc-alo-circle-fill-anim {
  0% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }

  50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.2;
  }

  100% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

@-moz-keyframes coccoc-alo-circle-img-anim {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }

  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }

  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }

  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }

  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }

  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }

  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}

@-webkit-keyframes coccoc-alo-circle-img-anim {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }

  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }

  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }

  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }

  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }

  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }

  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}

@-o-keyframes coccoc-alo-circle-img-anim {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }

  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }

  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }

  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }

  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }

  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }

  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}

@keyframes coccoc-alo-circle-img-anim {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }

  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }

  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }

  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }

  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }

  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }

  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}