/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Child theme của Astra
Author: Webtop
Template: astra
Version: 1.0
*/

#page {
	overflow : hidden !important;
}

/* 1. Vỏ bọc: Cắt sạch phần thò ra ngoài */
.marquee-wrapper {
    overflow: hidden !important;
    width: 100%;
}

/* 2. Đường ray: Ép nằm ngang trên cả Mobile */
.marquee-track > .uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: row !important; /* Lệnh "tối hậu thư" ép nằm ngang trên mobile */
    flex-wrap: nowrap !important; 
    width: max-content !important; 
    animation: scrollLeft 15s linear infinite; 
    align-items: center !important;
}

/* 3. Ép các phần tử con không bị bóp méo */
.marquee-track > .uagb-container-inner-blocks-wrap > * {
    flex-shrink: 0 !important;
    margin-right: 40px !important; 
    margin-bottom: 0 !important; 
}

/* 4. Vòng lặp toán học */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 1. KHỐI CHA (video-card): Tạo điểm tựa và bo góc */
.video-card {
    position: relative !important;
    overflow: hidden !important; 
    cursor: pointer;
}

/* Đảm bảo nội dung bên trong (nút play) luôn nổi lên trên lớp phủ */
.video-card > .uagb-container-inner-blocks-wrap {
    position: relative;
    z-index: 2;
}

/* 2. LỚP PHỦ MÀU XANH: Mặc định sẽ ẩn (opacity: 0) */
.video-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 67, 56, 0.6); /* Đổi mã màu rgba này thành màu xanh ngọc của bạn */
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: 1; /* Nằm dưới nút play */
    pointer-events: none;
}

/* 3. KHỐI CON CHỨA ICON (play-icon): Mặc định ẩn và thu nhỏ 50% */
.video-card .play-icon {
    opacity: 0 !important;
    transform: scale(0.5);
    transition: all 0.4s ease-in-out !important;
}

/* 4. HIỆU ỨNG HOVER (Khi rê chuột vào ảnh) */

/* Rê chuột vào ảnh -> Lớp phủ xanh hiện ra */
.video-card:hover::before {
    opacity: 1;
}

/* Rê chuột vào ảnh -> Nút play hiện ra và phóng to về 100% */
.video-card:hover .play-icon {
    opacity: 1 !important;
    transform: scale(1);
}

/* 1. CẤU TRÚC CHUNG (DESKTOP & TABLET) */

/* Vỏ bọc ngoài cùng */
.gallery-slider-wrapper {
    overflow: hidden !important;
    width: 100%;
    padding: 20px 0;
}

/* Đường ray chạy ảnh */
.gallery-slider-track .uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: row !important; 
    flex-wrap: nowrap !important;
    width: -webkit-max-content !important;
    width: max-content !important;
    
    -webkit-animation: scrollGallery 20s linear infinite !important;
    animation: scrollGallery 20s linear infinite !important; 
    
    padding: 60px 0 !important;
    
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
    will-change: transform;
    /* Bổ sung gap để Safari dễ thở hơn, có thể điều chỉnh khoảng cách giữa các ảnh tại đây */
    gap: 20px !important; 
}

/* Kích thước ảnh mặc định (Desktop) */
.gallery-slider-track .uagb-container-inner-blocks-wrap > * {
    flex: 0 0 350px !important; 
    width: 350px !important; 
    max-width: 350px !important;
    min-width: 350px !important; /* [BẮT BUỘC CHO iOS] Ngăn Safari bóp chiều ngang */
    height: 350px !important; 
    min-height: 350px !important; /* [BẮT BUỘC CHO iOS] Ngăn Safari kéo giãn chiều cao */
    aspect-ratio: 1 / 1 !important; /* Ép tỷ lệ 1:1 hình vuông tuyệt đối */
    border-radius: 20px !important; 
    
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* Ép các thẻ div/figure con bên trong của Spectra full size */
    display: flex !important;
    justify-content: center;
    align-items: center;
    overflow: hidden !important;
}

