/** Shopify CDN: Minification failed

Line 12:0 Unexpected "<"
Line 72:0 Unexpected "<"
Line 76:2 Comments in CSS use "/* ... */" instead of "//"
Line 87:8 Comments in CSS use "/* ... */" instead of "//"
Line 92:8 Comments in CSS use "/* ... */" instead of "//"
Line 96:8 Comments in CSS use "/* ... */" instead of "//"
Line 115:2 Comments in CSS use "/* ... */" instead of "//"

**/
<style>
/* Accent thương hiệu: đổi nếu muốn */
:root { --variant-accent: var(--color-foreground); }

/* Bố cục pills */
.product-form__input--pill{ display:flex; flex-wrap:wrap; gap:8px; }

/* Ẩn radio gốc nhưng vẫn truy cập được */
.product-form__input--pill input[type='radio']{
  position:absolute; width:1px; height:1px; margin:0; padding:0;
  border:0; opacity:0; clip:rect(0 0 0 0); clip-path: inset(50%); overflow:hidden; pointer-events:none;
}

/* Nhãn mặc định */
.product-form__input--pill input[type='radio'] + label,
.product-form__input--pill .variant__button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border:1.5px solid rgba(var(--color-foreground), .25);
  border-radius:9999px; background:#fff; color:rgb(var(--color-foreground));
  font-size:1.4rem; letter-spacing:.1rem; line-height:1; cursor:pointer; user-select:none;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s;
}

/* Hover nhẹ */
.product-form__input--pill input[type='radio'] + label:hover,
.product-form__input--pill .variant__button:hover{ border-color: rgb(var(--variant-accent)); }

/* Khi được chọn – qua :checked, aria-checked hoặc class .is-selected */
.product-form__input--pill input[type='radio']:checked + label,
.product-form__input--pill .variant__button[aria-checked="true"],
.product-form__input--pill label.is-selected{
  border-color: rgb(var(--variant-accent));
  border-width: 2px;
  background: rgb(var(--variant-accent));
  color: rgb(var(--color-background));
  box-shadow: 0 0 0 3px rgba(var(--variant-accent), .16), inset 0 0 0 2px rgba(0,0,0,.04);
  transform: scale(1.04);
  font-weight:600;
}

/* Dấu check giúp nhận biết tức thì */
.product-form__input--pill input[type='radio']:checked + label::after,
.product-form__input--pill .variant__button[aria-checked="true"]::after,
.product-form__input--pill label.is-selected::after{
  content:"✓"; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:8px; border-radius:9999px;
  background: rgb(var(--color-background)); color: rgb(var(--variant-accent)); font-size:12px; line-height:1;
}

/* Focus rõ ràng cho bàn phím */
.product-form__input--pill input[type='radio']:focus-visible + label,
.product-form__input--pill .variant__button:focus-visible{
  outline:3px solid rgba(var(--variant-accent), .3); outline-offset:2px;
}

/* Disabled nhất quán */
.product-form__input--pill input[type='radio']:disabled + label,
.product-form__input--pill .variant__button[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; text-decoration:line-through;
}
</style>

<script>
(function(){
  // Polyfill CSS.escape nếu thiếu
  if (typeof window.CSS === 'undefined' || typeof window.CSS.escape !== 'function') {
    window.CSS = window.CSS || {};
    window.CSS.escape = function(value){ return String(value).replace(/[^a-zA-Z0-9_\-]/g, '\\$&'); };
  }

  function enhancePickers(root){
    var sets = root.querySelectorAll('fieldset.product-form__input--pill');
    sets.forEach(function(fs){
      var inputs = fs.querySelectorAll('input[type="radio"]');
      inputs.forEach(function(inp){
        // Làm sạch name có thể chứa xuống dòng vô tình
        if (inp.name) inp.name = inp.name.trim();
        var lab = fs.querySelector('label[for="'+CSS.escape(inp.id)+'"]');
        if (!lab) return;

        // Trạng thái ban đầu
        lab.classList.toggle('is-selected', inp.checked);
        lab.setAttribute('aria-checked', inp.checked ? 'true' : 'false');

        // Lắng nghe thay đổi để đồng bộ tất cả nhãn
        inp.addEventListener('change', function(){
          inputs.forEach(function(other){
            var olab = fs.querySelector('label[for="'+CSS.escape(other.id)+'"]');
            if (!olab) return;
            var sel = !!other.checked;
            olab.classList.toggle('is-selected', sel);
            olab.setAttribute('aria-checked', sel ? 'true' : 'false');
          });
        });
      });
    });
  }

  function init(){ enhancePickers(document); }

  if (document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', init); }
  else { init(); }

  // Bắt trường hợp theme tái render options khi đổi biến thể khác
  var mo = new MutationObserver(function(muts){
    var need = false;
    muts.forEach(function(m){
      m.addedNodes && m.addedNodes.forEach(function(n){
        if (n.nodeType === 1 && (n.matches?.('fieldset.product-form__input--pill') || n.querySelector?.('fieldset.product-form__input--pill'))) need = true;
      });
    });
    if (need) enhancePickers(document);
  });
  mo.observe(document.body, { childList:true, subtree:true });
})();
</script>