/* =========================================================
   HIEU UNG CUON - CSS
   Dung voi JS: hieu-ung-cuon-js-da-sua.js

   Muc tieu:
   - Ngoai website/frontend: giu hieu ung cuon.
   - Trong Bricks Builder: phan tu luon hien, khong bi an.
   - Tablet/Mobile: don gian hoa hieu ung ve ro dan + truot len.
========================================================= */


/* ================================
   1. Thiet lap chung
================================ */

.bc_h-len,
.bc_h-xuong,
.bc_h-trai,
.bc_h-phai,
.bc_h-zoom-in,
.bc_h-zoom-out {
  opacity: 0;
  transition:
    opacity 0.85s cubic-bezier(.2, .8, .2, 1),
    transform 0.85s cubic-bezier(.2, .8, .2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}


/* ================================
   2. Desktop - hieu ung goc
================================ */

.bc_h-len {
  transform: translateY(60px);
}

.bc_h-xuong {
  transform: translateY(-60px);
}

.bc_h-trai {
  transform: translateX(-60px);
}

.bc_h-phai {
  transform: translateX(60px);
}

.bc_h-zoom-in {
  transform: scale(0.92);
}

.bc_h-zoom-out {
  transform: scale(1.08);
}


/* ================================
   3. Trang thai da hien
   JS se them class nay
================================ */

.bc_da-hien {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}


/* ================================
   4. Delay
================================ */

.bc_delay-100 {
  transition-delay: 0.1s;
}

.bc_delay-200 {
  transition-delay: 0.2s;
}

.bc_delay-300 {
  transition-delay: 0.3s;
}

.bc_delay-400 {
  transition-delay: 0.4s;
}

.bc_delay-500 {
  transition-delay: 0.5s;
}


/* ================================
   5. Tablet
   Tu 768px den 1024px:
   ep tat ca ve ro dan + truot len
================================ */

@media (min-width: 768px) and (max-width: 1024px) {
  .bc_h-len,
  .bc_h-xuong,
  .bc_h-trai,
  .bc_h-phai,
  .bc_h-zoom-in,
  .bc_h-zoom-out {
    opacity: 0;
    transform: translateY(48px);
  }

  .bc_da-hien {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ================================
   6. Mobile
   Tu 767px tro xuong:
   ep tat ca ve ro dan + truot len nhe hon
================================ */

@media (max-width: 767px) {
  .bc_h-len,
  .bc_h-xuong,
  .bc_h-trai,
  .bc_h-phai,
  .bc_h-zoom-in,
  .bc_h-zoom-out {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity 0.65s cubic-bezier(.2, .8, .2, 1),
      transform 0.65s cubic-bezier(.2, .8, .2, 1);
  }

  .bc_da-hien {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ================================
   7. Bricks Builder Fix

   Trong Builder, ep phan tu luon hien.
   Khong dung display: block de tranh pha layout flex/grid.
================================ */

html.bricks-is-builder .bc_h-len,
html.bricks-is-builder .bc_h-xuong,
html.bricks-is-builder .bc_h-trai,
html.bricks-is-builder .bc_h-phai,
html.bricks-is-builder .bc_h-zoom-in,
html.bricks-is-builder .bc_h-zoom-out,
body.bricks-is-builder .bc_h-len,
body.bricks-is-builder .bc_h-xuong,
body.bricks-is-builder .bc_h-trai,
body.bricks-is-builder .bc_h-phai,
body.bricks-is-builder .bc_h-zoom-in,
body.bricks-is-builder .bc_h-zoom-out,
.bricks-is-builder .bc_h-len,
.bricks-is-builder .bc_h-xuong,
.bricks-is-builder .bc_h-trai,
.bricks-is-builder .bc_h-phai,
.bricks-is-builder .bc_h-zoom-in,
.bricks-is-builder .bc_h-zoom-out,
.brx-body.iframe .bc_h-len,
.brx-body.iframe .bc_h-xuong,
.brx-body.iframe .bc_h-trai,
.brx-body.iframe .bc_h-phai,
.brx-body.iframe .bc_h-zoom-in,
.brx-body.iframe .bc_h-zoom-out {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
  transition-delay: 0s !important;
  will-change: auto !important;
}

html.bricks-is-builder .bc_da-hien,
body.bricks-is-builder .bc_da-hien,
.bricks-is-builder .bc_da-hien,
.brx-body.iframe .bc_da-hien {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  transition-delay: 0s !important;
  will-change: auto !important;
}


/* ================================
   8. Reduce Motion
   Neu may nguoi dung dang bat giam chuyen dong,
   hien thang phan tu, khong animation.
================================ */

@media (prefers-reduced-motion: reduce) {
  .bc_h-len,
  .bc_h-xuong,
  .bc_h-trai,
  .bc_h-phai,
  .bc_h-zoom-in,
  .bc_h-zoom-out {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}