.lsa{
    position:relative
}

.lsa-left{
    position:sticky;
    top:120px;
    height:fit-content
}

.lsa-item{
    position:relative;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    overflow:hidden;
    transition:all .35s ease;
    box-shadow:0 8px 25px rgba(15,23,42,.05)
}

.lsa-item::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:#2d94ed;
    transform:scaleY(0);
    transition:transform .35s ease;
    transform-origin:top
}

.lsa-item:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(45,148,237,.15);
    border-color:#bfdbfe
}

.lsa-item.active{
    border-color:#93c5fd;
    background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
    box-shadow:0 22px 50px rgba(45,148,237,.18)
}

.lsa-item.active::before{
    transform:scaleY(1)
}

.lsa-head{
    padding:15px 20px;
    cursor:pointer;
    user-select:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.lsa-head span{
    font-size:20px;
    line-height:1.4;
    color:#0f172a;
    transition:all .3s ease
}

.lsa-item.active .lsa-head span{
    color:#2d94ed
}

.lsa-arrow{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eff6ff;
    color:#2d94ed;
    font-size:18px;
    transition:all .35s ease;
    box-shadow:0 4px 10px rgba(45,148,237,.12)
}

.lsa-item.active .lsa-arrow{
    transform:rotate(180deg);
    background:#2d94ed;
    color:#fff;
    box-shadow:0 10px 25px rgba(45,148,237,.35)
}

.lsa-body{
    max-height:0;
    overflow:hidden;
    transition:max-height .45s ease
}

.lsa-body .p-4{
    padding:0 28px 28px;
    background:transparent
}

.lsa-body p{
    margin:0;
    font-size:18px;
    line-height:1.9;
    color:#475569
}

.lsa-item.active .lsa-body p{
    color:#334155
}

.lsa-item + .lsa-item{
    margin-top:20px
}

@media(max-width:1024px){

    .lsa-left{
        position:relative;
        top:0
    }
}

@media(max-width:768px){

    .lsa-head{
        padding:18px 20px;
        gap:14px
    }

    .lsa-head span{
        font-size:18px;
        line-height:1.5
    }

    .lsa-arrow{
        width:40px;
        height:40px;
        min-width:40px;
        font-size:15px
    }

    .lsa-body .p-4{
        padding:0 20px 22px
    }

    .lsa-body p{
        font-size:15px;
        line-height:1.8
    }

    .lsa-item{
        border-radius:18px
    }
}