/**
* Theme Name: Arolax Child
* Description: This is a child theme of Arolex
* Author: <a href="http://themeforest.net/user/crowdytheme">CrowdyTheme</a>
* Template: arolax
* Version: 3.0.2
*/
/* ==========================================
   1. GIỮ NGUYÊN CẤU HÌNH GỐC TRÊN DESKTOP
   ========================================== */


/* 1. CSS Portfolio detail image slider*/
@media (max-width: 1199px){
	.gallery--slider .item .content-wrap{
		background-color: #ffffff00 !important;
	}
	.gallery--slider .item .content-wrap:hover{
		background-color: #FFFFFFE5 !important;
	}
	.gallery--slider .item .content-wrap h3{
		/*color: #000000;
		background-color: #ffffff;
		padding: 10px;
		font-size: 18px;
		border-radius: 5px;*/
		visibility: hidden;
	}
	.gallery--slider .item .content-wrap:hover h3{
		visibility: visible;
	}
}
/*END CSS Portfolio detail image slide*/


/* 2. CSS Home Service section background hover animation*/
/* --- VÙNG CHỨA CHÍNH (TRẠNG THÁI BÌNH THƯỜNG) --- */
    .section-animate {
      padding: 8% 5%;
      display: flex;
      align-items: center;
      position: relative;
      
      /* 1. Mặc định là nền trắng và có viền nhẹ cho đẹp mắt */
      background-color: #ffffff; 
      border: 1px solid #e0e0e0;
      
      overflow: hidden !important;
      transition: background-color 0.7s ease;  /*Hiệu ứng đổi màu nền mượt mà */
    }

    /* --- TRẠNG THÁI KHI HOVER VÀO VÙNG CHỨA --- */
    .section-animate:hover {
      background: #E60078; /* Đổi sang màu hồng khi hover */
		transform: translateX(5px); /* Hiệu ứng đẩy nhẹ khối sang phải khi rê chuột vào */
    }

    .section-animate:hover .circles li {
      animation-play-state: running; /* Cho phép bong bóng chuyển động */
      opacity: 1;                    /* Hiện rõ bong bóng */
	  animation: animate 25s linear infinite;
    }

    /* --- CẤU HÌNH HIỆU ỨNG BONG BÓNG (MẶC ĐỊNH ẨN) --- */
    .section-animate .circles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 40vh;
      margin: 0;
      padding: 0;
      overflow: hidden ;
      pointer-events: none; /* Để chuột click xuyên qua bong bóng vào nút */
    }

    .section-animate .circles li {
      position: absolute;
      display: block;
      list-style: none;
      width: 20px;
      height: 20px;
      /*background: rgba(255, 255, 255, 0.4); Tăng độ đậm của icon để nhìn rõ trên nền xám */
      bottom: -150px;
      border-radius: 50%;
      
      /* Mặc định đóng băng và ẩn bong bóng đi */
      
      opacity: 0;         
      animation-play-state: paused; 	  
      transition: opacity 0.4s ease; 
		
		/* Tạo nền chuyển sắc 3D: Điểm sáng trắng ở góc trên bên trái, trong suốt ở giữa */
  	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 220, 255, 0.15) 45%, rgba(255, 255, 255, 0) 70%);
  
  /* Đổ bóng nhiều lớp: 
     - Lớp 1: Đổ bóng trắng bên trong (inset) tạo viền sáng rõ.
     - Lớp 2: Đổ bóng mờ nhẹ bên ngoài tạo chiều sâu khi đè lên nền. */
  	box-shadow: inset -3px -3px 8px rgba(255, 255, 255, 0.35), 	inset 2px 2px 5px rgba(255, 255, 255, 0.8),	0 10px 20px rgba(0, 0, 0, 0.05); 
    }

    /* --- GIỮ NGUYÊN DANH SÁCH BONG BÓNG CỦA BẠN --- */
    .section-animate .circles li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
    .section-animate .circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
    .section-animate .circles li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
    .section-animate .circles li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
    .section-animate .circles li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
    .section-animate .circles li:nth-child(6) { left: 75%; width: 60px; height: 60px; animation-delay: 3s; }
    .section-animate .circles li:nth-child(7) { left: 35%; width: 70px; height: 70px; animation-delay: 7s; }
    .section-animate .circles li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
    .section-animate .circles li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
    .section-animate .circles li:nth-child(10) { left: 85%; width: 100px; height: 100px; animation-delay: 0s; animation-duration: 11s; }

    @keyframes animate {
  0% {
    /* Xuất phát ở vị trí gốc */
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    /* Bay lên cao 1200px VÀ dạt sang phải 300px */
    transform: translateY(-1200px) translateX(300px) rotate(90deg);
    opacity: 0;
  } 
}
/* bong bóng bay lên theo đường thẳng
@keyframes animate {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translateY(-1200px) rotate(360deg);
        opacity: 0;
      } 
    }
*/
/*END CSS Home Service section background hover animation*/

/**/


/* Ngăn người dùng tương tác trực tiếp bằng chuột vào video để tải/chuột phải */
video {
  pointer-events: none;
}

html, body {
  overflow-x: hidden;
}
ul{
	margin-top: 10px;
}
.social-item:hover {
	background-color: #E60078 !important;
}
.social-item a:hover {
	color: #ffffff !important;
}
.gradient-text-SEN {
  background: linear-gradient(to right, #E60078, #FF003C, #FFAA00);
  background-clip: text;
  color: transparent;
}
/* linear-gradient(90deg,rgba(230, 0, 120, 1) 0%, rgba(255, 0, 60, 1) 80%);*/
/*CSS Line in Service - Landing Page - Section Slide*/
.writing-mode .elementor-heading-title::before{
	background: #ffffff !important;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
}


// Small devices (landscape phones, 576px and up)
@media (max-width: 576px) {}

// Large devices (desktops, 992px and up)
@media (max-width: 992px) {}

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {}