/*
 * Thành phần dùng chung – yêu cầu sửa UI 18/10/2026 (inc/lacyen-components.php).
 * Giữ màu xanh và font hiện tại; chỉ sửa cấu trúc để chữ không bị cắt / tràn.
 *
 * Vì sao selector dài: CSS cũ của thẻ sản phẩm (bond-*.css, functions.php) dùng :not(#bond-x)×3 + !important
 * và đặt chiều cao cố định cho từng khu vực. File này dùng :not(#lc-a)×4 để thắng toàn bộ các rule đó
 * ở một chỗ, thay vì vá từng trang.
 */

/* =========================================================
 * 1. Thẻ sản phẩm (.product-small) – mọi trang
 * ========================================================= */

/* Thẻ là cột flex: phần chữ co giãn, nhãn + nút luôn ở đáy, không bị cha cắt. */
html body .product-small.col > .col-inner:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	max-height: none !important;
	overflow: visible !important;
	padding-bottom: 8px !important;
}
html body .product-small.col:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { height: auto !important; }
html body .product-small.col > .col-inner > .product-small.box:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	flex: 1 1 auto;
	display: flex !important;
	flex-direction: column !important;
	height: auto !important;
}
/* Flatsome căn .box-image bằng margin auto → trong cột flex sẽ co về 0px; giữ đủ chiều rộng thẻ. */
html body .product-small.box > .box-image:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; }
html body .product-small .box-text:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	flex: 1 1 auto;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}
/* Flatsome đặt flex-basis:100% cho con của .flex-row → trong cột, mỗi khối bị kéo cao bằng cả thẻ. */
html body .product-small .box-text:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) > * { flex: 0 0 auto !important; max-width: 100% !important; }
html body .product-small .title-wrapper:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d),
html body .product-small .price-wrapper:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d),
html body .product-small .name.product-title:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	white-space: normal !important;
}

/* Tên: tối đa 2 dòng, line-height 1.3, luôn chiếm đủ 2 dòng để các thẻ cao bằng nhau.
 * padding-top nhỏ để dấu tiếng Việt (Ấ, Ữ…) ở dòng 1 không bị cắt; không có padding-bottom nên dòng 3 không lộ ra. */
html body .product-small .name.product-title a:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2;
	overflow: hidden !important;
	white-space: normal !important;
	text-overflow: clip !important;
	line-height: 1.3 !important;
	height: auto !important;
	max-height: none !important;
	min-height: calc(2.6em + 2px) !important;
	padding: 2px 0 0 !important;
	margin: 0 !important;
}

/* Mô tả ngắn: tối đa 2 dòng trong ô nền xanh nhạt.
 * Khoảng đệm trên/dưới làm bằng border trong suốt (nền vẫn phủ dưới border) → overflow chỉ cắt ở mép trong,
 * dòng 2 hiện đủ và dòng 3 không lấn vào phần đệm. */
html body .product-small p.box-excerpt:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d),
html body .product-small .box-excerpt:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	box-sizing: border-box !important;
	width: 100% !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: normal !important;
	height: auto !important;
	max-height: none !important;
	min-height: calc(2.8em + 12px) !important;
	line-height: 1.4 !important;
	padding: 0 8px !important;
	border: 0 solid transparent !important;
	border-width: 6px 0 !important;
	border-radius: 6px !important;
	background: #efffd1 !important;
	margin: 6px 0 0 !important;
}
html body .product-small .box-excerpt:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) > *,
html body .product-small .box-excerpt:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) br + * {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	max-height: none !important;
	-webkit-line-clamp: unset !important;
}
html body .product-small .box-excerpt:empty:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { display: none !important; }

/* Nhãn (Freeship, độ tuổi) + đã bán: đẩy xuống đáy thẻ, xuống dòng thay vì tràn. */
html body .product-small .ship_wrap:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	margin-top: auto !important;
	padding-top: 8px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	min-width: 0 !important;
	max-width: 100% !important;
}
html body .product-small .ship_wrap > *:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d),
html body .product-small .ship_note > *:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	flex: 0 0 auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
}
html body .product-small .ship_note:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; height: auto !important; padding: 0 !important; background: none !important; }
/* Nhãn "Miễn ship" vẽ bằng ::before ở CSS cũ trùng với chip FREESHIP thật → bỏ. */
html body .product-small .ship_wrap:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d)::before { content: none !important; display: none !important; }
html body .product-small .daban_wrap:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { margin-top: auto !important; padding-top: 6px; }
html body .product-small .ship_wrap + .daban_wrap:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { margin-top: 6px !important; padding-top: 0; }