/* Xử lý các thẻ bọc trung gian của Spectra (VD: <figure> hoặc <div> wrapper) */
.gallery-slider-track .uagb-container-inner-blocks-wrap > * > * {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

/* Đảm bảo hình ảnh bên trong thẻ không bị biến dạng */
.gallery-slider-track .uagb-container-inner-blocks-wrap > * img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
    display: block !important; /* [Quan trọng] Loại bỏ khoảng trắng thừa dưới đáy ảnh trên iOS */
}

/* Hiệu ứng so le (Trồi lên / Thụt xuống) trên Desktop */
.gallery-slider-track .uagb-container-inner-blocks-wrap > *:nth-child(odd) {
    -webkit-transform: translateY(-50px) !important;
    transform: translateY(-50px) !important;
}
.gallery-slider-track .uagb-container-inner-blocks-wrap > *:nth-child(even) {
    -webkit-transform: translateY(50px) !important;
    transform: translateY(50px) !important;
}

/* Vòng lặp toán học */
@-webkit-keyframes scrollGallery {
    0% { -webkit-transform: translateX(0); }
    100% { -webkit-transform: translateX(calc(-50% - 10px)); } /* Trừ đi 1 nửa gap để mượt hơn */
}
@keyframes scrollGallery {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 10px)); } 
}


/* 2. TÙY CHỈNH RIÊNG CHO ĐIỆN THOẠI (MOBILE) */
@media (max-width: 767px) {
    
    .gallery-slider-track .uagb-container-inner-blocks-wrap {
        -webkit-animation-duration: 12s !important;
        animation-duration: 12s !important; 
        padding: 40px 0 !important;
        gap: 15px !important; /* Gap nhỏ lại trên mobile */
    }

    /* Thu nhỏ kích thước ảnh cho vừa mắt trên Mobile */
    .gallery-slider-track .uagb-container-inner-blocks-wrap > * {
        flex: 0 0 200px !important;
        width: 200px !important;
        max-width: 200px !important;
        min-width: 200px !important; /* [BẮT BUỘC CHO iOS] */
        height: 200px !important;
        min-height: 200px !important; /* [BẮT BUỘC CHO iOS] */
        aspect-ratio: 1 / 1 !important;
    }

    /* Giảm nhẹ độ nhấp nhô để phù hợp với kích thước ảnh nhỏ */
    .gallery-slider-track .uagb-container-inner-blocks-wrap > *:nth-child(odd) {
        -webkit-transform: translateY(-50px) !important; 
        transform: translateY(-50px) !important;
    }
    .gallery-slider-track .uagb-container-inner-blocks-wrap > *:nth-child(even) {
        -webkit-transform: translateY(50px) !important;
        transform: translateY(50px) !important;
    }
}

/* TÙY CHỈNH LƯỚI BÀI VIẾT (POST GRID) */

/* 1. Bo tròn 4 góc của các bức ảnh */
.my-custom-grid .uagb-post__image img {
    border-radius: 12px !important;
}

/* 2. Biến nút "Đọc thêm" cục mịch thành dòng Text Link thanh thoát */
.my-custom-grid .uagb-post__text-wrap .uagb-post__cta {
    background: transparent !important; /* Xóa nền xanh */
    padding: 0 !important; /* Xóa khoảng đệm, ép chữ lùi về sát mép trái */
    border: none !important;
    box-shadow: none !important;
}

/* 3. Chỉnh màu chữ và hiệu ứng cho chữ "Đọc thêm" */
.my-custom-grid .uagb-post__text-wrap .uagb-post__cta a {
    color: #2e6255 !important; /* Thay mã màu xanh ngọc của bạn vào đây nếu cần */
    font-weight: 600 !important; /* In đậm chữ một chút */
    transition: all 0.3s ease;
}

