/*Status */

.status-tag {
    display: inline-block;
    padding: 0 .25rem;
    font-weight: 500;
    font-size: 10px;
    border-radius: 4px;
    line-height: 1.6;
}

.status-tag.white {
    color: #434657;
}

.status-tag.success {
    background: var(--status-success-color);
    color: #fff;
}

.status-tag.danger {
    background: var(--invalid-color);
    color: #fff;
}

.status-tag.yellow {
    background: var(--status-yellow-color);
    color: #fff;
}

.status-tag.red {
    background: var(--status-red-color);
    color: #fff;
}

.status-tag.blue {
    background: var(--focus-color);
    color: #fff;
}

.status-tag.gray {
    background: var(--button-disable-color);
    color: #fff;
}

.status-tag.sd-white {
    background: var(--input-disable-color);
    color: #434657;
}

.status-tag.sd-success {
    background: var(--status-sd-success-color);
    color: #2BB956;
}

.status-tag.sd-danger {
    background: var(--status-sd-danger-color);
    color: #C43C3C;
}

.status-tag.sd-yellow {
    background: var(--status-sd-yellow-color);
    color: #E6983A;
}

.status-tag.sd-red {
    background: var(--status-sd-red-color);
    color: #DF2C3B;
}

.status-tag.sd-blue {
    background: var(--status-sd-blue-color);
    color: #1990FF;
}

.status-tag.outline-white {
    background-color: #fff;
    color: var(--text-color);
    border: 0.5px solid var(--text-color);
}

.status-tag.outline-success {
    background-color: #fff;
    color: var(--status-success-color);
    border: 0.5px solid var(--status-success-color)
}

.status-tag.outline-danger {
    background-color: #fff;
    color: var(--invalid-color);
    border: 0.5px solid var(--invalid-color);
}

.status-tag.outline-yellow {
    background-color: #fff;
    color: var(--status-yellow-color);
    border: 0.5px solid var(--status-yellow-color);
}

.status-tag.outline-red {
    background-color: #fff;
    color: var(--status-outline-red-color);
    border: 0.5px solid var(--status-outline-red-color);
}

.status-tag.outline-blue {
    background-color: #fff;
    color: var(--focus-color);
    border: 0.5px solid var(--focus-color);
}

.status-tag.outline-gray {
    background-color: #fff;
    color: var(--button-disable-color);
    border: 0.5px solid var(--button-disable-color);
}

/*end status*/

/* avatar */

.avatar .avatar-icon {
    border-radius: 40px;
    width: 24px;
    height: 24px;
}

.avatar.king {
    display: inline-block;
    position: relative;
}

.avatar.king:after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    bottom: 2px;
    right: 0;
    background-image: url(../../image/duong/path.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(100% - 2px) calc(100% - 2px);
    background-color: #fff;
    border-radius: 100%;
}

.avatar.avatar-sm {
    width: 32px;
    height: 32px;
}

.avatar.avatar-sm .avatar-icon {
    width: 32px;
    height: 32px;
}

.avatar-sm.king:after {
    content: '';
    display: block;
    width: 11px;
    height: 11px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-image: url(../../image/duong/path.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(100% - 2px) calc(100% - 2px);
    background-color: #fff;
    border-radius: 100%;
}

.avatar.avatar-md {
    width: 40px;
    height: 40px;
}

.avatar.avatar-md .avatar-icon {
    width: 40px;
    height: 40px;
}

.avatar-md.king:after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-image: url(../../image/duong/path.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(100% - 2px) calc(100% - 2px);
    background-color: #fff;
    border-radius: 100%;
}

.avatar.avatar-lg {
    width: 48px;
    height: 48px;
}

.avatar.avatar-lg .avatar-icon {
    width: 48px;
    height: 48px;
}

.avatar-lg.king:after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-image: url(../../image/duong/path.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(100% - 2px) calc(100% - 2px);
    background-color: #fff;
    border-radius: 100%;
}

/* end avatar */

/* quantity */

.quantity {
    display: flex;
    width: 96px;
    flex-direction: row;
    justify-content: center;
    background: #fff;
    border-radius: 4px;
    border: 1px solid var(--border-default-color);
    padding: 0;
    text-align: center;
}

.quantity-min,
.quantity-max {
    width: 28px;
    height: 32px;
    position: relative;
    cursor: pointer;
}

.quantity-min:after,
.quantity-max:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.quantity-min:after {
    background-image: url(/assets/frontend/theme_5/image/duong/min.svg);
}

.quantity-max:before {
    background-image: url(/assets/frontend/theme_5/image/duong/max.svg);
}

input.quantity-number,
input.quantity-number:hover,
input.quantity-number:focus {
    border: none;
    padding: 4px 12px;
    width: 16px;
    border-radius: 0;
}

.quantity-min {
    border-right: 1px solid var(--border-default-color);
}

.quantity-max {
    border-left: 1px solid var(--border-default-color);
}

/* end quantity*/

/* slider button */

.slider-button-hover {
    border-radius: 0 20px 20px 0;
    text-align: center;
    display: inline-block;
    background: #D9D9D9;
    width: 40px;
    height: 40px;
}

.slider-button-hover img {
    padding: 10px;
}

.slider-button-default {
    background: rgba(220, 222, 233, 0.5);
}

.slider-button {
    border-radius: 20px 0 0 20px;
}

/* css border buttom gia soc*/

.border-bottom-destop {
    border-bottom: 1px solid #BCBFD6;
}