/* Ẩn các phần tử khi chưa có class active */
.contentbody-items-left > img {
  opacity: 0;
  transform: translateX(-500px);
}

.contentbody-items-right > img {
  opacity: 0;
  transform: translateX(500px);
}

.contentbody-items-left > h1,
.contentbody-items-left > p,
.contentbody-items-right > h1,
.contentbody-items-right > p {
  opacity: 0;
  transform: translateY(-50px);
}

.header-2 {
  opacity: 0;
  transform: translateY(-50px);
}

.title,
.sub-title {
  opacity: 0;
  transform: translateY(-50px);
}

.content-container > .sub-content-container > .img-back {
  opacity: 0;
  transform: translateX(-500px);
}

.content-container > .sub-content-container > .img-front {
  opacity: 0;
  transform: translateX(500px);
}

.container {
  opacity: 0;
  transform: translateY(500px);
}

.container-1 > .title-1,
.container-1 > .title-2 {
  opacity: 0;
  transform: translateY(-50px);
}

.khung-4 > .items > img {
  opacity: 0;
  transform: translateY(-50px);
}

.khung-4 > .items > .container-2 {
  opacity: 0;
  transform: translateY(500px);
}

.khung-5 > .k5-container .items h2,
.khung-5 > .k5-container .items > img {
  opacity: 0;
  transform: translateY(-50px);
}

.khung-5 > .k5-container .items .btn,
.khung-5 > .k5-container .items p,
.khung-5 > .k5-container .items .border {
  opacity: 0;
  transform: translateY(500px);
}

.khung-6 {
  opacity: 0;
  transform: scale(0.7);
}

.khung-6 .items:nth-child(1),
.khung-6 .items:nth-child(2) {
  opacity: 0;
  transform: translateY(-50px);
}

.khung-6 > .items > .up {
  opacity: 0;
  transform: translateY(500px);
}

.khung-7 .k7-container .k7-title-section h2 {
  opacity: 0;
  transform: scale(0.7);
}

.khung-7 .k7-container .k7-content-section > .img-col.col-left .deco-group-1,
.khung-7 .k7-container .k7-title-section .deco-group-1 {
  opacity: 0;
  transform: translateX(-500px);
}

.khung-7 .k7-container .k7-content-section > .img-col.col-right .deco-group-2,
.khung-7 .k7-container .k7-title-section .deco-group-2 {
  opacity: 0;
  transform: translateX(500px);
}

.khung-7 .k7-container .k7-content-section .col-left {
  opacity: 0;
  transform: translateX(-500px);
}

.khung-7 .k7-container .k7-content-section .col-right {
  opacity: 0;
  transform: translateX(500px);
}

.khung-7 .k7-container .k7-content-section .img-col.col-center {
  opacity: 0;
  transform: translateY(-50px);
}

.khung-7 .k7-container .k7-content-section .overlay-box {
  opacity: 0;
  transform: translateY(500px);
}

.frame-8-card-container,
.frame-8-header {
  opacity: 0;
  transform: translateY(-50px);
}

.khung-9 {
  opacity: 0;
  transform: translateY(500px);
}

.khung-10 {
  opacity: 0;
  transform: translateY(-50px);
}

.khung-10 .items {
  opacity: 0;
  transform: translateY(-50px);
}

.khung-10 .items > span {
  opacity: 0;
  transform: translateY(-50px);
}

.khung-11 .items .title,
.khung-11 .items .sub-title,
.khung-11 .items .content,
.khung-11 .items:nth-child(2) img {
  opacity: 0;
  transform: translateY(-50px);
}

.khung-12 .items .header .title,
.khung-12 .items .header .sub-title,
.khung-12 .items .deco,
.khung-12 .items p {
  opacity: 0;
  transform: translateY(-50px);
}

.khung-13 .group-left,
.khung-13 .group-right {
  opacity: 0;
  transform: translateY(-50px);
  clip-path: inset(0 0 100% 0);
}

.khung-14 .items {
  opacity: 0;
  transform: translateY(-50px);
}

