/* Variation Button CSS — migrated from Code Snippets #46 */
/* ===== LABEL: lên trên, canh trái, KHÔNG in đậm ===== */
body.single-product div.product .summary table.variations tr{
  display:block; width:100%; margin:0 0 12px;
}
body.single-product div.product .summary table.variations th.label,
body.single-product div.product .summary table.variations td.value{
  display:block; width:100%; padding:0 !important; border:0;
}
body.single-product div.product .summary table.variations th.label label{
  display:block; margin:0 0 8px; text-align:left;
  font-weight:400 !important;           /* không in đậm */
  letter-spacing:.02em;
}

/* 2) XÓA mọi đường kẻ/đường nét đứt trong khu vực variation + ẩn CLEAR */
.single-product .summary .is-divider,
.single-product .summary .is-divider.small,
.single-product .summary .ux-divider,
.single-product .summary hr,
.single-product .summary table.variations th.label:before,
.single-product .summary table.variations th.label:after{
  display:none !important; height:0 !important; border:0 !important; margin:0 !important;
}
.single-product .summary .reset_variations{ display:none !important; }

/* Kill all dividers under FRAME / SIZE in variations */
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations tr{
  border: none !important;
}
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations th.label label{
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}
.single-product .summary .is-divider,
.single-product .summary .is-divider::before,
.single-product .summary .is-divider::after,
.single-product .summary .ux-divider,
.single-product .summary hr{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Lấy màu thương hiệu (fallback an toàn) */
:root{
  --brand-primary: var(--fs-color-primary, var(--primary-color, #1b1717));
  --brand-secondary: var(--main-hnc-color, var(--secondary-color, #221f1f));
}

/* Dùng chung style base với SIZE */
.single-product .summary .jr-attr,
.single-product .summary .frame-type-btn {
  background:#fff !important;
  color:#1B171799;
  border:1.5px solid var(--brand-border);
  font-weight:600;
  transition:all .18s ease;
  border-radius:3px;
  padding:10px 6px;
  font-size:13px;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  width:100%;
  box-sizing:border-box;
}

/* Hover/Focus giống nhau */
.single-product .summary .jr-attr:hover,
.single-product .summary .frame-type-btn:hover {
  border-color:var(--brand-primary);
}
.single-product .summary .jr-attr:focus-visible,
.single-product .summary .frame-type-btn:focus-visible {
  outline:2px solid var(--brand-primary);
  outline-offset:2px;
}

/* ĐÃ CHỌN: Frame type + Size hiệu ứng */
.single-product .summary .ux-swatch.selected,
.single-product .summary .frame-type-btn.is-active,
.single-product .summary .jr-attr.selected,
.single-product .summary .jr-attr.is-selected,
.single-product .summary .jr-attr.active,
.single-product .summary .jr-attr.is-active,
.single-product .summary .jr-attr[aria-pressed="true"],
.single-product .summary input[type="radio"]:checked + .jr-attr,
.single-product .summary input[type="checkbox"]:checked + .jr-attr{

  transform:translateY(0);
  box-shadow:0 3px 10px rgba(25,4,4,0.22);
  filter:brightness(1.02);

  background: #5c5c5c !important;
  color: #ffffff !important;
  border-color: #5c5c5c !important;
  font-weight:900 !important; /* in đậm khi chọn */
}

/* Cảm giác "đè/hold" khi bấm – áp dụng cho cả 2 loại */
.jr-attr:active,
.frame-type-btn:active {
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(42,8,8,0.22);
  filter:brightness(1.02);
}


/* 1) SIZE: chia 2 line cố định (8 size => 4 cột x 2 hàng) */
#size + .jr-attr-row{
  grid-auto-flow: row;                   /* từ 1 dòng -> nhiều hàng */
  grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
	overflow: visible;                     /* bỏ kéo ngang */
}

/* (tuỳ chọn) cảm giác “đè/hold” nhẹ tay hơn */
.jr-attr:active{
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(42,8,8,0.22);
  filter:brightness(1.02);
}

/* FRAME TYPE: 3 nút trên, 3 nút dưới */

/* Grid chung: luôn 4 cột */
.frame-type-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

/* Button FRAME TYPE: cao 50px, text co giãn, căn giữa */
.frame-type-buttons .frame-type-btn {
  height: 50px;
  min-height: 50px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  white-space: normal;          /* cho phép xuống dòng */
  padding: 0 8px;

  font-size: clamp(11px, 2.6vw, 13px);
}

/* Giữ đúng 3-trên-3-dưới ở mobile */
@media (max-width: 480px) {
  .frame-type-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tăng khoảng cách giữa Giá và khối "Frame type" */
.single-product .summary .price-wrapper{
    margin-bottom: 24px !important;   /* tăng/giảm số px tùy ý: 20, 24, 32... */
}

/* ==== FRAME TYPE · Hover & Hold (press) ==== */

/* Hover nhẹ – sáng hơn chút & đổ bóng */
.frame-type-buttons .frame-type-btn:hover{
  filter: brightness(1.03);
  box-shadow: 0 3px 8px rgba(0,0,0,.08);
}

/* Hold (nhấn & giữ) – áp dụng cho TẤT CẢ màu
   → tự động tối đi 1 chút, hơi nhún xuống */
.frame-type-buttons .frame-type-btn:active{
  transform: translateY(1px) scale(.985);
  filter: brightness(.96);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
}