/*
 * LALUZ UI Patch — MODULE PRODUCT-INFO
 * Khối "Thông tin sản phẩm" trên PDP.
 *
 * KHÔNG vẽ icon mới. Dùng lại đúng asset sẵn có của theme:
 *   /template/assets/images/ic-info-1.svg  32×43  Thương hiệu
 *   /template/assets/images/ic-info-2.svg  41×41  Nồng độ        (chai atomizer)
 *   /template/assets/images/ic-info-3.svg  43×43  Độ lưu mùi     (giọt nước — Thành chốt giữ)
 *   /template/assets/images/ic-info-4.svg  42×42  Độ tỏa hương   (hoa toả tia)
 *   /template/assets/images/ic-info-5.svg  36×36  Giới tính      (ký hiệu nam/nữ)
 *
 * DOM THẬT (đọc read-only trên laluz.vn ngày 17/08):
 *   div.prod-dt-left-it > div.box-info      ← khối THÔNG SỐ  (5 dòng)
 *     ├ div.tt            "Thông tin sản phẩm"
 *     └ ul.info-list > li.info-item > [ div.ic-info , p.txt > span.lz-k + span.lz-v ]
 *   div.info-prod-it  > div.box-info        ← khối QUYỀN LỢI (4 dòng, do benefits.css lo)
 *     └ ul.info-list > li.info-item > [ div.ic-info , p.txt (text thuần) ]
 *
 * Hai rule đang chặn, đều nằm trong WPCode 23020:
 *   .info-item .ic-info        { display:none !important }  (0,2,0)
 *   body .lz-pdp2 .box-info>.tt{ display:none !important }  (0,3,1)
 * Ghi đè bằng specificity cao hơn, KHÔNG sửa WPCode.
 *
 * Các SVG không có viewBox nên dùng max-width/max-height thay vì width/height.
 * Dữ liệu lấy từ chính markup thuộc tính sản phẩm của theme — không hard-code.
 */

/* ------------------------------------------------------------------ *
 * 1. Khung
 *
 * KHÔNG dùng card. Nền trang đã là #F6F5F2 đúng bằng --lz-paper nên card
 * "giấy trên giấy" không nhìn thấy được, mà theme lại ép padding:0 nên chữ
 * sẽ dính vào viền. Đã dựng thử trên live rồi mới bỏ.
 * Giữ đúng ngôn ngữ của các khối lân cận trên PDP (giá, đánh giá, dung tích):
 * chỉ hairline 1px ngăn dòng, không viền bao, không double border.
 * ------------------------------------------------------------------ */
html body .prod-dt-left-it .box-info {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* ------------------------------------------------------------------ *
 * 2. Tiêu đề — hiện lại chính .tt của theme, không chèn node mới
 *    (0,3,2) > (0,3,1) của rule đang ẩn.
 * ------------------------------------------------------------------ */
html body .lz-pdp2 .prod-dt-left-it .box-info > .tt,
html body .prod-dt-left-it .box-info > .tt {
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 15px 0 13px !important;
	font-family: var(--lz-sans, 'Be Vietnam Pro', sans-serif);
	font-size: 10.5px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: .22em !important;
	text-transform: uppercase !important;
	color: var(--lz-ink, #141310) !important;
}

/* Nếu vì lý do nào đó theme không render .tt, JS chèn .lz-info-tt thay thế */
html body .prod-dt-left-it .box-info .lz-info-tt {
	font-family: var(--lz-sans, 'Be Vietnam Pro', sans-serif);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--lz-ink, #141310);
	padding: 15px 0 13px;
}

/* ------------------------------------------------------------------ *
 * 3. Dòng
 * ------------------------------------------------------------------ */
html body .box-info .info-list li.info-item {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	min-height: 54px !important;
	padding: 8px 0 !important;
	border-top: 1px solid var(--lz-line, #E3E1D9) !important;
	border-bottom: 0 !important;
}

/* ------------------------------------------------------------------ *
 * 4. Icon — bỏ ẩn, chuẩn hoá 22px
 * ------------------------------------------------------------------ */
html body .box-info .info-list .ic-info {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: 22px !important;
	height: 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}

html body .box-info .info-list .ic-info img {
	display: block !important;
	width: auto !important;
	height: auto !important;
	max-width: 22px !important;
	max-height: 22px !important;
	/* asset gốc là icon fill #414141 — đưa về tông ink, không sửa file */
	filter: grayscale(1) brightness(.42) !important;
}

/* ------------------------------------------------------------------ *
 * 5. Nhãn / giá trị — p.txt là flex container chứa span.lz-k + span.lz-v
 * ------------------------------------------------------------------ */
html body .prod-dt-left-it .box-info .info-list li.info-item > .txt {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	line-height: 1.45 !important;
}

html body .prod-dt-left-it .box-info .info-list .lz-k {
	flex: 0 1 auto !important;
	font-size: 13.5px !important;
	font-weight: 300 !important;
	color: var(--lz-grey, #6E6B63) !important;
}

html body .prod-dt-left-it .box-info .info-list .lz-v {
	flex: 0 1 auto !important;
	text-align: right !important;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	color: var(--lz-ink, #141310) !important;
}

/* ------------------------------------------------------------------ *
 * 6. Thiếu thuộc tính → ẩn nguyên dòng, không để dòng trống.
 *    .lz-sp-empty do product-info.js gắn (bắt được cả trường hợp
 *    giá trị chỉ là khoảng trắng — :empty không bắt được).
 * ------------------------------------------------------------------ */
html body .box-info .info-list li.info-item:not(:has(.txt)),
html body .box-info .info-list li.info-item.lz-sp-empty {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * 7. Mobile
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	html body .prod-dt-left-it .box-info .info-list li.info-item > .txt {
		flex-wrap: wrap !important;
		row-gap: 2px !important;
	}
	html body .prod-dt-left-it .box-info .info-list .lz-v {
		text-align: left !important;
	}
}