/* ------------------------------------------------------------------
   Phần bán hàng — giá trên thẻ, dải tin cậy, thanh miễn phí giao,
   khối cẩm nang và câu hỏi thường gặp ở trang sản phẩm.

   Không có @media trong tệp này: dieu-huong.css là tệp DUY NHẤT được phép
   có điểm ngắt (xem tài liệu bàn giao). Ở đây co giãn bằng clamp() và
   auto-fit, đúng lối của bộ thiết kế.
   ------------------------------------------------------------------ */

/* ---------- giá + nút mua ngay trên thẻ sản phẩm ---------- */
.froga-the-mua {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #E4DDC9;
}

.froga-the-gia,
.froga-the-gia .woocommerce-Price-amount {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.1;
  color: #23773C;
}

/* Giá gạch bỏ khi có giá khuyến mãi. */
.froga-the-gia del,
.froga-the-gia del .woocommerce-Price-amount {
  font-size: 15px;
  font-weight: 700;
  color: #5F6B58;
  margin-right: 6px;
}
.froga-the-gia ins { text-decoration: none; }

.froga-the-nut {
  flex: none;
  background: #23773C;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14.5px;
  padding: 11px 20px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow:0 8px 20px rgba(30,59,39,.14);
  transition: transform .15s ease, background .15s ease;
}
.froga-the-nut:hover { background: #1E6733; transform: translateY(-1px); color: #FFFFFF; }
.froga-the-nut.loading { opacity: .7; }
.froga-the-nut.added::after { content: ' ✓'; }

.froga-the-het {
  font-weight: 700;
  font-size: 13.5px;
  color: #5F6B58;
}

/* Thẻ ngang ở khối "Khi bạn cần nhiều hơn" — nút nhỏ hơn cho cân. */
.froga-the-mua--ngang { margin-top: 10px; padding-top: 12px; }
.froga-the-mua--ngang .froga-the-gia { font-size: 19px; }
.froga-the-mua--ngang .froga-the-nut { font-size: 13.5px; padding: 9px 17px; }

/* Liên kết trong suốt phủ phần ảnh + chữ của thẻ, để cả thẻ vẫn bấm được
   sau khi thẻ <a> ngoài cùng đổi thành <div> (xem build/theme.mjs). */
.froga-phu-lien-ket {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 20px;
}

/* ---------- dải tin cậy ---------- */
.froga-dai-tin-cay {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px clamp(14px, 2vw, 26px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 26px) clamp(16px, 4vw, 24px);
}
/* Nền tràn hết bề ngang, chữ vẫn dừng ở 1180px như mọi khối khác. */
.froga-dai-nen { background: #F3EEDD; border-top: 1px solid #E4DDC9; border-bottom: 1px solid #E4DDC9; }
/* Trong giỏ hàng, dải nằm trong .froga-gio — một khung flex có wrap. Ô flex
   mặc định rộng bằng nội dung, nên không khai flex-basis thì dải tự kéo ra
   1140px và tràn khỏi màn hình điện thoại (đo được: cha 358px, con 1140px). */
.froga-dai-tin-cay--trang {
  flex: 1 1 100%;
  width: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #E4DDC9;
  border-radius: 18px;
  margin-bottom: 22px;
}

.froga-lh { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* 08/09/2026, anh soi lmc.vn/vi: vòng tròn màu ĐẶC (không phải viền nhạt) +
   icon nét trắng bên trong — bỏ vòng nhạt/emoji màu cũ cho đồng bộ hơn. */
.froga-lh-bt {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: #23773C;
  border-radius: 50%;
  color: #FFFFFF;
}
.froga-lh-bt svg { display: block; }
.froga-lh-chu { display: flex; flex-direction: column; min-width: 0; }
.froga-lh-chu strong { font-size: 14.5px; font-weight: 700; color: #1E3B27; line-height: 1.25; }
.froga-lh-chu em { font-style: normal; font-size: 12.5px; color: #5F6B58; margin-top: 2px; }

/* ---------- thanh tiến độ miễn phí giao ---------- */
.froga-freeship {
  background: #FFFFFF;
  border: 1px solid #E4DDC9;
  border-radius: 16px;
  padding: 15px 18px;
  margin-bottom: 18px;
}
.froga-freeship--du { background: #E7F2E4; border-color: #BBD9B9; }
.froga-fs-chu { font-size: 14.5px; line-height: 1.5; color: #1E3B27; margin-bottom: 10px; }
.froga-fs-chu strong { color: #23773C; }
.froga-fs-thanh {
  height: 9px;
  background: #F0EADB;
  border-radius: 999px;
  overflow: hidden;
}
.froga-fs-thanh span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #57A96E, #23773C);
  border-radius: 999px;
  transition: width .4s ease;
}

/* ---------- khối "Đọc thêm từ cẩm nang" ở trang sản phẩm ---------- */
.froga-doc-them { margin: clamp(28px, 5vw, 44px) 0 0; }
.froga-doc-them h2,
.froga-faq-sp h2 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 700;
  font-size:clamp(18px,3.4vw,27px);
  color: #1E3B27;
  margin: 0 0 18px;
}
.froga-doc-them-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 18px;
}
.froga-doc-them-luoi a {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #FFFFFF;
  border: 1px solid #E4DDC9;
  border-radius: 18px;
  padding: 18px 20px;
  text-decoration: none;
}
.froga-doc-them-luoi a:hover { border-color: #BBD9B9; }
.froga-dt-ten { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.3; color: #1E3B27; }
.froga-dt-tom { font-size: 14px; line-height: 1.55; color: #42563F; flex: 1; }
.froga-dt-tiep { font-size: 14px; font-weight: 700; color: #23773C; }

/* ---------- câu hỏi thường gặp ở trang sản phẩm ---------- */
.froga-faq-sp { margin: clamp(28px, 5vw, 44px) 0 0; }
.froga-faq-muc {
  background: #FFFFFF;
  border: 1px solid #E4DDC9;
  border-radius: 16px;
  padding: 0;
  margin-bottom: 10px;
  overflow: hidden;
}
.froga-faq-muc > summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 46px 15px 20px;
  position: relative;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.45;
  color: #1E3B27;
}
.froga-faq-muc > summary::-webkit-details-marker { display: none; }
.froga-faq-muc > summary::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #23773C;
}
.froga-faq-muc[open] > summary::after { content: '–'; }
.froga-faq-muc > div {
  padding: 0 20px 17px;
  font-size: 15px;
  line-height: 1.7;
  color: #42563F;
}

/* ---------- hiện dần khi cuộn tới ---------- */
/* 06/09/2026: chỉ giấu khi <html> mang lớp froga-dong (chuyen-dong.php gắn
   trong <head> sau khi kiểm prefers-reduced-motion). Trước đó luật này chạy
   vô điều kiện, mà ba khối cách dùng / thông số / 3 KHÔNG được PHP gắn sẵn
   lớp cho-hien nhưng không ai theo dõi — người tắt JS không bao giờ thấy. */
html.froga-dong .froga-cho-hien { opacity: 0; transform: translateY(14px); }
html.froga-dong .froga-hien { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

/* Người bật "giảm chuyển động" thì không hiệu ứng nào cả — JS cũng đã tự
   dừng, đây là chốt thứ hai phòng khi JS chạy trước lúc kiểm. */
@media (prefers-reduced-motion: reduce) {
  .froga-cho-hien { opacity: 1; transform: none; }
  .froga-hien { transition: none; }
}

/* ==========================================================================
   05/09/2026 — dày lại trang chi tiết sản phẩm
   ==========================================================================
   Đo được 3.221px, trong khi 13 trang chi tiết sản phẩm của
   officialfinish.vn nằm gọn trong 4.949–5.798px. Đây là trang duy nhất có
   nút mua mà lại mỏng nhất — ba khối dưới đây dựng từ dữ liệu đã có sẵn
   trong build/data.js, không bịa thêm chữ nào.
   ========================================================================== */
.froga-cach-dung,
.froga-thong-so,
.froga-3khong { grid-column: 1 / -1; margin-top: clamp(28px, 4vw, 44px); }

.froga-cach-dung h2,
.froga-thong-so h2,
.froga-3khong h2 {
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 700;
	font-size:clamp(18px,3.6vw,28px);
	color: #1E3B27;
	margin: 0 0 10px;
}
.froga-cach-dung-dan { font-size: 15.5px; line-height: 1.65; color: #42563F; margin: 0 0 20px; }

.froga-cach-dung-luoi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 18px;
}
.froga-buoc-dung {
	background: #FFFFFF;
	border: 1px solid #E4DDC9;
	border-top: 4px solid #23773C;
	border-radius: 4px 4px 18px 18px;
	padding: 0 0 20px;
	overflow: hidden;
	position: relative;
}
.froga-buoc-dung img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
	background: #F2EDDE;
}
/* 07/09/2026: khoanh vào khối "Dùng thế nào" (.froga-buoc-dung). Trước để trần nên dính sang dãy
   ba bước Giỏ/Thanh toán/Hoàn tất cùng tên lớp, đẩy bước đầu vào 20px. */
.froga-buoc-dung .froga-buoc-so {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: 14px 0 8px 20px;
	border-radius: 10px;
	background: #1A582C;
	color: #FCC232;
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 700;
	font-size: 15px;
}
.froga-buoc-chu { display: block; padding: 0 20px; font-size: 15px; line-height: 1.6; color: #42563F; }

/* ---------- bảng thông số ---------- */
.froga-thong-so-bang {
	background: #FFFFFF;
	border: 1px solid #E4DDC9;
	border-radius: 18px;
	overflow: hidden;
}
.froga-ts-hang {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 6px 20px;
	padding: 13px 22px;
	border-top: 1px solid #F0EADA;
	font-size: 15px;
	line-height: 1.6;
}
.froga-ts-hang:first-child { border-top: none; }
.froga-ts-ten { font-weight: 700; color: #23773C; }
.froga-ts-gia { color: #42563F; }
.froga-ts-doan { margin-top: 20px; }
.froga-ts-doan h3 {
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #1E3B27;
	margin: 0 0 6px;
}
.froga-ts-doan p { font-size: 15px; line-height: 1.7; color: #42563F; margin: 0; }

/* ---------- dải 3 KHÔNG ---------- */
.froga-3khong {
	background: linear-gradient(rgba(26, 88, 44, .94), rgba(26, 88, 44, .94)), url('/img/la-band.webp') center/cover;
	border-radius: 24px;
	padding: clamp(26px, 4vw, 40px);
}
.froga-3khong h2 { color: #FFFFFF; }
.froga-3khong .froga-nhan { color: #FCC232; }
.froga-3khong-dau { max-width: 620px; margin-bottom: 24px; }
.froga-3khong-dau p { font-size: 15.5px; line-height: 1.65; color: #E7F2E4; margin: 0; }
.froga-3khong-luoi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 16px;
}
.froga-3khong-o {
	background: #23773C;
	border: 1px solid #57A96E;
	border-radius: 18px;
	padding: 20px 22px;
}
.froga-3khong-so {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: #FCC232;
	color: #4A3505;
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 10px;
}
.froga-3khong-o strong {
	display: block;
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: #FFFFFF;
	line-height: 1.3;
}
.froga-3khong-o em {
	display: block;
	margin-top: 4px;
	font-style: normal;
	font-size: 13px;
	color: #E7F2E4;
}

/* ---------- cross-sell "Để máy hoạt động hiệu quả hơn" (13/09/2026) ---------- */
.froga-hoan-thien { grid-column: 1 / -1; margin-top: clamp(28px, 4vw, 44px); }
.froga-hoan-thien-dau { max-width: 620px; margin-bottom: 20px; }
.froga-hoan-thien-dau h2 {
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 700;
	font-size:clamp(18px,3.6vw,28px);
	color: #1E3B27;
	margin: 0 0 10px;
}
.froga-hoan-thien-dau p { font-size: 15px; line-height: 1.6; color: #42563F; margin: 0; }
.froga-hoan-thien-luoi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 16px;
	margin-bottom: 18px;
}
.froga-hoan-thien-o {
	position: relative;
	background: #FFFFFF;
	border: 1px solid #E4DDC9;
	border-radius: 16px;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.froga-hoan-thien-o img { flex: none; width: 64px; height: 64px; object-fit: contain; background: #F2EDDE; border-radius: 10px; }
.froga-hoan-thien-ten { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 15px; color: #1E3B27; margin-bottom: 6px; }
.froga-hoan-thien-combo {
	display: inline-block;
	font-size: 14.5px;
	font-weight: 700;
	color: #23773C;
}

@media (max-width: 700px) {
	.froga-cach-dung-luoi { gap: 12px; }
	.froga-buoc-dung img { height: 150px; }
}

/* --------------------------------------------------------------------------
   Bề rộng đọc được cho chữ trong thẻ rộng
   --------------------------------------------------------------------------
   Đo 05/09/2026 ở khổ 1440px: đoạn văn trong tab "Mô tả" rộng **1.130px**,
   tức khoảng 140 ký tự một dòng — gấp đôi ngưỡng đọc được (60–80). Mắt đọc
   xong một dòng thì lạc mất đầu dòng sau.

   WooCommerce sinh phần này, nên bộ dựng `canhKhoi()` không với tới được —
   phải chặn bằng CSS.
   -------------------------------------------------------------------------- */
.froga-woo .woocommerce-tabs .panel > h2,
.froga-woo .woocommerce-tabs .panel > h3,
.froga-woo .woocommerce-tabs .panel > p,
.froga-woo .woocommerce-tabs .panel > ul,
.froga-woo .woocommerce-tabs .panel > ol,
.froga-woo .woocommerce-product-details__short-description p,
.froga-cach-dung-dan,
.froga-ts-doan p { max-width: var(--froga-doan, 640px); }

/* Bảng thông số thì ngược lại: cần rộng để hai cột không bị bóp. Chỉ chặn
   phần chữ chạy dài, đừng chặn bảng. */
.froga-woo .woocommerce-tabs .panel > table { max-width: none; }


/* Soát 07/09/2026: sang.mjs ẩn ba viên (.froga-vien-sp) là mất luôn margin-top:auto
   của chúng, hàng giá + nút ở thẻ tiêu đề một dòng nhảy lên cao hơn thẻ bên cạnh. */
.froga-the-mua--the { margin-top: auto; }
/* Ảnh sản phẩm trên thẻ (trang chủ, cửa hàng) đặt object-fit:cover nên chai
   Aqua Shine, chai Kitchen Care cao bị cắt mất nắp. Ảnh /img/p*.webp đều là ảnh
   hộp nền trắng nên để nằm gọn trong khung là đúng. */
img[style*="object-fit:cover"][srcset*="/img/p"],
img[style*="object-fit:cover"][src*="/uploads/2026/09/p"] { object-fit: contain !important; padding: 8px; box-sizing: border-box; } /* trang chủ dùng /img/, cửa hàng dùng ảnh WooCommerce */

/* --- Ảnh có đệm nội dòng phải tính đệm vào bề ngang ------------------- *
 * 07/10/2026. Ảnh trong thẻ sản phẩm mang kiểu nội dòng
 * `width:100%;height:100%;object-fit:contain;padding:12px` ngay trong bản
 * thiết kế. Thiếu box-sizing nên 100% là của phần RUỘT, cộng thêm 12px đệm
 * mỗi bên: trong hộp rộng 394px ảnh thành 418px, đè ra ngoài bo góc thẻ ở cả
 * hai bên. Đo trên màn 430px: ảnh chạy tới 436px, quá mép màn hình 6px.
 * Thấy ở trang chủ, /san-pham/, Cẩm nang, Hướng dẫn, Về Froga và trang bài.
 *
 * Sửa bằng CSS chứ không sửa khuôn: kiểu nội dòng KHÔNG đặt box-sizing, nên
 * một luật thường là đủ, không cần !important, và bộ thiết kế mới mang về
 * cũng tự khỏi.
 * -------------------------------------------------------------------- */
img[style*="padding"] { box-sizing: border-box; }