@charset "UTF-8";

/* ==========================================================================
   CARELINK PAGE - HERO BANNER SECTION
   ========================================================================== */

/* Khung bọc ngoài cùng */
.cl-hero-banner {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 70px 0 80px 0; 
    background-color: #ffffff; 
    overflow: hidden; 
}

/* Container chuẩn 1080px */
.cl-container {
    width: 100%;
    max-width: 1080px;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Lưới Flexbox chia 2 cột */
.cl-banner-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* ----------------------------------
   1. CỘT TRÁI - ẢNH MINH HỌA
---------------------------------- */
.cl-banner-visual {
    flex: 0 0 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ảnh chính */
.cl-hero-img {
    max-width: 100%;
    height: auto;
    position: relative;
    z-index: 2; 
    transform: scale(1.05); 
}

/* Vòng tròn nét đứt trang trí nền */
.cl-decor-circles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    height: 480px;
    border: 1px dashed rgba(243, 112, 33, 0.4);
    border-radius: 50%;
    z-index: 1;
}

.cl-decor-circles::before {
    content: '';
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border: 1px solid rgba(243, 112, 33, 0.15);
    border-radius: 50%;
}

/* ----------------------------------
   2. CỘT PHẢI - NỘI DUNG CHỮ
---------------------------------- */
.cl-banner-text {
    flex: 0 0 52%; 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Tiêu đề phụ cam (Kicker) */
.cl-kicker {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #f37021;
    margin-bottom: 10px;
}

/* Đoạn mô tả */
.cl-desc {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 95%; 
}

/* Khối bằng chứng xã hội (Social Proof) */
.cl-social-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.cl-avatars {
    display: flex;
}

.cl-avatar-item {
    width: 53px;
    height: 53px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    margin-left: -10px; 
    overflow: hidden;
    background-color: #f0f0f0;
}

.cl-avatar-item:first-child {
    margin-left: 0;
}

.cl-avatar-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cl-proof-text {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #f37021;
}

/* Tiêu đề chính lớn */
.cl-headline {
    font-size: 42px;
    line-height: 1.3;
    margin-bottom: 30px;
}

/* Dòng trên màu cam chữ lớn */
.cl-hl-orange {
    font-family: "1FTV VIP Neusharp", "Roboto", sans-serif;
    font-weight: 700;
    color: #f37021;
    text-transform: uppercase;
}

/* Dòng dưới màu xám đen */
.cl-hl-dark {
    font-family: "1FTV VIP Neusharp", "Roboto", sans-serif;
    font-weight: 700;
    color: #4a4a4a;
}

/* Nút CTA Liên hệ */
.cl-btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, #ff9e13 0%, #f37121 100%);
    color: #ffffff;
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: 500;
    padding: 6px 24px 6px 6px; 
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cl-btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(243, 112, 33, 0.3);
}

/* Icon tròn nằm trong nút */
.cl-btn-icon {
    width: 34px;
    height: 34px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   CARELINK - MODULES SECTION (CÁC NHÓM NGHIỆP VỤ)
   ========================================================================== */
.cl-modules-section {
    width: 100%;
    /* Gradient theo chuẩn mã màu trong thiết kế */
    background: linear-gradient(180deg, #FFF3E7 0%, #FFFFFE 50%, #FFF4E9 100%);
    padding: 30px 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.cl-modules-container {
    display: flex;
    align-items: center;
    gap: 0px;
}

/* --- Cột Trái: Tiêu đề --- */
.cl-modules-left {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cl-modules-title {
    font-family: "1FTV VIP Neusharp", "Roboto", sans-serif;
    font-size: 32px;
    color: #4a4a4a;
    line-height: 1.35;
    margin-bottom: 20px;
}

.cl-text-orange {
    color: #f37021;
}

/* Nút hình Oval nhạt */
.cl-modules-btn {
    display: inline-flex;
    width: 205px;
    height: 32px;
    background: linear-gradient(90deg, #ffffff 0%, #fef3eb 100%);
    border-radius: 16px;
    align-items: center;
    padding-left: 2px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(243, 112, 33, 0.08);
    transition: transform 0.3s ease;
}

.cl-modules-btn:hover {
    transform: translateY(-2px);
}

.cl-btn-arrow {
    width: 28px;
    height: 28px;
    background-color: #f37021;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Cột Phải: Slider --- */
.cl-modules-right {
    flex: 1;
    min-width: 0; /* Quan trọng: Ngăn slick slider phá vỡ flexbox */
}

.cl-slider-wrapper {
    position: relative;
    width: 100%;
}

.cl-modules-slider {
    margin: 0 -12px; 
}

.cl-module-card {
    padding: 5px 6px; 
}

/* Box thẻ nội dung trắng */
.cl-card-inner {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 15px 16px 0px 16px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
    height: 280px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cl-card-inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(243, 112, 33, 0.08);
}

.cl-card-icon {
    width: 44px;
    height: 44px;
    background-color: #fff3e7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

.cl-card-title {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #4a4a4a;
    margin-bottom: 15px;
    line-height: 1.4;
    min-height: 44px; 
}

.cl-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cl-card-list li {
    position: relative;
    padding-left: 12px;
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    color: #555555;
    line-height: 1.4;
}

.cl-card-list li::before {
    content: ''; /* Không dùng ký tự text nữa */
    position: absolute;
    left: 0;
    top: 6px; /* Căn chỉnh vị trí dấu chấm so với dòng chữ */
    width: 4px; /* Kích thước dấu chấm */
    height: 4px; /* Kích thước dấu chấm */
    background-color: #555555; /* Màu đen/xám đậm */
    border-radius: 50%; /* Bo tròn để tạo thành dấu chấm */
}

/* --- Tùy chỉnh Khu vực Điều khiển Slider (Mũi tên & Dấu chấm) --- */
.cl-slider-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Giảm gap để nút và dot gần nhau hơn theo thiết kế */
    margin-top: 20px; /* Thêm margin top cho thoáng */
}

/* Khối bọc các dots */
.cl-dots-wrapper {
    display: flex;
    align-items: center;
}

.cl-slider-nav .custom-cl-arrow {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #f37021;
    transition: opacity 0.3s;
}

/* Ẩn bớt độ mờ của mũi tên khi disabled để giống thiết kế hơn */
.cl-slider-nav .custom-cl-arrow.slick-disabled {
    opacity: 0.2; /* Nhạt hơn */
    cursor: not-allowed;
}

.cl-slider-nav .slick-dots {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px; /* Khoảng cách giữa các chấm */
}

.cl-slider-nav .slick-dots li {
    margin: 0;
}

.cl-slider-nav .slick-dots button {
    font-size: 0;
    width: 8px; /* Tăng kích thước dot mặc định lên một chút */
    height: 8px;
    border-radius: 50%;
    background-color: #cccccc; /* Màu xám nhạt */
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Biến dấu chấm thành viên thuốc cam khi Active */
.cl-slider-nav .slick-dots .slick-active button {
    width: 24px; /* Kéo dài thành hình viên thuốc */
    height: 8px;
    border-radius: 4px; /* Bo góc để tạo hình viên thuốc */
    background-color: #f37021; /* Màu cam */
}

.carelink-video-module {
    width: 100%;
    max-width: 1920px;
    padding: 30px 0 30px 0; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.carelink-video-module .sme-how-it-works-container {
    width: 1080px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carelink-video-module .sme-how-it-works-title {
    font-family: var(--desktop-heading-3-font-family), "1FTV VIP Neusharp", sans-serif;
    font-size: 36px;
    color: #f37021;
    margin-bottom: 40px;
    text-align: center;
}

/* Khung chứa video với đổ bóng và bo góc */
.carelink-video-module .sme-video-placeholder {
    width: 100%;
    max-width: 860px;
    aspect-ratio: 16 / 9;
    background-color: #d9d9d9;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.1); /* Hiệu ứng đổ bóng nổi */
}

.carelink-video-module .sme-video-placeholder iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.consult-banner-section {
    width: 100%;
    max-width: 1920px;
    margin: 40px auto 0px auto;
    background-image: url('../img/nhantuvantrienkhai.png'); 
    background-size: cover;      /* Đảm bảo ảnh phủ kín toàn bộ banner */
    background-position: center; /* Căn giữa ảnh */
    background-repeat: no-repeat;
    padding: 30px 20px;
    display: flex;
    justify-content: center;
    border-radius: 8px;
}

.consult-banner-container {
    width: 100%;
    max-width: 1080px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 100px;
}

.consult-banner-text {
    font-family: var(--desktop-heading-3-font-family), "1FTV VIP Neusharp", sans-serif;
    font-size: 42px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.btn-consult-now {
    background-color: #ffffff;
    color: #f37021;
    font-family: var(--common-title-font-family), "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.btn-consult-now:hover {
    background-color: #fff6ee;
}

.sme-deployment-section{
    padding-bottom: 10px!important;
}

/* ==========================================================================
   CARELINK - BENEFITS SECTION (LỢI ÍCH - BẢN ĐÃ TỐI ƯU)
   ========================================================================== */
.cl-benefits-section {
    width: 100%;
    background-color: #ffffff;
    padding: 40px 0 0 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.cl-benefits-grid {
    display: flex;
    align-items: flex-start; 
    justify-content: space-between;
    gap: 60px; 
}

/* --- Cột trái --- */
.cl-benefits-left {
    flex: 0 0 33%;
    display: flex;
    flex-direction: column;
}

.cl-benefits-title {
    font-family: "1FTV VIP Neusharp", "Roboto", sans-serif;
    font-size: 40px;
    line-height: 1.25; 
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0; 
}

.cl-title-gradient,
.cl-title-gradient span {
    background: linear-gradient(180deg, #FF9E13 0%, #F37121 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    display: inline-block;
}

/* Kế thừa phong cách nền cam bo góc của các module khác */
.cl-image-bg {
    margin: 35px auto 0 auto;
}

.cl-medical-kit-img {
    width: 100%;
    height: auto;
    transform: scale(1.05); /* Phóng to nhẹ ảnh lấn ra khỏi khung giống thiết kế */
}

/* --- Cột phải (Danh sách) --- */
.cl-benefits-right {
    flex: 1; 
}

.cl-benefit-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.cl-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.cl-benefit-item::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #f37021; 
    margin-top: 5px; /* Điều chỉnh nhẹ để mũi tên thẳng hàng dòng đầu */
    flex-shrink: 0;
}

.cl-benefit-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cl-benefit-title {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #f37021;
    margin: 0;
    line-height: 1.4;
}

/* Sử dụng format chung của hệ thống */
.cl-benefit-desc {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    color: #555555;
    line-height: 1.5;
    margin: 0;
}

@media (min-width: 992px) {
    .cl-modules-slider .custom-cl-arrow {
        display: none !important;
    }
}

/* ==========================================================================
   RESPONSIVE CHO ĐIỆN THOẠI VÀ TABLET
========================================================================== */
@media (max-width: 991px) {
    .cl-hero-banner {
        padding: 40px 0 50px 0;
    }

    .cl-banner-grid {
        flex-direction: column;
        text-align: left;
        gap: 30px;
    }

    .cl-banner-text {
        order: 1;
        width: 100%;
        align-items: flex-start; 
    }

    .cl-banner-visual {
        order: 2;
        width: 100%;
        margin-top: 10px;
    }

    .cl-desc {
        max-width: 100%;
    }

    .cl-headline {
        font-size: 32px;
    }

    .cl-headline .cl-hl-orange {
        font-size: 30px;
    }

    .cl-headline .cl-hl-dark {
        font-size: 28px;
    }

    .cl-decor-circles {
        width: 320px;
        height: 320px;
    }

    .cl-decor-circles::before {
        width: 220px;
        height: 220px;
    }

    /* --- ĐÃ GỘP GỌN CSS CỦA MODULES SECTION --- */
    .cl-modules-section {
        padding: 37px 0 22px 0; 
    }

    .cl-modules-container {
        flex-direction: column;
        gap: 21px; 
    }

    .cl-modules-left {
        flex: none;
        width: 100%;
        align-items: center; 
        text-align: center;
    }

    .cl-modules-title {
        font-size: 28px; 
    }

    .cl-modules-title br {
        display: none; 
    }

    .cl-modules-title .cl-text-orange {
        display: block; 
    }

    .cl-modules-right {
        width: 100%;
    }

    /* --- CHỈNH MŨI TÊN ĐIỀU HƯỚNG RA 2 BÊN --- */
    .cl-modules-right .cl-slider-wrapper {
        position: relative;
    }

    .cl-modules-right .custom-cl-arrow {
        position: absolute;
        top: 135px; 
        transform: translateY(-50%);
        background-color: #ffffff;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f37021; 
        z-index: 10;
        cursor: pointer;
    }

    /* Định vị nằm sát viền 2 bên của slider */
    .cl-modules-right .cl-prev {
        left: 25px; 
    }

    .cl-modules-right .cl-next {
        right: 25px; 
    }

    /* Tạo khoảng cách cho các dấu chấm (dots) ở dưới cùng */
    .cl-slider-nav {
        margin-top: 15px;
    }

    .cl-card-inner {
        padding: 30px 75px; 
    }

    .carelink-video-module {
        padding-top: 0px;
    }

    .carelink-video-module .sme-how-it-works-title {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 20px !important;
    }

    .consult-banner-section {
        background-image: url('../img/bg-nhantuvantrienkhai-insightos.png') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        padding: 40px 20px !important;
        border-radius: 12px !important;
        margin: 20px 15px !important;
        width: auto !important;
    }

    .consult-banner-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
    }

    .consult-banner-text {
        font-size: 24px !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }

    .btn-consult-now {
        width: auto !important;
        justify-content: center !important;
        padding: 10px 28px !important;
        border-radius: 30px !important;
    }

    .cl-benefits-section {
        padding: 5px 0 0px 0 !important; /* Căn chỉnh khoảng cách trên dưới cho hợp lý với các section khác */
    }

    .cl-benefits-grid {
        flex-direction: column !important;
        gap: 30px !important; /* Thu hẹp khoảng cách giữa khối ảnh và khối danh sách */
    }

    .cl-benefits-left {
        width: 100% !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Ép căn giữa toàn bộ (chữ và ảnh) */
        text-align: center !important;
    }

    .cl-benefits-title {
        font-size: 28px !important;
        line-height: 1.4 !important;
        margin-top: 0 !important;
        margin-bottom: 15px !important; /* Khoảng cách từ chữ xuống ảnh */
        max-width: 320px !important; /* Kỹ thuật ép rớt dòng chữ đúng vị trí như bản thiết kế */
    }

    .cl-image-bg {
        max-width: 100% !important;
        width: 335px !important; /* Kích thước khung ảnh theo đúng tỷ lệ bản vẽ */
        margin: 0 auto !important; /* Xóa margin top dư thừa */
        padding: 0px !important; 
    }

    .cl-benefits-right {
        width: 100% !important;
    }

    .cl-benefit-list {
        gap: 18px !important; /* Thu gọn khoảng cách các dòng lợi ích lại 1 chút */
    }

    .cl-benefit-item {
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .cl-benefit-item::before {
        margin-top: 4px !important; /* Đẩy mũi tên lên xíu để thẳng tắp với đỉnh chữ h4 */
    }
    
    .deployment-image-wrapper-carelink {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .cl-card-inner{height:305px}

}

@media (max-width: 576px) {
    .cl-headline {
        font-size: 26px;
    }
    
    .cl-headline .cl-hl-orange {
        font-size: 28px;
    }

    .cl-headline .cl-hl-dark {
        font-size: 24px;
    }

    .cl-kicker {
        font-size: 15px;
    }
    
    /* Ép banner ảnh không bị quá khổ màn hình nhỏ */
    .cl-hero-img {
        max-width: 90%;
        transform: scale(1);
    }

    .cl-benefits-title {
        font-size: 25px !important;
        max-width: 280px !important; /* Ép rớt dòng chữ hoàn hảo trên màn hình hẹp */
    }
    
    .cl-benefit-title {
        font-size: 15px !important; /* Giảm cỡ chữ tiêu đề 1 xíu cho thanh thoát */
        margin-bottom: 3px !important;
    }

    .cl-benefit-desc {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
}