/* =========================================================
   O CHON BIEN THE - thay cho plugin Variation Swatches
   ========================================================= */

/* The select goc van o lai de WooCommerce xu ly, chi an khoi mat.
   Khong dung display:none vi se lam hong mot so trinh duyet doc man hinh. */
.vdd-sw-wrap select{
  position:absolute!important;
  /* min-width cua WooCommerce la 75%, no thang width:1px nen the select
     van rong 858px trong cot 517px va lam tran khoi. Phai go ca
     min-width lan max-width. */
  width:1px!important;height:1px!important;
  min-width:0!important;max-width:none!important;
  overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}

.vdd-sw{display:flex;flex-wrap:wrap;gap:var(--vdd-s2);list-style:none;margin:0;padding:0}

.vdd-sw__item{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--vdd-line-2);
  background:var(--vdd-shell);
  cursor:pointer;
  transition:border-color var(--vdd-dur) var(--vdd-ease),
             box-shadow var(--vdd-dur) var(--vdd-ease),
             background var(--vdd-dur) var(--vdd-ease);
}
.vdd-sw__item:hover{border-color:var(--vdd-gold-deep)}
.vdd-sw__item:focus-visible{outline:2px solid var(--vdd-gold-text);outline-offset:2px}

/* Dang duoc chon: vien nau dam + mot vong trong - nhin ro ngay */
.vdd-sw__item.is-selected{
  border-color:var(--vdd-brown);
  box-shadow:inset 0 0 0 2px var(--vdd-page), 0 0 0 1px var(--vdd-brown);
}

/* Het hang: gach cheo, van bam duoc de WooCommerce bao loi dung cach */
.vdd-sw__item.is-disabled{opacity:.42;cursor:not-allowed}
.vdd-sw__item.is-disabled::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top left,transparent calc(50% - 1px),var(--vdd-line-2) 50%,transparent calc(50% + 1px));
}

/* ---- Kieu nut chu ---- */
.vdd-sw__item--button{
  min-width:3rem;padding:.6em 1em;border-radius:var(--vdd-r-sm);
}
.vdd-sw__label{
  font-size:var(--vdd-text-sm);font-weight:600;color:var(--vdd-ink);
  line-height:1;white-space:nowrap;
}
.vdd-sw__item--button.is-selected .vdd-sw__label{color:var(--vdd-brown)}

/* ---- Kieu o mau ---- */
.vdd-sw__item--color{width:2.5rem;height:2.5rem;padding:3px;border-radius:50%}
.vdd-sw__item--color .vdd-sw__dot{
  display:block;width:100%;height:100%;border-radius:50%;
  background:var(--vdd-sw-color,#D9D2C6);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.vdd-sw__item--color.is-selected{box-shadow:0 0 0 2px var(--vdd-brown)}

/* ---- Kieu anh nho ---- */
.vdd-sw__item--image{width:3.25rem;height:3.25rem;padding:2px;overflow:hidden}
.vdd-sw__item--image img{width:100%;height:100%;object-fit:cover;display:block}
.vdd-sw__item--image .vdd-sw__dot{width:100%;height:100%;background:var(--vdd-sand);display:block}

/* ---- Nhan ten thuoc tinh ---- */
.woocommerce div.product form.cart .variations label{
  font-size:var(--vdd-text-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--vdd-muted);
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{
  padding:var(--vdd-s2) 0;border:0;display:block;
}
.woocommerce div.product form.cart .reset_variations{
  font-size:var(--vdd-text-xs);color:var(--vdd-muted);
}

/* =========================================================
   BANG CHON BIEN THE
   WooCommerce dung <table>. Giu the nhung bo cuc lai cho gon,
   va tren dien thoai thi nhan xuong dong thay vi ep hai cot.
   ========================================================= */
.vdd-sp .variations{
  width:100%;border-collapse:collapse;margin:0;
}
.vdd-sp .variations th,
.vdd-sp .variations td{
  border:0;padding:0 0 var(--vdd-s4);vertical-align:middle;text-align:left;
}
.vdd-sp .variations th.label{
  width:1%;white-space:nowrap;padding-right:var(--vdd-s4);
  font-size:var(--vdd-text-sm);font-weight:700;color:var(--vdd-brown);
}
.vdd-sp .variations th.label label{margin:0}
.vdd-sp .variations tr:last-child th,
.vdd-sp .variations tr:last-child td{padding-bottom:0}
.vdd-sp .reset_variations{
  display:inline-block;margin-top:var(--vdd-s2);
  font-size:var(--vdd-text-xs);color:var(--vdd-muted);
}
.vdd-sp .woocommerce-variation-price{margin-bottom:var(--vdd-s3)}
.vdd-sp .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;gap:var(--vdd-s3);align-items:center}

@media (max-width:560px){
  .vdd-sp .variations,
  .vdd-sp .variations tbody,
  .vdd-sp .variations tr,
  .vdd-sp .variations th,
  .vdd-sp .variations td{display:block;width:auto}
  .vdd-sp .variations th.label{padding:0 0 var(--vdd-s2)}
  .vdd-sp .variations td{padding-bottom:var(--vdd-s5)}
}