/*
Theme Name: Cosmestic
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* Hộp swatch kiểu Shopee */
.variation-radios { display:flex; flex-wrap:wrap; gap:8px; margin:.5rem 0 1rem; }
.variation-radios .swatch { position:relative; }
.variation-radios .swatch input { position:absolute; inset:0; opacity:0; pointer-events:none; }
.variation-radios .swatch span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:96px; min-height:40px; padding:8px 12px;
  border:1px solid #e5e7eb; border-radius:8px; background:#fff; 
  font-size:14px; line-height:1; cursor:pointer; transition:.2s ease;
}
.variation-radios .swatch:hover span{ border-color:#d1d5db; }
.variation-radios .swatch input:checked + span{
  border-color:#f97316; background:#fff7ed; color:#b45309; box-shadow:0 0 0 2px #fde68a inset;
}
.variation-radios .swatch input:disabled + span{
  color:#9ca3af; background:#f9fafb; border-style:dashed; cursor:not-allowed; opacity:.7;
}

/* Nếu muốn ô tự co theo chữ nhưng vẫn gọn */
.variation-radios .swatch span { min-width:auto; padding:8px 14px; }



@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}