/* =========================================================
 * 2. Tiêu đề section / tên sản phẩm trang chi tiết – không cắt chữ
 * ========================================================= */
html body .section-title:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d),
html body .section-title .section-title-main:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d),
html body .home_sp_title:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d),
html body.single-product .product-info h1.product-title:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d),
html body.single-product .product_base_info .product-title:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}
html body .section-title .section-title-main:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { line-height: 1.3 !important; }
html body .home_sp_title:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { min-height: 22px; align-items: center !important; gap: 8px; }

/* =========================================================
 * 3. Nút dùng chung .btn
 *    Áp cho .btn và các nút có sẵn: mini-cart, nút Danh mục sản phẩm, tab ưu đãi trang chủ, gửi đánh giá.
 * ========================================================= */
.btn,
html body .woocommerce-mini-cart__buttons .button:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d),
html body .lc-catalog-btn:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d),
html body #respond .form-submit .submit:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 44px !important;
	height: auto !important;
	padding: 10px 16px !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	border-radius: 10px !important;
	text-align: center !important;
	vertical-align: middle;
	box-sizing: border-box !important;
}
.btn > svg, .btn > img,
html body .lc-catalog-btn:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) > svg { flex: 0 0 auto; }
html body .lc-catalog-btn:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { min-height: 40px !important; padding: 8px 16px !important; }
@media (max-width: 1099px) {
	html body .lc-catalog-btn:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { padding: 8px 12px !important; font-size: 13px !important; gap: 6px !important; }
}

/* Mini-cart: 2 nút chia đều, cách nhau 12px, chung bo góc. */
html body .woocommerce-mini-cart__buttons:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	display: flex !important;
	gap: 12px !important;
	margin: 0 !important;
}
html body .woocommerce-mini-cart__buttons .button:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	font-size: 15px !important;
	padding: 10px 12px !important;
}

/* Tab Ưu đãi / Hàng mới / Theo mùa ở trang chủ: 1 dòng; màn hẹp thì vuốt ngang thay vì xuống dòng. */
html body .lc-fs-tab:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	white-space: nowrap !important;
	line-height: 1.2 !important;
}
@media (max-width: 549px) {
	html body .lc-fs-tabs:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		overflow-x: auto;
		scrollbar-width: none;
		padding: 0 2px;
	}
	html body .lc-fs-tabs:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d)::-webkit-scrollbar { display: none; }
	html body .lc-fs-tab:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { flex: 1 0 auto !important; padding: 0 6px !important; font-size: clamp(9.5px, 2.75vw, 11px) !important; letter-spacing: 0 !important; }
}

/* =========================================================
 * 4. Giá: "đ" thẳng hàng với số, không gạch chân; giá gốc xám, nhỏ, cách 8px
 * ========================================================= */
html body .woocommerce-Price-currencySymbol:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	text-decoration: none !important;
	vertical-align: baseline !important;
	position: static !important;
	top: auto !important;
	font-size: inherit !important;
	line-height: inherit !important;
	margin: 0 !important;
}
html body .price del:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d),
html body del.lc-price-old:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	color: #8a958b !important;
	opacity: 1 !important;
	text-decoration: line-through !important;
	text-decoration-color: #8a958b !important;
}
html body .price del:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) .woocommerce-Price-currencySymbol { text-decoration: none !important; }
html body .price:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { column-gap: 8px !important; align-items: baseline !important; }
html body .price ins:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { text-decoration: none !important; }

/* =========================================================
 * 5. Sao đánh giá (SVG) – thẻ, danh sách, tóm tắt, form
 * ========================================================= */
