/* <div class="btn-container">
        <div class="btn-action">
            <div class="btn-left">
                <span class="btn_after">点击探索</span>
            </div>
            <div class=" btn-right">
                <span class="btn_last"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                        fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
                        <path
                            d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
                    </svg></span>
            </div>
        </div>
    </div> */
/*   按钮效果 start ===================================== */
.btn-container {
    display: inline-block;
    position: relative;
    overflow: visible;
    min-width: fit-content;
}

.btn-action {
    position: relative;
    display: flex;
    align-items: stretch;
    /* 拉伸子项使高度一致 */
    font-size: clamp(0.875rem, 1.25vw, 1rem);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
    height: 2.5rem;
    justify-items: center;
    align-items: center;
    transition: all 0.3s ease;
    background-color:   #f3ebe4;
}
.btn_last svg {

    height: 24px;;

}
.btn-left {
    padding: 0.25rem  1rem;
    /* 只留水平内边距，交给父容器控制高度 */
    background-color: transparent;
    color: #333;
    transition: all 0.3s ease;
    position: relative;
    z-index: 5;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.btn-left::before {
    content: '';
    position: absolute;
    inset: 0;
    height: 100%;;
    background-color: #f3ebe4;
    z-index: 1;
    /* 从左到右消失 -> 锚定右边 */
    transform-origin: right center;
    transform: scaleX(1);
    transition: transform 300ms ease;
    will-change: transform;
}

.btn-right {
    padding: 0.25rem  1rem 0.25rem 0;
    background-color: transparent;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.btn-right::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: #f3ebe4;
    /* background-color: transparent; */
    z-index: 1;
    /* opacity: .5; */
}

.btn-right::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #f3ebe4;
    z-index: 2;
    /* 从右到左消失 -> 锚定左边 */
    transform-origin: left center;
    transform: scaleX(1);
    transition: transform 300ms ease;
    will-change: transform;
}

.btn_after {
    transition: color 0.3s ease;
    position: relative;
    z-index: 3;
    text-decoration: none;
    color:#333 !important;
}

.btn_last {
    transition: transform 0.3s ease, color 0.3s ease;
    position: relative;
    z-index: 3;
    color: #d6001c;
}

/* 悬停效果 */
.btn-action:hover {
    background-color:transparent !important;
}
.btn-action:hover .btn-left::before {
    transform: scaleX(0);
}
.btn-action:hover .btn-right::before
{
background-color: #f3ebe4;
}
.btn-action:hover .btn_after {
    font-family: 'Mulish-Bold','Mulish', 'Rubik', 'Arial', sans-serif;
    font-weight: 900;
}

.btn-action:hover .btn-right::after {
    transform: scaleX(0);

}

.btn-action:hover .btn_last {
    transform: translateX(1.25rem);
    color: #d6001c;
}
/*   按钮效果 end ===================================== */