/**
 * Swatch chọn biến thể — dùng chung storefront (chuẩn computer_v1).
 * Áp dụng: trang chi tiết SP + modal #storefrontVariantModal
 */
.content-detail-product .select-variant-swatch,
.svm-modal-detail .select-variant-swatch {
    padding: 12px 0 4px;
    margin-bottom: 8px;
}

.content-detail-product div.select-swatch input[type='radio'],
.svm-modal-detail div.select-swatch input[type='radio'] {
    display: none;
}

.content-detail-product div.swatch div.header,
.svm-modal-detail div.swatch div.header {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 10px;
}

.content-detail-product div.select-swap,
.svm-modal-detail div.select-swap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 12px;
}

.content-detail-product div.select-swap > div.swatch-element,
.svm-modal-detail div.select-swap > div.swatch-element {
    min-width: 88px;
    max-width: 220px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.content-detail-product div.swatch div.select-swap label.swatch-select,
.svm-modal-detail div.swatch div.select-swap label.swatch-select {
    cursor: pointer;
    display: block;
    margin: 0;
    user-select: none;
}

.content-detail-product div.select-swap > div.swatch-element.disabled,
.svm-modal-detail div.select-swap > div.swatch-element.disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.content-detail-product div.select-swap > div.swatch-element.disabled label.swatch-select,
.svm-modal-detail div.select-swap > div.swatch-element.disabled label.swatch-select {
    cursor: not-allowed;
}

.content-detail-product div.swatch div.select-swap label.swatch-select > span,
.svm-modal-detail div.swatch div.select-swap label.swatch-select > span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

.content-detail-product div.swatch div.select-swap label.swatch-select span i,
.svm-modal-detail div.swatch div.select-swap label.swatch-select span i {
    display: none;
}

.content-detail-product div.select-swap > div.swatch-element.active,
.content-detail-product div.select-swap > div.swatch-element:hover:not(.disabled),
.svm-modal-detail div.select-swap > div.swatch-element.active,
.svm-modal-detail div.select-swap > div.swatch-element:hover:not(.disabled) {
    background: var(--color1, var(--red, #e02424));
    border-color: var(--color1, var(--red, #e02424));
}

.content-detail-product div.select-swap > div.swatch-element.active span,
.content-detail-product div.select-swap > div.swatch-element:hover:not(.disabled) span,
.svm-modal-detail div.select-swap > div.swatch-element.active span,
.svm-modal-detail div.select-swap > div.swatch-element:hover:not(.disabled) span {
    color: #fff;
}

.content-detail-product div.swatch.checked div.select-swap label.swatch-select.sd span i,
.svm-modal-detail div.swatch.checked div.select-swap label.swatch-select.sd span i {
    display: inline-block;
}

.content-detail-product div.swatch.checked div.select-swap label.swatch-select.sd span i:before,
.svm-modal-detail div.swatch.checked div.select-swap label.swatch-select.sd span i:before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}