.elementor-kit-7{--e-global-color-primary:#EB4095;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-dfc7df9:#EB4095;--e-global-color-c5c163b:#22323D;--e-global-color-326bad4:#F4F0E5;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */body.elementor-page-8:not(.elementor-motion-effects-element-type-background), body.elementor-page-8 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: none !important;
}
.page-header {
    display: none;
}
.elementor-element {
    padding: 0;
}
#site-header {
    display: none;
}
#site-footer {
    display: none;
}



/* Rung liên tục, nghỉ cực ngắn */
.rung-lac {
    /* Tổng thời gian 2.5s đủ dài để chuyển động mượt mà */
    animation: wiggle 2.5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes wiggle {
    /* --- BẮT ĐẦU CHUỖI RUNG LIÊN TỤC --- */
    /* Lắc sang trái tại các mốc lẻ */
    5%, 15%, 25%, 35%, 45%, 55%, 65%, 75% { 
        transform: rotate(-6deg); 
    }
    
    /* Lắc sang phải tại các mốc chẵn */
    10%, 20%, 30%, 40%, 50%, 60%, 70%, 80% { 
        transform: rotate(6deg); 
    }
    
    /* --- KẾT THÚC RUNG VÀ NGHỈ --- */
    /* Từ 80% về 85% là nhịp giảm tốc nhẹ nhàng về vị trí cũ */
    0%, 85% { 
        transform: rotate(0deg); 
    }
    
    /* Từ 85% đến 100% là khoảng thời gian nghỉ (khoảng 0.3s) */
    100% { transform: rotate(0deg); }
}



/* Hiệu ứng Nhịp thở (Breathing) mượt mà - Clean version */
.nhip-tho {
    /* - 2s: Thời gian một chu kỳ "hít vào thở ra".
       - ease-in-out: Chìa khóa để làm chuyển động mượt, 
         nó làm chậm lại ở đầu và cuối nhịp scale.
    */
    animation: breathing 2s ease-in-out infinite;
    transform-origin: center;
    
    /* Mẹo nhỏ giúp việc scale trên Chrome/Safari nét hơn, ít bị mờ text */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

@keyframes breathing {
    /* Trạng thái bình thường ở đầu và cuối chu kỳ */
    0%, 100% {
        transform: scale(1);
    }
    
    /* Trạng thái nở cực đại ở giữa chu kỳ */
    50% {
        /* Chỉ nở ra 5% (1.05) là đủ tinh tế và mượt. 
           Nếu muốn mạnh hơn hãy thử 1.08 hoặc 1.1 */
        transform: scale(1.05);
    }
}



/* CHỈNH LẠI CAROUSEL IELTS. Dùng Class thay cho ID để dùng được nhiều nơi */
.custom-course-carousel .swiper-slide > div {
    padding: 16px;
    border-radius: 13px;
    cursor: pointer;
    background: #fff; /* Thêm nền trắng cho chắc ăn nếu thẻ div trong suốt */
    transition: transform 0.3s ease; /* Thêm hiệu ứng mượt mà */
}

/* Hiệu ứng Hover: Nổi lên */
.custom-course-carousel .swiper-slide:hover > div {
    -webkit-transform: translateY(-0.4rem);
    transform: translateY(-0.4rem);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Thêm bóng đổ nhẹ khi hover cho đẹp */
}

/* Nút chấm tròn (Pagination) */
.custom-course-carousel .swiper-pagination-bullet {
    height: 10px !important;
    --circle: 0.5rem;
    background-color: #cfd8d9 !important;
    opacity: 1;
    width: 1rem !important;
    height: 0.5rem !important;
    margin: 0 5px 0 0 !important; /* Chỉnh lại margin cho gọn */
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    border-radius: 100rem;
    overflow: hidden;
}

/* Nút chấm tròn khi Active (Đang chọn) */
.custom-course-carousel .swiper-pagination-bullet-active {
    width: 3rem !important;
    background-color: #333 !important; /* Màu đen hoặc đổi thành màu thương hiệu của bạn */
}

/* Cấu trúc Swiper */
.custom-course-carousel .swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 20px 10px !important; /* Thêm padding cho container để bóng đổ không bị cắt */
    z-index: 1;
}

/* Fix lỗi khoảng cách */
.custom-course-carousel .swiper-wrapper {
    gap: 0 !important;
    /* overflow: initial !important; -> Dòng này đôi khi gây lỗi thanh cuộn ngang, mình tạm bỏ, nếu cần thì bật lại */
}

/* --- FIX DISPLAY ON HYBRID DEVICES (TABLET PORTRAIT) --- */
/* NOTE: Trên một số Tablet Android (VD: Xiaomi Pad 6...), chế độ dọc (Portrait) 
   có Viewport nhỏ hơn 768px nên Elementor nhận diện là Mobile (1 cột).
   -> QUYẾT ĐỊNH: Không ép về 2 cột để tránh vỡ giao diện trên Mobile thật.
   -> GIẢI PHÁP: Chấp nhận hiển thị 1 cột to, chỉ dùng code dưới để ép ảnh vuông 
      ngăn không cho ảnh chiếm hết màn hình dọc.
*/

@media (min-width: 600px) and (max-width: 1024px) {
    .custom-course-carousel .swiper-slide img, 
    .custom-course-carousel .elementor-carousel-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important; /* Ép ảnh luôn vuông */
        object-fit: cover !important;   /* Cắt ảnh gọn gàng, không méo */
        border-radius: 13px !important; /* Giữ bo góc đồng bộ */
    }
    
    /* Tùy chọn: Nếu thấy 1 cột to quá, có thể thêm padding cho container để nó hẹp bớt lại chút */
    .custom-course-carousel .swiper-container {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
}/* End custom CSS */