/* 4. Thêm mũi tên tự động vào sau chữ "Đọc thêm" (Không cần gõ tay) */
.my-custom-grid .uagb-post__text-wrap .uagb-post__cta a::after {
    content: " \2192" !important; /* Mã tạo ra mũi tên → */
    margin-left: 5px;
}

/* 5. Hiệu ứng Hover: Đưa chuột vào chữ Đọc thêm sẽ mờ đi một chút */
.my-custom-grid .uagb-post__text-wrap .uagb-post__cta a:hover {
    opacity: 0.7 !important;
    text-decoration: underline !important;
}

/* Thiết kế cho nút HTML tùy chỉnh */
.custom-header-btn {
    display: inline-flex !important;
    align-items: center;
	white-space: nowrap;
    padding: 6px 6px 6px 24px !important;
    border-radius: 50px !important;
    background-color: #639886 !important;
    color: white !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 500;
}

/* Ổn định màu chữ khi hover */
.custom-header-btn:hover {
    color: white !important;
}

/* Lớp phủ trượt từ trái sang phải */
.custom-header-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #1a4136;
    transition: width 0.4s ease-in-out;
    z-index: -1;
}

/* Kích hoạt hiệu ứng trượt */
.custom-header-btn:hover::before {
    width: 100%;
}

/* Vòng tròn bọc ngoài và chèn Icon điện thoại bằng CSS */
.custom-header-btn .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #1a4136;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-left: 15px;
    /* Mã nhúng icon điện thoại SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px; /* Kích thước icon */
    transition: background-color 0.4s ease-in-out; /* Hiệu ứng đổi màu mượt mà */
}

/* Đổi màu nền của icon khi hover vào nút */
.custom-header-btn:hover .btn-icon {
    background-color: #639886; /* Đổi màu nền icon khi hover để nổi bật trên lớp phủ tối */
}

/* --- HIỆU ỨNG TRƯỢT CHO NÚT SPECTRA --- */

/* Thiết lập khung cho nút */
.btn-slide-hover .uagb-buttons-repeater {
    position: relative !important;
    overflow: hidden !important;
    background-color: #639886 !important; /* Nền xanh mờ mặc định */
    border: none !important;
}

/* Đưa nội dung (chữ, icon) lên trên cùng để không bị lớp phủ che mất */
.btn-slide-hover .uagb-buttons-repeater > * {
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

/* Tạo lớp phủ màu đậm nằm ẩn ở bên trái */
.btn-slide-hover .uagb-buttons-repeater::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #1a4136 !important; /* Nền xanh đậm khi hover */
    transition: width 0.4s ease-in-out;
    z-index: 1; /* Lớp phủ nằm trên nền mặc định, nhưng dưới chữ */
}

/* Kích hoạt lớp phủ trượt ra 100% khi rê chuột */
.btn-slide-hover .uagb-buttons-repeater:hover::before {
    width: 100%;
}

/* Đổi màu chữ và icon sang trắng khi hover cho nổi bật */
.btn-slide-hover .uagb-buttons-repeater:hover .uagb-button__link,
.btn-slide-hover .uagb-buttons-repeater:hover svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* --- HIỆU ỨNG TRƯỢT CHO NÚT VIỀN (SPECTRA) THEO MẪU --- */

/* Thiết lập khung cho nút viền */
.btn-outline-slide-hover .uagb-buttons-repeater {
    position: relative !important;
    overflow: hidden !important;
    background-color: transparent !important; /* Nền trong suốt mặc định */
    border: 1px solid #639886 !important; /* Thêm viền xanh mờ */
    border-radius: 50px !important; /* Giữ bo tròn góc cho đồng bộ */
}

/* Đưa nội dung (chữ, icon) lên trên cùng để không bị lớp phủ che mất */
.btn-outline-slide-hover .uagb-buttons-repeater > * {
    position: relative;
    z-index: 2;
    transition: color 0.3s ease, fill 0.3s ease;
}