.lc-star-svg { width: 1em; height: 1em; flex: 0 0 auto; display: block; }
.lc-stars { position: relative; display: inline-flex; vertical-align: middle; line-height: 0; font-size: 16px; }
.lc-stars-base, .lc-stars-fill { display: inline-flex; gap: 2px; }
.lc-stars-base .lc-star-svg { fill: none; stroke: #d0d0d0; stroke-width: 1.6; }
.lc-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; }
.lc-stars-fill .lc-star-svg { fill: #ffc107; stroke: #ffc107; stroke-width: 1.6; }
/* Khung .star-rating cũ của WooCommerce/Flatsome dùng font icon → bỏ kiểu font, giữ component SVG bên trong. */
html body .star-rating:has(.lc-stars):not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	font-family: inherit !important;
	line-height: 0 !important;
	letter-spacing: 0 !important;
	display: inline-flex !important;
	margin: 0 !important;
	float: none !important;
}
html body .star-rating:has(.lc-stars):not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d)::before { content: none !important; display: none !important; }
html body .star-rating:has(.lc-stars) > .lc-stars > span:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { padding: 0 !important; float: none !important; }
html body .star-rating:has(.lc-stars) .lc-stars-fill:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d)::before { content: none !important; }
.lc-rating-avg .lc-stars { font-size: 18px; margin: 6px 0 2px; }
.commentlist .lc-stars, #reviews .comment_container .lc-stars { font-size: 14px; }
/* Sao trên thẻ sản phẩm */
html body .product-small .daban_wrap .lc-star:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { display: inline-flex; color: #ffc107; font-size: 12px; line-height: 1; }
html body .product-small .daban_wrap .lc-star .lc-star-svg { fill: #ffc107; }
html body .product-small .daban_wrap .stars:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d)::after { content: none !important; display: none !important; }

/* Form đánh giá: 5 sao 28px, cách 6px; radio ẩn nhưng vẫn bấm/tab được. */
.lc-rate { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.lc-rate legend { padding: 0; margin: 0 0 6px; font-weight: 700; font-size: 15px; }
.lc-rate-stars { display: inline-flex; gap: 6px; }
.lc-rate-input { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; opacity: 0; }
.lc-rate-stars label { display: inline-flex; margin: 0; padding: 0; cursor: pointer; font-size: 28px; line-height: 1; border-radius: 4px; }
.lc-rate-stars label .lc-star-svg { width: 28px; height: 28px; fill: none; stroke: #d0d0d0; stroke-width: 1.6; transition: fill .1s, stroke .1s; }
.lc-rate-input:focus-visible + label { outline: 2px solid #34c759; outline-offset: 2px; }
/* đã chọn: tô từ sao 1 tới sao được chọn */
.lc-rate-stars:has(#lc-rate-1:checked) label:nth-of-type(-n+1) .lc-star-svg,
.lc-rate-stars:has(#lc-rate-2:checked) label:nth-of-type(-n+2) .lc-star-svg,
.lc-rate-stars:has(#lc-rate-3:checked) label:nth-of-type(-n+3) .lc-star-svg,
.lc-rate-stars:has(#lc-rate-4:checked) label:nth-of-type(-n+4) .lc-star-svg,
.lc-rate-stars:has(#lc-rate-5:checked) label:nth-of-type(-n+5) .lc-star-svg { fill: #ffc107; stroke: #ffc107; }
/* hover: xem trước từ sao 1 tới sao đang trỏ (ghi đè trạng thái đã chọn trong lúc trỏ) */
@media (hover: hover) {
	.lc-rate-stars:has(label:hover) label .lc-star-svg { fill: none; stroke: #d0d0d0; }
	.lc-rate-stars:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1) .lc-star-svg,
	.lc-rate-stars:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2) .lc-star-svg,
	.lc-rate-stars:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3) .lc-star-svg,
	.lc-rate-stars:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4) .lc-star-svg,
	.lc-rate-stars:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5) .lc-star-svg { fill: #ffc107; stroke: #ffc107; }
}
.lc-rate-error { margin: 6px 0 0; color: #d32f2f; font-size: 13px; font-weight: 600; }
.lc-rate-error[hidden] { display: none; }
.lc-rate.is-invalid .lc-rate-stars label .lc-star-svg { stroke: #d32f2f; }

/* Khi mở giỏ hàng / menu dạng trượt (Flatsome off-canvas) → ẩn các thanh cố định ở đáy để không che nút "Xem giỏ hàng" / "Thanh toán". */
html.has-off-canvas .bond-lb,
html.has-off-canvas .bond-pb,
html.has-off-canvas .bond-cbar { display: none !important; }

/* Voucher trên trang chi tiết: mỗi mã 1 ô, "Giảm 5K" và điều kiện mỗi thứ 1 dòng (không vỡ chữ trong ô hẹp). */
html body .lc-voucher-picker .voucher_list:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
	gap: 8px !important;
}
html body .lc-voucher-picker .voucher_list label:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	align-items: center !important;
	column-gap: 8px !important;
	row-gap: 2px !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 8px 10px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
}
html body .lc-voucher-picker .voucher_list label input:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { grid-row: span 2; margin: 0 !important; }
html body .lc-voucher-picker .voucher_list label small:not(#lc-a):not(#lc-b):not(#lc-c):not(#lc-d) { grid-column: 2; font-weight: 400 !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }