.action-btn {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 15px;
}

.action-btn a {
    
    padding: 5px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    font-weight: 400;
}

.preview-tool-btn {
    background-color: var(--rico-color-3);
    color: var(--rico-color-2);
}

.view-tool-btn {
    background-color: var(--rico-color-1);
    color: white;
}


.preview-tool-video {
    border-radius: 20px;
    overflow: hidden;
    display: flex;
}

.main-section-detail-tools {
    display: flex;
    gap: 20px;
    align-items: center;
}

.main-section-detail-tools img {
    width: 100%;
    border-radius: 15px;
}


/* ============== Responsive =============== */


@media screen and (max-width: 1024px) {

    .main-section-detail-tools {
        flex-direction: column-reverse;

    }
}


    .animated-visual-box {
        padding: 20px;
        min-height: 550px;
        perspective: 1000px;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .blob-bg {
        position: absolute;
        width: 300px;
        height: 300px;
        background: linear-gradient(135deg, var(--rico-color-13, #e0ebff) 0%, var(--rico-color-9, #f5f8ff) 100%);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        animation: morphBlob 8s ease-in-out infinite alternate;
        z-index: 0;
    }

    @keyframes morphBlob {
        0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg) scale(1); }
        100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(15deg) scale(1.05); }
    }

    .dashed-thread {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        animation: threadWiggle 6s ease-in-out infinite;
    }

    .dashed-thread path {
        fill: none;
        stroke: #818181;
        stroke-width: 1px;
        stroke-dasharray: 8 6;
        animation: dashMove 1.5s linear infinite;
        vector-effect: non-scaling-stroke;
    }

    @keyframes dashMove {
        to { stroke-dashoffset: -14; }
    }

    @keyframes threadWiggle {
        0%, 100% { transform: translateY(0px) scale(1); }
        50% { transform: translateY(-10px) scale(1.02); }
    }

    .floating-card {
        position: absolute;
        background: rgba(255, 255, 255, 0.95);
        padding: 15px 20px;
        border-radius: 15px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        border: 1px solid #fff;
        min-width: 250px;
        backdrop-filter: blur(10px);
        animation: floatY 6s ease-in-out infinite;
        z-index: 2;
    }

    .float-1 { top: 8%; right: 5%; animation-delay: 0s; }
    .float-2 { top: 32%; left: 0%; animation-delay: 1.5s; }
    .float-3 { top: 56%; right: 10%; animation-delay: 3s; }
    .float-4 { bottom: 8%; left: 5%; animation-delay: 4.5s; }

    @keyframes floatY {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-15px); }
    }

    .icon-circle {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .icon-blue { background: var(--rico-color-1, #1E6DF3); }
    .icon-dark { background: var(--rico-color-2, #111); }
    .icon-gray { background: var(--rico-color-11, #888); }
    .icon-green { background: #28a745; }

    .card-title {
        font-weight: 800;
        font-size: 15px;
        color: var(--rico-color-6, #333);
    }

    .card-sub {
        font-size: 12px;
        color: var(--rico-color-11, #777);
        margin-top: 3px;
    }
    
    .t-sms {
        font-size: 10px;
        color: #28a745;
        background: #d4edda;
        padding: 2px 8px;
        border-radius: 10px;
        margin-top: 4px;
        display: inline-block;
        font-weight: bold;
    }

    @media screen and (max-width: 1024px) {
        .animated-visual-box {
            min-height: 450px;
            padding: 10px;
            overflow: hidden;
        }

        .blob-bg {
            width: 200px;
            height: 200px;
        }

        .floating-card {
            min-width: 210px;
            padding: 10px 15px;
            border-radius: 12px;
        }

        .card-title {
            font-size: 13px;
        }

        .card-sub {
            font-size: 11px;
        }

        .icon-circle {
            width: 36px;
            height: 36px;
        }

        .img-svg-20 {
            width: 16px;
            height: 16px;
        }

        .float-1 { top: 8%; right: 5%; }
        .float-2 { top: 32%; left: 5%; }
        .float-3 { top: 56%; right: 5%; }
        .float-4 { bottom: 8%; left: 5%; }
    }