/* Màu chữ và icon ban đầu (màu xanh mờ) */
.btn-outline-slide-hover .uagb-buttons-repeater .uagb-button__link,
.btn-outline-slide-hover .uagb-buttons-repeater svg {
    color: #639886 !important;
    fill: #639886 !important;
}

/* Tạo lớp phủ màu nằm ẩn ở bên trái */
.btn-outline-slide-hover .uagb-buttons-repeater::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #639886 !important; /* Lớp phủ xanh mờ sẽ trượt vào */
    transition: width 0.4s ease-in-out;
    z-index: 1; /* Lớp phủ nằm dưới chữ */
}

/* Kích hoạt lớp phủ trượt ra 100% khi rê chuột */
.btn-outline-slide-hover .uagb-buttons-repeater:hover::before {
    width: 100%;
}

/* Đổi màu chữ và icon sang trắng khi hover cho nổi bật */
.btn-outline-slide-hover .uagb-buttons-repeater:hover .uagb-button__link,
.btn-outline-slide-hover .uagb-buttons-repeater:hover svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* --- HIỆU ỨNG THẺ CARD TRƯỢT NỀN TỪ DƯỚI LÊN --- */

/* 1. Thiết lập khung cho thẻ Card */
.card-slide-up {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1;
    transition: transform 0.3s ease; /* Thêm hiệu ứng nổi nhẹ thẻ lên nếu thích */
}

/* Đảm bảo toàn bộ nội dung (chữ, icon, nút) nổi lên trên lớp nền */
.card-slide-up > * {
    position: relative;
    z-index: 2;
}

/* 2. Tạo lớp phủ màu nằm ẩn ở dưới đáy (bottom: 0) */
.card-slide-up::before {
    content: "";
    position: absolute;
    bottom: 0; /* Bắt đầu từ dưới cùng */
    left: 0;
    width: 100%;
    height: 0%; /* Chiều cao ban đầu là 0 */
    background-color: #1a4136 !important; /* Đổi thành màu xanh đậm khi hover */
    transition: height 0.4s ease-in-out; /* Trượt theo chiều dọc (height) */
    z-index: -1;
}

/* Kích hoạt lớp phủ trượt lên 100% chiều cao khi rê chuột */
.card-slide-up:hover::before {
    height: 100%;
}

/* 3. Đổi màu chữ và icon sang trắng khi nền tối trượt lên */
.card-slide-up:hover h1,
.card-slide-up:hover h2,
.card-slide-up:hover h3,
.card-slide-up:hover h4,
.card-slide-up:hover h5,
.card-slide-up:hover h6,
.card-slide-up:hover p,
.card-slide-up:hover span,
.card-slide-up:hover div { /* Đã bổ sung thêm thẻ div cho phần mô tả */
    color: #ffffff !important;
    transition: color 0.3s ease-in-out;
}

/* Nếu có sử dụng icon SVG, đổi sang màu trắng luôn */
.card-slide-up:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
    transition: all 0.3s ease-in-out;
}

/* --- HIỆU ỨNG HOVER CHỈ ÁP DỤNG TRONG PHẠM VI ẢNH --- */

/* 1. Thiết lập khung chứa Ảnh (khối card-image) */
.custom-team-card {
    position: relative !important;
    overflow: hidden !important;
    /* THÊM VÀO: Cắt gọn lớp phủ đen khớp với viền bo góc của nền ảnh */
    border-radius: 24px !important; /* Bạn có thể tăng giảm số này (VD: 15px, 24px) cho vừa khít với ảnh của bạn nhé */
}

/* 2. Lớp phủ đen làm tối chỉ đè lên ảnh */
.custom-team-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4) !important; /* Đen mờ 40% */
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: 1; 
    pointer-events: none; 
}

/* Kích hoạt lớp phủ tối khi hover vào ảnh */
.custom-team-card:hover::after {
    opacity: 1;
}

