/* @media (min-width:500px) and (max-width: 880px) {
  html {
    font-size: 9px !important;
  }
} */


/* Container Flexbox chính */
.custom-course-slider,
.custom-course-related-slider {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* scroll-snap-type: x mandatory; */
    padding-bottom: 80px; /* Vẫn giữ nếu bạn muốn padding dưới cho thanh cuộn */
    
    /* BỎ margin: 0 -10px; ở đây. Chúng ta sẽ dùng gap hoặc margin cho item con */
    /* margin: 0 -10px; */ 
    
    /* Tùy chọn: Dùng gap để tạo khoảng cách giữa các flex items */
    gap: 25px; /* Khoảng cách giữa các card là 20px */
    user-select: none;
}

/* Ẩn thanh cuộn mặc định giữ nguyên */
.custom-course-slider::-webkit-scrollbar,
.custom-course-related-slider::-webkit-scrollbar {
    display: none;
	
}
.custom-course-slider,
.custom-course-related-slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* CSS cho mỗi Course Card (slide item) */
.course-slide {
    flex-shrink: 0;
    flex-grow: 0;
    width: 33.33%; /* Hiển thị 3 card/hàng. Điều chỉnh nếu bạn muốn ít/nhiều hơn */
    max-width: 355px; /* Giới hạn chiều rộng tối đa bằng kích thước card của bạn */
    box-sizing: border-box; /* Quan trọng để padding không làm tăng kích thước */
    
    /* BỎ padding: 0 10px; ở đây vì nó tạo khoảng cách bên trong card, không phải giữa các card */
    /* padding: 0 10px; */ 
    
    /* Nếu không dùng 'gap' cho container, bạn có thể dùng margin cho từng slide: */
    /* margin-right: 20px; */ /* Khoảng cách bên phải của mỗi slide */
    /* Hoặc: */
    /* margin-left: 10px; margin-right: 10px; */ /* Nếu bạn muốn cân bằng margin ở hai bên */

    /* scroll-snap-align: start; */
}

.footer-title-archive-course, .footer-title-tutor-course {
  position: sticky; margin-top: -20px;
}


/* Tablet view: 2 cards */
@media (min-width: 481px) and (max-width: 1024px) {
    .course-slide {
      width: 60%; /* Display ~2 cards per row on tablet */
    }
    .custom-course-slider {
        margin-left: 5%;
        margin-right: 5%;
    }
    .footer-title-archive-course, .footer-title-tutor-course {
        margin-left: 5%;
        margin-right: 5%;
    }
    .course-count-new {
        margin-left: 5%;
        margin-right: 5%;
    }
    .row-tutor-course {
        padding-top: 210px !important;
        padding-bottom: 30px !important;
      }
      .padding-row {
        padding-top: 210px !important;;
        padding-bottom: 50px !important;
      }
}

/* Trên Điện thoại (màn hình nhỏ hơn 480px) */
@media (max-width: 480px) {
    .button-course-slider {
        display: none;
    }
    .custom-course-slider {
        touch-action: pan-y;
    }
  .footer-title-archive-course, .footer-title-tutor-course {
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 35px ;
    margin-bottom: -60px;
    font-size: 15px;
  }
  .row-tutor-course97 {
    padding-top: 250px !important;
    padding-bottom: 65px !important;
  }
  .course97-padding-row {
    padding-top: 250px !important;;
    padding-bottom: 90px !important;
  }
    .custom-course-slider,
    .custom-course-related-slider {
        flex-wrap: wrap;    /* Cho phép các item xuống hàng */
        overflow-x: hidden; /* Ngăn cuộn ngang */
        overflow-y: auto;   /* Cho phép cuộn dọc */
        scroll-snap-type: y mandatory; /* Cuộn dọc với hiệu ứng snap */
        padding-bottom: 0;  /* Bỏ padding dưới nếu không cần thanh cuộn dưới */
        gap: 25px; /* Giữ nguyên khoảng cách giữa các card theo chiều dọc */
        margin: 0; /* Đảm bảo không có margin âm nào trên mobile */
    }

    .course-slide {

        width: 88%; /* Mỗi card chiếm 100% chiều rộng */
        max-width: none; /* Bỏ giới hạn max-width trên mobile */
        padding: 0; /* Bỏ padding ngang nếu muốn sát mép. Hoặc thêm 0 15px nếu muốn lề */
        scroll-snap-align: start; /* Giúp mỗi slide "snap" vào vị trí bắt đầu */
		margin: 0 auto; /* Căn giữa theo chiều ngang */
    }
	.course97-cta {
		width: 61% !important;
    left: 53% !important;
	}
    .course-count-new {
        margin-left: 5%;
        margin-right: 5%;
    }
    .course-category-title-1{
        font-size: 1.8rem !important;
    }
}

