/* ==========================================================================
   FROGA — chuyển động cho trang cửa hàng và trang chi tiết sản phẩm
   ==========================================================================

   Anh Mừng 06/09/2026: "Trang sản phẩm cần thêm hiệu ứng chuyển động, nhìn
   chuyên nghiệp hơn." Nguyên tắc:
     * Chỉ chuyển động khi <html> có lớp `froga-dong` — lớp này do một đoạn JS
       rất ngắn trong <head> gắn (chuyen-dong.php), sau khi kiểm
       prefers-reduced-motion. Không JS, hoặc người dùng tắt hoạt ảnh, thì mọi
       thứ hiện ngay như cũ: không có gì bị giấu đi.
     * Chỉ dùng opacity và transform (không đụng layout), thời lượng 0,25–0,6s,
       đường cong ease-out. Không có gì lặp vô hạn.
     * Mọi phép đo của do-dac/*.py vẫn đúng: chiều cao phần tử không đổi, chỉ
       có opacity/transform; soi.py cuộn hết trang một lượt trước khi đo nên
       mọi khối đã hiện.
   ========================================================================== */

/* ---------- hiện dần khi cuộn tới ---------- */
html.froga-dong .froga-cho-hien,
html.froga-dong [data-rail] > .x3.froga-cho-hien,
html.froga-dong .related.products li.product.froga-cho-hien {
  opacity: 0;
  transform: translateY(18px);
}
html.froga-dong .froga-hien,
html.froga-dong [data-rail] > .x3.froga-hien,
html.froga-dong .related.products li.product.froga-hien {
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
}

/* ---------- thẻ sản phẩm ở lưới cửa hàng ---------- */
html.froga-dong [data-rail] > .x3 {
  will-change: transform;
}
html.froga-dong [data-rail] > .x3.froga-hien {
  /* sau khi đã hiện: thêm chuyển động khi rê chuột, không phá transition hiện dần */
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}
html.froga-dong [data-rail] > .x3.froga-hien:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(26, 88, 44, .14);
}
html.froga-dong [data-rail] > .x3 > div:first-child { overflow: hidden; }
html.froga-dong [data-rail] > .x3 > div:first-child img {
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  transform-origin: center;
}
html.froga-dong [data-rail] > .x3:hover > div:first-child img { transform: scale(1.045); }

/* nhãn quy cách góc ảnh nổi lên một chút khi rê */
html.froga-dong [data-rail] > .x3 > div:first-child > div[style*="bottom:14px"] {
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
html.froga-dong [data-rail] > .x3:hover > div:first-child > div[style*="bottom:14px"] { transform: translateY(-3px); }

/* Tiêu đề thẻ: hover.css gộp luật :hover theo tên lớp, mà lớp `x4` ở khuôn khác
   là một NÚT nền xanh chữ trắng. Ở thẻ sản phẩm nó lại là liên kết tiêu đề có
   `color:inherit` nội tuyến, nên rê chuột ra một ô xanh đậm chữ tối (chụp được
   06/09/2026). Đè lại: chỉ đổi màu chữ sang xanh, không nền. */
[data-rail] > .x3 a.x4:hover,
.x3 > div a.x4:hover {
  background: transparent !important;
  color: #23773C !important;
  transition: color .2s ease;
}

/* ---------- nút lọc nhóm ---------- */
html.froga-dong button[data-loc] {
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
html.froga-dong button[data-loc]:active { transform: scale(.96); }

/* ---------- nút "Thêm vào giỏ" và huy hiệu giỏ ---------- */
html.froga-dong .froga-nut-mua:active { transform: scale(.98); }
html.froga-dong .froga-nut-mua.froga-nay { animation: froga-nay .5s cubic-bezier(.34, 1.56, .64, 1); }
html.froga-dong [data-so-gio].froga-nay { animation: froga-nay-badge .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes froga-nay {
  0% { transform: scale(1); }
  45% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes froga-nay-badge {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ---------- trang chi tiết: ảnh và cột mua ---------- */
html.froga-dong div.product > .woocommerce-product-gallery {
  animation: froga-hien-len .6s cubic-bezier(.22, .61, .36, 1) both;
}
html.froga-dong div.product > .summary {
  animation: froga-hien-len .6s cubic-bezier(.22, .61, .36, 1) .12s both;
}
@keyframes froga-hien-len {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
html.froga-dong .woocommerce-product-gallery__wrapper { overflow: hidden; border-radius: inherit; }
html.froga-dong .woocommerce-product-gallery__image img {
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
html.froga-dong .woocommerce-product-gallery__wrapper:hover .woocommerce-product-gallery__image img { transform: scale(1.03); }
html.froga-dong .flex-control-thumbs img { transition: opacity .2s ease, transform .2s ease; }
html.froga-dong .flex-control-thumbs img:hover { transform: translateY(-2px); }

/* nút mua ở trang chi tiết */
html.froga-dong form.cart button.single_add_to_cart_button {
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
html.froga-dong form.cart button.single_add_to_cart_button:hover { transform: translateY(-1px); }
html.froga-dong form.cart button.single_add_to_cart_button:active { transform: scale(.98); }

/* thẻ sản phẩm liên quan */
html.froga-dong .related.products li.product.froga-hien {
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}
html.froga-dong .related.products li.product.froga-hien:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(26, 88, 44, .12);
}

/* thanh mua dính đáy (điện thoại) trượt lên lúc xuất hiện */
html.froga-dong body.single-product .froga-thanh-mua {
  animation: froga-truot-len .45s cubic-bezier(.22, .61, .36, 1) .3s both;
}
@keyframes froga-truot-len {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* mục FAQ mở ra mềm hơn: chỉ mũi tên xoay, nội dung không đo được chiều cao */
html.froga-dong .froga-faq-sp summary { transition: color .2s ease; }

/* ---------- tắt hoàn toàn khi người dùng không muốn hoạt ảnh ---------- */
@media (prefers-reduced-motion: reduce) {
  html.froga-dong * { animation: none !important; transition: none !important; }
  html.froga-dong .froga-cho-hien,
  html.froga-dong [data-rail] > .x3,
  html.froga-dong .related.products li.product { opacity: 1 !important; transform: none !important; }
}