/* 3. Thanh Mạng xã hội lơ lửng trên ảnh */
/* Lưu ý: Đảm bảo bạn ĐÃ gắn class "team-social-icons" vào tab Advanced của khối Social Share nhé */
.custom-team-card .team-social-icons {
    position: absolute !important;
    bottom: 20px !important; /* Căn cách đáy ảnh 20px thay vì 30px như cũ */
    left: 50% !important;
    
    /* Ẩn xuống 40px */
    transform: translateX(-50%) translateY(40px) !important; 
    opacity: 0 !important; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
    z-index: 2 !important; 
    
    /* Trang trí thanh nền trắng */
    background-color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
    width: 80% !important; 
    max-width: 220px !important; /* Giới hạn chiều rộng để thanh không bị quá dài */
    display: flex !important;
    justify-content: center !important;
}

/* Ép khoảng cách các icon bên trong khối Social Share của Spectra cho đều */
.custom-team-card .team-social-icons .uagb-social-share__wrap,
.custom-team-card .team-social-icons .uagb-icon-list__wrap {
    justify-content: space-around !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 4. Trạng thái Hover: Trượt thanh icon lên */
.custom-team-card:hover .team-social-icons {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

button.ast-menu-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Xóa viền chấm chấm khi click vào nút */
button.ast-menu-toggle:focus,
button.ast-menu-toggle:active,
button.ast-menu-toggle:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Loại bỏ luôn cái hiệu ứng chớp màu xám/xanh lướt qua khi chạm ngón tay trên điện thoại */
button.ast-menu-toggle {
    -webkit-tap-highlight-color: transparent !important;
}

selector .uagb-forms-success-message {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
}

/* Phòng trường hợp text bị bọc trong thẻ p hoặc span bên trong */
selector .uagb-forms-success-message p,
selector .uagb-forms-success-message span {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Khung chứa nút */
.custom-floating-contact {
    position: fixed;
    bottom: 100px; 
    right: 20px; 
    z-index: 99999; 
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Fix triệt để viền trắng và khoảng đệm */
.custom-floating-contact .contact-btn {
    display: block;
    width: 48px; 
    height: 48px;
    background: transparent !important; /* Ép xóa nền trắng */
    padding: 0 !important; /* Ép xóa viền đệm của theme Astra */
    border: none !important;
    border-radius: 50%; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: transform 0.3s ease;
}

/* Hiệu ứng phóng to khi trỏ chuột */
.custom-floating-contact .contact-btn:hover {
    transform: scale(1.1);
}

/* Chu kỳ rung lắc */
@keyframes rung-lac-nhe {
    0%, 75%, 100% { transform: rotate(0deg) scale(1); }
    80% { transform: rotate(-10deg) scale(1.05); }
    85% { transform: rotate(10deg) scale(1.05); }
    90% { transform: rotate(-10deg) scale(1.05); }
    95% { transform: rotate(10deg) scale(1.05); }
}

/* Ép SVG tràn viền 100% */
.custom-floating-contact svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border-radius: 50%;
    margin: 0 !important;
    animation: rung-lac-nhe 3s infinite ease-in-out; 
}

.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.item-about {
	width: 100% !important;
}
.wt-hero-section-homepage figure,
.wt-hero-section-homepage img
{
	width: 100% !important;
}

/* Ép khung chứa ảnh rộng 100% */
.custom-team-img,
.custom-team-img figure {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ép ảnh lấp đầy khung và giữ tỉ lệ */
.custom-team-img img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/4 !important; /* Bạn có thể đổi lại thành 4/5 nếu muốn */
    object-fit: cover !important;
}

/* Ép khung chứa ảnh dịch vụ luôn đầy đặn */
.custom-service-img,
.custom-service-img figure {
    width: 100% !important;
    max-width: 100% !important;
}

/* Cắt ảnh dịch vụ bằng nhau tăm tắp */
.custom-service-img img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4/3 !important; /* Tỉ lệ 4:3 chữ nhật nằm ngang (bạn có thể đổi thành 16/9 hoặc 3/2) */
    object-fit: cover !important;
}