/* ================= Biến CSS Chung ================= */


/* 1. Style cho khung bao ngoài (thẻ div có class ttitle_ky-thuat_cong_nghe) */

.ttitle_ky-thuat_cong_nghe {
    width: 100%;
    max-width: var(--id4-container-width);
    margin: 0 auto;
    padding: 65px 0px 30px 0px;
    box-sizing: border-box;
    text-align: center;
    display: block;
}


/* 2. Style cho thẻ H2 nằm bên trong class đó */

.ttitle_ky-thuat_cong_nghe h2 {
    /* Font và màu sắc */
    font-family: var(--id4-font-main);
    color: var(--id4-color-text-title);
    font-size: var(--id4-font-size-title);
    font-weight: var(--id4-font-weight-title);
    text-transform: uppercase;
    line-height: 1.5;
    margin: 0;
    letter-spacing: 0.5px;
    display: inline-block;
}


/* --- RESPONSIVE (Áp dụng lên thẻ h2 con) --- */


/* Mobile (< 768px) */

@media (max-width: 767px) {
    .ttitle_ky-thuat_cong_nghe h2 {
        font-size: 16px;
        padding: 0 5px;
    }
}


/* Tablet (768px - 1023px) */

@media (min-width: 768px) and (max-width: 1023px) {
    .ttitle_ky-thuat_cong_nghe h2 {
        font-size: 22px;
    }
}


/* Desktop (>= 1024px) */

@media (min-width: 1024px) {
    .ttitle_ky-thuat_cong_nghe h2 {
        font-family: var(--id4-font-main);
        color: var(--id4-color-text-title);
        font-size: var(--id4-font-size-title);
        font-weight: var(--id4-font-weight-title);
    }
}


/* end tiêu đề */


/* ================= Ca lâm sàng ================= */


/* Container bao ngoài: ttitle_ca_lam_sang */

.ttitle_ca_lam_sang {
    width: 100%;
    max-width: var(--id4-container-width);
    margin: 0 auto;
    padding: 70px 15px 15px 15px;
    box-sizing: border-box;
    text-align: center;
    display: block;
}


/* Thẻ H2 bên trong */

.ttitle_ca_lam_sang h2 {
    font-family: var(--id4-font-main);
    color: var(--id4-color-text-title);
    font-weight: var(--id4-font-weight-title);
    font-size: var(--id4-font-size-title);
    text-transform: uppercase;
    line-height: 1.4;
    margin: 0;
    letter-spacing: 0.5px;
    display: inline-block;
}


/* --- RESPONSIVE CHO ttitle_ca_lam_sang --- */


/* Mobile (< 768px) */

@media (max-width: 767px) {
    .ttitle_ca_lam_sang h2 {
        /* Mobile: 65% kích thước gốc (~20px) */
        font-size: calc(var(--id4-font-size-title) * 0.65);
        padding: 0 5px;
    }
}


/* Tablet (768px - 1023px) */

@media (min-width: 768px) and (max-width: 1023px) {
    .ttitle_ca_lam_sang h2 {
        /* Tablet: 80% kích thước gốc (~25px) */
        font-size: calc(var(--id4-font-size-title) * 0.8);
    }
}


/* ================= end Ca lâm sàng ================= */


/* --- Layout Chung --- */

.id4_slider_wrapper {
    max-width: var(--id4-container-width);
    margin: 0 auto;
    padding: 0px 20px var(--id4-header-height) 20px;
    position: relative;
    box-sizing: border-box;
}

.id4_slider_viewport {
    width: 100%;
    overflow: hidden;
}

.id4_slider_track {
    display: flex;
    padding-bottom: 25px;
    gap: var(--id4-gap);
    width: 100%;
    transition: transform 0.5s ease-in-out;
}


/* --- Card Styling --- */

.id4_slider_card {
    background: #fff;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    box-shadow: var(--id4tv-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}


/* Kích thước Card mặc định (Desktop/Tablet: 3 cột) */

.id4_slider_card {
    /* Công thức: (100% - (Tổng gap)) / Số cột */
    /* 3 cột => có 2 khoảng gap */
    width: calc((100% - (2 * var(--id4-gap))) / 3);
}

.id4_card_img {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #eee;
    margin: 12px;
    border-radius: 8px;
}

.id4_card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.id4_slider_card:hover .id4_card_img img {
    transform: scale(1.05);
}

.id4_card_body {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.id4_card_title {
    font-family: var(--id4-font-main);
    color: var(--id4-color-text-title);
    font-size: var(--id4-font-weight-desript);
    font-weight: var(--id4-font-weight-small-bold);
    text-transform: uppercase;
    margin: 0 0 10px;
    line-height: 1.4;
}

.id4_card_title a {
    color: var(--id4-button-color);
    text-decoration: none;
}

.id4_card_excerpt {
    font-family: var(--id4-font-main);
    font-weight: var(--id4-font-weight-desript);
    color: var(--id4-color-text-desription);
    line-height: 1.4;
    margin-bottom: 15px;
    flex: 1;
    text-align: justify;
}

.id4_card_btn {
    font-family: var(--id4-font-main);
    font-size: var(--id4-font-size-desription);
    background: var(--id4-button-color);
    padding: var(--id4-padding-height-button) var(--id4-padding-width-button);
    font-weight: var(--id4-font-weight-title);
    display: inline-block;
    color: #fff;
    border-radius: 20px;
    text-decoration: none;
    width: fit-content;
}

.id4_card_btn:hover {
    background: var(--id4-button-color);
    transform: scale(1.05);
    color: #fff;
}


/* --- Dots Navigation (Thanh điều hướng) --- */

.id4_slider_dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 5px;
    line-height: 0 !important;
    padding: 0 !important;
}

.id4_dot {
    width: 35px;
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.id4_dot.active {
    background: var(--id4-button-color);
}


/* ================= RESPONSIVE ================= */


/* TABLET (giống Desktop theo yêu cầu: 3 card) */

@media (max-width: 991px) {
    /* Không cần đổi CSS vì mặc định bên trên đã là 3 cột */
}


/* MOBILE (< 768px) */

@media (max-width: 767px) {

    /* 1. Bật tính năng cuộn ngang Native */
    .id4_slider_viewport {
        overflow: visible;
        /* Để hiển thị shadow nếu bị cắt */
    }

    .id4_slider_track {
        overflow-x: auto;
        /* Cho phép cuộn */
        scroll-snap-type: x mandatory;
        /* Bắt dính card vào giữa */
        scroll-behavior: smooth;
        padding-bottom: 20px;
        /* Chừa chỗ cho shadow */
        /* Reset transform do JS desktop gây ra (nếu có) */
        transform: none !important;
        /* Ẩn thanh scrollbar xấu xí */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .id4_slider_track::-webkit-scrollbar {
        display: none;
    }

    /* 2. Card chiếm full chiều rộng (1 card/view) */
    .id4_slider_card {
        width: 100%;
        /* Hoặc 85% nếu muốn lộ 1 chút card sau */
        margin-right: 0;
        scroll-snap-align: center;
        /* Khi thả tay, card sẽ nằm giữa */
    }

    /* 3. Ẩn Dots Navigation */
    .id4_slider_dots {
        display: none !important;
    }
}