/* Dãy nút chọn quy cách trên trang sản phẩm (phan-loai.php, 08/09/2026).
   Mỗi nút là một liên kết thật sang đúng trang sản phẩm size đó. */

.froga-woo div.product .froga-pl { margin: 4px 0 18px; }
.froga-woo div.product .froga-pl-nhan { display: block; font-size: 13.5px; font-weight: 700; color: var(--mo); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
/* 08/09/2026, anh: "các phân loại của họ canh đều chiều ngang khối" — đo
   trên dropps.com: nút thật là `flex: 1 1 0%` trong hàng flex (không phải
   flex-wrap để chữ dài ngắn tự co giãn như trước), chữ giữa nút
   (justify-content/text-align: center). Ba/bốn nút giờ giãn đều hết bề
   ngang khối tóm tắt, mép trái-phải thẳng hàng với giá và mô tả phía trên/dưới. */
.froga-woo div.product .froga-pl-day { display: flex; gap: 8px; }

.froga-woo div.product .froga-pl-nut {
  display: flex;
  flex: 1 1 0%;
  min-width: 0; /* cho phép co nhỏ hơn nội dung khi chật, khỏi vỡ hàng */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  border: 1.5px solid #E7F2E4;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 10px 8px;
  text-decoration: none;
  line-height: 1.3;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.froga-woo div.product .froga-pl-nut:hover { background: #F1F8EE; text-decoration: none; }
.froga-woo div.product .froga-pl-nut--chon {
  background: var(--xanh);
  border-color: var(--xanh);
  box-shadow: 0 4px 14px rgba(35, 119, 60, .22); /* thêm bóng nhẹ cho nút đang chọn nổi lên, "khung nhìn đẹp" như bản mẫu */
}

.froga-woo div.product .froga-pl-ten { font-size: 16px; font-weight: 700; color: #1E3B27; } /* 08/09/2026: khớp cỡ chữ nút "64 Count" của dropps.com (đo 16px/700) */
.froga-woo div.product .froga-pl-nut--chon .froga-pl-ten { color: #FFFFFF; }
.froga-woo div.product .froga-pl-demo { font-size: 10.5px; font-weight: 700; color: #B8860B; background: #FFF3D6; border-radius: 6px; padding: 1px 5px; margin-left: 5px; vertical-align: 1px; }
.froga-woo div.product .froga-pl-nut--chon .froga-pl-demo { color: #7A5B00; }

@media (max-width: 700px) {
  .froga-woo div.product .froga-pl-nut { padding: 8px 4px; }
  .froga-woo div.product .froga-pl-ten { font-size: 14px; }
}