.course-category-title-2 {
    color:rgb(210, 214, 218); 
    font-weight: 300; 
    margin-top: 0;
}
.course-category-title-1{
    color: #ffffff; font-size: 3rem; margin-top: 0;
}

.course97-main-container {
    display: block; /* Đảm bảo thẻ <a> hoạt động như một khối */
    color: inherit; /* Kế thừa màu chữ từ thẻ cha, bỏ màu xanh mặc định của link */
    text-decoration: none; 
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 472px;
    margin: 0;
    background: linear-gradient(to bottom, rgba(73, 70, 70, 0.8) 0%, #1a1a1a 50%, #1a1a1a 100%);
    color: #e2e8f0;
    border-radius: 1.8rem;
    box-shadow: inset 0 10px 8px rgba(182, 180, 180, 0.7);
    transition: transform 0.2s ease-in-out, box-shadow 0.5s ease-in-out;
}

.course97-main-container:hover {
    filter: brightness(1.2);
    transform: translateY(-2px); /* Nâng lên một chút khi hover */
    /* Box-shadow cho toàn bộ card khi hover */
    box-shadow:
        0px 8px 20px rgba(95, 88, 88, 0.3), /* Bóng đổ bên ngoài lớn hơn */
        inset 0 10px 32px rgba(238, 226, 226, 1), /* Hiệu ứng sáng trắng mờ BÊN TRONG toàn card */
        inset 0 0 0 2px rgba(255, 255, 255, 0.8); /* Viền mỏng mờ bên trong hiện có */
    z-index: 1000;
}

.course97-main-container:hover .course97-image {
    /* Tạo hiệu ứng sáng ở đường phân chia dưới của ảnh */
    /* Bỏ 'inset' khỏi phần sáng để nó hiển thị bên ngoài đường viền dưới của ảnh */
    box-shadow:
        45px 15px 25px rgb(207, 203, 203),
        inset 0 0 0 1px rgba(228, 223, 223, 0.8); /* Bóng đổ màu sáng, offset Y dương để nằm dưới ảnh */
    transition: box-shadow 0.6s ease-in-out; /* Đảm bảo chuyển động mượt mà */
}

.course97-main-container,
.course97-main-container * {
    box-sizing: border-box;
}

.course97-image {
    position: relative;
    width: 100%;
    height: 302px;
    margin: 0;
    background: #442d2d;
    overflow: hidden;
}
.course97-replace-img {
    position: relative;
    width: 100%;
    height: 302px;
    margin: 0;
    background: #000000;
    z-index: 1;
    overflow: hidden;
}
.course97-gif-animated-ai {
    position: absolute;
    width: 569.537px;
    height: 320.365px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    z-index: 2;
}

.course97-course-input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 16px;
    z-index: 9;
}
.course97-ai-course {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    width: auto;
    min-width: 0;
    height: 39px;
    color: #ffffff;
    font-family: Inter, var(--default-font-family);
    font-size: 16px;
    font-weight: 700;
    line-height: 19.364px;
    text-align: left;
    text-overflow: ellipsis;
    z-index: 10;
    overflow: hidden;
}
.course97-dummy-text {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    width: auto;
    min-width: 0;
    height: 29px;
    color: #e8dcde;
    font-family: SVN-Gilroy, var(--default-font-family);
    font-size: 14px;
    font-weight: 300;
    line-height: 14.7px;
    text-align: left;
    text-overflow: ellipsis;
    z-index: 11;
    overflow: hidden;
}

