/* ===== Thư viện animation — port theo shared/css/main.css của milgamma_injections_2024
   Cách dùng giống hệt bản gốc:  class="<phần tử> fadeInUp dur900 del500"          ===== */

.animated,
.fadeIn, .fadeInUp, .fadeInDown, .fadeInLeft, .fadeInRight,
.fadeInUpBig, .fadeInDownBig, .zoomIn, .zoomInUp, .growY, .slideInRight, .slideInLeft {
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

@keyframes fadeIn        { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp      { from { opacity: 0; transform: translate3d(0, 50px, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeInDown    { from { opacity: 0; transform: translate3d(0, -50px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft    { from { opacity: 0; transform: translate3d(-50px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight   { from { opacity: 0; transform: translate3d(50px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeInUpBig   { from { opacity: 0; transform: translate3d(0, 200px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInDownBig { from { opacity: 0; transform: translate3d(0, -200px, 0); } to { opacity: 1; transform: none; } }
@keyframes zoomIn        { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } to { transform: none; } }
@keyframes zoomInUp      { from { opacity: 0; transform: scale3d(.3, .3, .3) translate3d(0, 60px, 0); } to { opacity: 1; transform: none; } }
@keyframes growY         { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes slideInRight  { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes slideInLeft   { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes pulse         { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } }

.fadeIn        { animation-name: fadeIn; }
.fadeInUp      { animation-name: fadeInUp; }
.fadeInDown    { animation-name: fadeInDown; }
.fadeInLeft    { animation-name: fadeInLeft; }
.fadeInRight   { animation-name: fadeInRight; }
.fadeInUpBig   { animation-name: fadeInUpBig; }
.fadeInDownBig { animation-name: fadeInDownBig; }
.zoomIn        { animation-name: zoomIn; }
.zoomInUp      { animation-name: zoomInUp; }
.growY         { animation-name: growY; transform-origin: 50% 100%; }
.slideInRight  { animation-name: slideInRight; }
.slideInLeft   { animation-name: slideInLeft; }

/* thời lượng */
.dur300 { animation-duration: 300ms; }
.dur500 { animation-duration: 500ms; }
.dur600 { animation-duration: 600ms; }
.dur700 { animation-duration: 700ms; }
.dur900 { animation-duration: 900ms; }
.dur1200 { animation-duration: 1200ms; }
.dur1500 { animation-duration: 1500ms; }

/* độ trễ — bước 100ms như milgamma */
.del100 { animation-delay: 100ms; }
.del200 { animation-delay: 200ms; }
.del300 { animation-delay: 300ms; }
.del400 { animation-delay: 400ms; }
.del500 { animation-delay: 500ms; }
.del600 { animation-delay: 600ms; }
.del700 { animation-delay: 700ms; }
.del800 { animation-delay: 800ms; }
.del900 { animation-delay: 900ms; }
.del1000 { animation-delay: 1000ms; }
.del1100 { animation-delay: 1100ms; }
.del1200 { animation-delay: 1200ms; }
.del1300 { animation-delay: 1300ms; }
.del1400 { animation-delay: 1400ms; }
.del1500 { animation-delay: 1500ms; }
.del1600 { animation-delay: 1600ms; }
.del1700 { animation-delay: 1700ms; }
.del1800 { animation-delay: 1800ms; }
.del1900 { animation-delay: 1900ms; }
.del2000 { animation-delay: 2000ms; }
.del2100 { animation-delay: 2100ms; }
.del2200 { animation-delay: 2200ms; }
.del2300 { animation-delay: 2300ms; }
.del2400 { animation-delay: 2400ms; }
.del2500 { animation-delay: 2500ms; }

/* lớp nội dung tách từ slide — không chặn thao tác chạm của hotspot */
.lay {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 5;
}