.khung-15 .left,
.khung-15 .center,
.khung-15 .right {
  opacity: 0;
  transform: translateY(-50px);
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-1200px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(500px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-500px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(500px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}




.header > .header-items1 {
  opacity: 0;
  animation: slideDown 1s ease-out forwards;
}

.content > img {
  opacity: 0;
  animation: slideDown 1s ease-out forwards;
}

.content-items .img-1 {
  opacity: 0;
  animation: slideDown 1s ease-out forwards;
}

.content-items .img-2 {
  opacity: 0;
  animation: slideUp 1.5s ease-out forwards;
}

.contentbody-items-left.active > img {
  opacity: 0;
  animation: slideInLeft 1.5s ease-out forwards;
}

.contentbody-items-right.active > img {
  opacity: 0;
  animation: slideInRight 1.5s ease-out forwards;
}

.contentbody-items-left.active > h1,
.contentbody-items-left.active > p {
  opacity: 0;
  animation: slideDown 1.5s ease-out forwards;
}

.contentbody-items-right.active > h1,
.contentbody-items-right.active > p {
  opacity: 0;
  animation: slideDown 1.5s ease-out forwards;
}

.header-2.active {
  opacity: 0;
  animation: slideDown 1.5s ease-out forwards;
}

.title.active,
.sub-title.active {
  opacity: 0;
  animation: slideDown 1.3s ease-out forwards;
}

.content-container.active > .sub-content-container > .img-back {
  opacity: 0;
  animation: slideInLeft 1.3s ease-out forwards;
}

.content-container.active > .sub-content-container > .img-front {
  opacity: 0;
  animation: slideInRight 1.3s ease-out forwards;
}

.container.active {
  opacity: 0;
  animation: slideUp 1.5s ease-out forwards;
}

.container-1.active > .title-1 {
  opacity: 0;
  animation: slideDown 1.3s ease-out forwards;
}

.container-1.active > .title-2 {
  opacity: 0;
  animation: slideDown 1.5s ease-out forwards;
}

.khung-4.active > .items > img {
  opacity: 0;
  animation: slideDown 1.5s ease-out forwards;
}

.khung-4.active > .items > .container-2 {
  opacity: 0;
  animation: slideUp 1.5s ease-out forwards;
}

.khung-5.active > .k5-container .items h2,
.khung-5.active > .k5-container .items > img {
  opacity: 0;
  animation: slideDown 1.5s ease-out forwards;
}

.khung-5.active > .k5-container .items .btn,
.khung-5.active > .k5-container .items p,
.khung-5.active > .k5-container .items .border {
  opacity: 0;
  animation: slideUp 1.5s ease-out forwards;
}

@keyframes zoomInEffect {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.khung-6.active {
  opacity: 0;
  animation: zoomInEffect 1.5s ease-out forwards;
}

.khung-6.active .items:nth-child(1),
.khung-6.active .items:nth-child(2) {
  opacity: 0;
  animation: slideDown 1.5s ease-out forwards;
}

.khung-6.active > .items > .up {
  opacity: 0;
  animation: slideUp 1.5s ease-out forwards;
}

.khung-7.active .k7-container .k7-title-section h2 {
  opacity: 0;
  animation: zoomInEffect 1.2s ease-out forwards;
}

.khung-7.active
  .k7-container
  .k7-content-section
  > .img-col.col-left
  .deco-group-1,
.khung-7.active .k7-container .k7-title-section .deco-group-1 {
  opacity: 0;
  animation: slideInLeft 1.2s ease-out forwards;
}

.khung-7.active
  .k7-container
  .k7-content-section
  > .img-col.col-right
  .deco-group-2,
.khung-7.active .k7-container .k7-title-section .deco-group-2 {
  opacity: 0;
  animation: slideInRight 1.2s ease-out forwards;
}

.khung-7.active .k7-container .k7-content-section .col-left {
  opacity: 0;
  animation: slideInLeft 1.5s ease-out forwards;
}

.khung-7.active .k7-container .k7-content-section .col-right {
  opacity: 0;
  animation: slideInRight 1.5s ease-out forwards;
}

.khung-7.active .k7-container .k7-content-section .img-col.col-center {
  opacity: 0;
  animation: slideDown 1.2s ease-out forwards;
}

.khung-7.active .k7-container .k7-content-section .overlay-box {
  opacity: 0;
  animation: slideUp 1.5s ease-out forwards;
}

.frame-8-card-container.active,
.frame-8-header.active {
  opacity: 0;
  animation: slideDown 1.2s ease-out forwards;
}

.khung-9.active {
  opacity: 0;
  animation: slideUp 1.5s ease-out forwards;
}

.khung-10.active {
  opacity: 0;
  animation: slideDown 1.2s ease-out forwards;
}

.khung-10.active .items {
  opacity: 0;
  animation: slideDown 1.8s ease-out forwards;
}

.khung-10.active .items > span {
  opacity: 0;
  animation: slideDown 1.2s ease-out forwards;
}

.khung-11.active .items .title,
.khung-11.active .items .sub-title,
.khung-11.active .items .content,
.khung-11.active .items:nth-child(2) img {
  opacity: 0;
  animation: slideDown 1s ease-out forwards;
}

.khung-11.active .items .title {
  animation-delay: 0s;
}

.khung-11.active .items .sub-title {
  animation-delay: 0.2s;
}

.khung-11.active .items .content {
  animation-delay: 0.4s;
}

.khung-11.active .items:nth-child(2) img {
  animation-delay: 0.6s;
}

.khung-12.active .items .header .title,
.khung-12.active .items .header .sub-title,
.khung-12.active .items .deco,
.khung-12.active .items p {
  opacity: 0;
  animation: slideDown 1s ease-out forwards;
}

.khung-12.active .items .header .title {
  animation-delay: 0s;
}

.khung-12.active .items .header .sub-title {
  animation-delay: 0.2s;
}

.khung-12.active .items .deco {
  animation-delay: 0.4s;
}

.khung-12.active .items p {
  animation-delay: 0.6s;
}

@keyframes slideDownReveal {
  0% {
    opacity: 0;
    transform: translateY(-50px);
    clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

.khung-13.active .group-left,
.khung-13.active .group-right {
  opacity: 0;
}

.khung-13.active .group-left {
  animation: slideDownReveal 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.khung-13.active .group-right {
  animation: slideDownReveal 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 0.3s;
}

@keyframes slideDownCommon {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.khung-14.active .items {
  animation: slideDownCommon 0.8s ease-out forwards;
  opacity: 0;
}

.khung-15.active .left,
.khung-15.active .center,
.khung-15.active .right {
  animation: slideDownCommon 1.5s ease-out forwards;
  opacity: 0;
}

.khung-15.active .left {
  animation-delay: 0.2s;
}
.khung-15.active .center {
  animation-delay: 0.4s;
}
.khung-15.active .right {
  animation-delay: 0.6s;
}

@keyframes slideInLeftMobile {
  0% {
    opacity: 0;
    transform: translateX(-500px);
  } /* Chỉ dịch 50px */
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRightMobile {
  0% {
    opacity: 0;
    transform: translateX(500px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}