.course97-impact {
    position: relative;
    width: 100%;
    height: 58px;
    margin: 3px 0 0 0;
    z-index: 12;
}
.course97-cta {
    position: absolute;
    width: 165px;
    height: 58px;
    top: 0.5px;
    left: 200px;
    background: #3e3e3e;
    z-index: 18;
    overflow: hidden;
    border-radius: 32px 0 0 32px;
    backdrop-filter: blur(2px);
    box-shadow: 0 9px 7.3px 0 rgba(0, 0, 0, 0.18) inset;
}
.course97-input-1 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    position: relative;
    width: 119px;
    margin: 17px 0 0 25.5px;
    z-index: 20;
}
.course97-join {
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 17px;
    color: #ffffff;
    font-family: SVN-Gilroy, var(--default-font-family);
    font-size: 16px;
    font-weight: 700;
    line-height: 16.8px;
    text-align: left;
    white-space: nowrap;
    z-index: 21;
}
.course97-arrow-right-circle {
    flex-shrink: 0;
    position: relative;
    width: 24px;
    height: 24px;
    background: url(https://learningchain.vn/wp-content/themes/flatsome-child/images/V2v3ebiuP7.svg) no-repeat center;
    background-size: cover;
    z-index: 22;
}
.course97-background {
    position: absolute;
    width: 203.811px;
    height: 58px;
    top: 0;
    left: -0.5px;
    background: url(https://learningchain.vn/wp-content/themes/flatsome-child/images/Pccn2KFeTW.svg) no-repeat center;
    background-size: cover;
    z-index: 19;
}
.course97-timeline {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    position: absolute;
    width: 121.103px;
    height: 36px;
    top: 10.5px;
    left: 14px;
    z-index: 13;
}
.course97-light-effect {
    position: absolute;
    width: 80px;
    height: 100px;
    bottom: -32px;
    left: -30px;
    z-index: 50;
    background-size: contain; 
    background-position: center;
}
.course97-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 2px;
    position: relative;
    width: 108.103px;
    z-index: 15;
}
.course97-sub-title {
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 17px;
    color: #ffffff;
    font-family: SVN-Gilroy, var(--default-font-family);
    font-size: 14px;
    font-weight: 300;
    line-height: 16.8px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 16;
    overflow: hidden;
}
.course97-sub-title-2 {
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 17px;
    color: #ffffff;
    font-family: SVN-Gilroy, var(--default-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 16.8px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 17;
    overflow: hidden;
}

.course97-status {
    position: absolute;
    width: 100%;
    height: 45px;
    top: 0;
    left: 0;
    z-index: 3;
    overflow: hidden; /* Giữ lại để bo tròn góc của lớp nền bị mờ */
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    display: flex;
    align-items: center;
}

.course97-status::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(190, 172, 172, 0.35), rgba(255, 255, 255, 0.35));
    filter: blur(15px);
    /* z-index: -1 sẽ đặt lớp này ngay phía sau nội dung của .course97-status */
    z-index: -1; 
}

.course97-frma {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    position: relative;
    width: 327px;
    margin: 0 15px;
    z-index: 20;
}
.course97-atom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
    position: relative;
    width: 87.741px;
    height: 30.243px;
    padding: 7px 11px;
    background: rgba(231, 232, 236, 0.24);
    z-index: 25;
    overflow: hidden;
    border-radius: 24px;
}
.course97-frame {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 8px;
    position: relative;
    width: 65px;
    z-index: 6;
}
.course97-google-cardboard-logo {
    flex-shrink: 0;
    position: relative;
    width: 16px;
    height: 16px;
    background: url(https://learningchain.vn/wp-content/themes/flatsome-child/images/C3UebzbXk1.svg) no-repeat center;
    background-size: cover;
    z-index: 7;
}
.course97-online {
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 15px;
    color: #ffffff;
    font-family: SVN-Gilroy, var(--default-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 14.7px;
    text-align: left;
    white-space: nowrap;
    z-index: 100;
}

@media (min-width: 412px) and (max-width: 440px) {
    .course97-cta {
        left: 49vw !important;
    }
}