.show-more-wrapper {
    margin-bottom: 20px;
}

.show-more-trigger,
.show-less-trigger {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    gap: 5px;
}

.show-more-content {
    display: none;
    margin-top: 10px;
}

.show-more-trigger .show-more-text::after,
.show-less-trigger .show-less-text::after {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;

    -webkit-mask: url(../../images/arrow-down.svg) no-repeat center / contain;
    mask: url(../../images/arrow-down.svg) no-repeat center / contain;

    background-color: #007AFF;
    margin-left: 5px;
}

/* Rotate riêng cho "less" */
.show-less-trigger .show-less-text::after {
    transform: rotate(180deg);
}

/* Hover state tối ưu (không làm shift layout) */
.show-more-text:hover,
.show-less-text:hover {
    color: #E03C31;
    background: #FFECEB;
    border-radius: 4px;
    padding: 5px 11px;
    transition: all 0.2s ease;
}