/*
 * LALUZ UI Patch — MODULE QUICKWINS (CSS)
 * Batch verify-first 18/08/2026. Chỉ vá những lỗi đã ĐO ĐƯỢC trên production
 * hôm đó, không lấy lại kết luận của audit cũ.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * VÌ SAO MỌI SELECTOR ĐỀU PREFIX "html body" + !important
 * ────────────────────────────────────────────────────────────────────────────
 * Ghi chú cũ trong laluz-ui-patch.php nói priority 999 làm plugin in SAU phần
 * CSS inline của WPCode. ĐO LẠI 18/08/2026 THÌ NGƯỢC LẠI:
 *
 *   styleSheets[28..35] = laluz-ui-patch (header.css … shop-perpage.css)  ← LINK, in TRƯỚC
 *   styleSheets[36]     = <style> inline 136.208 ký tự
 *                         :root --laluz-final-ui-version = "2026-08-16-V7-L18-24"
 *                         → chính là WPCode 23020                          ← in SAU
 *   styleSheets[38]     = wp-custom-css (Customizer)                       ← in SAU CÙNG
 *
 * Tức là 23020 THẮNG plugin khi hoà specificity. Muốn thắng nó phải vừa cao
 * specificity hơn vừa có !important. Đây cũng là lý do shop-perpage.css có sẵn
 * đã viết theo đúng kiểu này. ĐỪNG bỏ prefix.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * KHÔNG DÙNG MỘT DÒNG JS NÀO trong module này — cả 6 mục đều giải được bằng CSS.
 * ────────────────────────────────────────────────────────────────────────────
 */


/* ══════════════════════════════════════════════════════════════════════════
   B · REVIEW ZERO-STATE
   ══════════════════════════════════════════════════════════════════════════

   BEFORE, đo trên /gritti-tangerina/ (review_count = 0):
     · KHÔNG có 5 sao rỗng  → không tạo cảm giác "0/5". Phần này theme đã đúng.
     · CÓ bộ lọc vô nghĩa: Tất cả · 5 Điểm (0) · 4 Điểm (0) … 1 Điểm (0)
       — 5 nút vĩnh viễn không có gì để lọc.
     · NÓI CÙNG MỘT CÂU HAI LẦN:
         span.total-rvw       "Hiện tại chưa có đánh giá nào cho sản phẩm này!"
         div.mona-mess-empty  "Hiện chưa có bài đánh giá nào"
     · Hai khung viền lồng nhau (.box-point + .rvw-cmt) quanh một câu chữ.

   CÁCH NHẬN DIỆN STATE (không cần JS, không cần biết review_count):

     0 đánh giá   → .rvw-stars CHỈ chứa span.total-rvw
     có đánh giá  → .rvw-stars chứa .total-stars + ul.stars + span.total-rvw

   → gate bằng .reviews-dt:not(:has(.total-stars)).
   Đã kiểm CSS.supports('selector(:has(*))') = true trên production.
   :has() là selector SỐNG: ngày nào sản phẩm có đánh giá thật, .total-stars
   xuất hiện và toàn bộ khối trả về nguyên trạng — không cần gỡ rule.

   ĐÃ REGRESSION TEST trên /atelier-materi-narcisse-taiji-edp/ (1 đánh giá, 5/5)
   với chính CSS này đang bật: .all-point còn hiện, .rvw-cmt còn hiện,
   điểm 5/5, chip "5 Điểm (1)", nội dung review nguyên vẹn.

   KHÔNG thêm nút "VIẾT ĐÁNH GIÁ": đã quét, .reviews-dt không chứa button /
   a.btn / input[submit] nào — site hiện KHÔNG có form viết đánh giá trên PDP.
   Vẽ một nút không dẫn tới đâu là làm site tệ hơn.
   ────────────────────────────────────────────────────────────────────────── */

/* 1 · Bỏ bộ lọc theo sao khi tất cả đều bằng 0 */
html body .reviews-dt:not( :has( .total-stars ) ) .all-point {
	display: none !important;
}

/* 2 · Bỏ khung dưới — nó chỉ chứa câu trùng lặp và một phân trang rỗng */
html body .reviews-dt:not( :has( .total-stars ) ) .rvw-cmt {
	display: none !important;
}

/* 3 · Bỏ khung đôi, trả khối rỗng về nhịp editorial */
html body .reviews-dt:not( :has( .total-stars ) ) .box-point,
html body .reviews-dt:not( :has( .total-stars ) ) .box-point .inner {
	border: 0 !important;
	background: transparent !important;
}

html body .reviews-dt:not( :has( .total-stars ) ) .box-point .inner {
	padding: 0 !important;
	text-align: left !important;
}

html body .reviews-dt:not( :has( .total-stars ) ) .rvw-stars {
	width: 100% !important;
	max-width: none !important;
	flex: 0 0 100% !important;
}

html body .reviews-dt:not( :has( .total-stars ) ) .rvw-stars .total-rvw {
	display: block !important;
	margin: 0 !important;
	font-family: var( --lz-sans, 'Be Vietnam Pro', sans-serif ) !important;
	font-size: 14.5px !important;
	font-weight: 300 !important;
	color: var( --lz-grey, #6E6B63 ) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   C · Ô "SẮP XẾP" TRÊN TRANG DANH SÁCH
   ══════════════════════════════════════════════════════════════════════════

   Audit cũ đoán là "thiếu mũi tên, trông như chữ thường". SAI — đo lại:
     .prod-heading-right .box-op::after  →  ic-caret.svg, 20×20, right: 0
   Mũi tên VẪN CÓ. Lỗi thật là hai con số này:

                      ô "Sắp xếp" (theme)   ô "Hiển thị" (module shop_perpage)
     rộng                   280px                    159px
     cao                     27px                     27px
     nhãn → mũi tên        ~200px                    ~10px

   → "Mới nhất" và mũi tên rời hẳn nhau, đọc như hai thứ không liên quan;
     hai control đứng cạnh nhau lại thuộc hai hệ khác nhau;
     27px dưới ngưỡng vùng chạm.

   AFTER (đo lại sau khi áp CSS này, trên production):
     ô "Sắp xếp"  280×27  →  175×40
     ô "Hiển thị" 159×27  →  159×40
     mobile 386px: documentElement.scrollWidth === clientWidth === 381 → không tràn

   KHÔNG đổi logic sort, KHÔNG đổi/thêm/bớt option, KHÔNG đổi URL, KHÔNG đổi
   phân trang. Đã thử lại 2 option trên live sau khi áp: lowtohigh và hightolow
   đều trả đúng thứ tự.
   ────────────────────────────────────────────────────────────────────────── */

/* Thu ô về đúng bề rộng nội dung để mũi tên đứng ngay cạnh nhãn.
   :not(.lz-pp-wrap) để không bao giờ chạm vào ô của module shop_perpage. */
html body .prod-heading-right .box-op:not( .lz-pp-wrap ) {
	width: auto !important;
	min-width: 0 !important;
}

/* Nhãn ngữ cảnh, cùng hệ với "Hiển thị" của ô bên cạnh */
html body .prod-heading-right .box-op:not( .lz-pp-wrap )::before {
	content: 'Sắp xếp' !important;
	margin-right: 8px !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	color: var( --lz-grey, #6E6B63 ) !important;
	white-space: nowrap !important;
}

/* padding-right 22px chừa chỗ cho ::after (mũi tên) khỏi đè lên chữ */
html body .prod-heading-right .box-op:not( .lz-pp-wrap ) > select.prod-op {
	width: auto !important;
	min-width: 108px !important;
	padding: 6px 22px 6px 0 !important;
	cursor: pointer !important;
}

/* Vùng chạm tối thiểu cho CẢ HAI ô */
html body .prod-heading-right .box-op {
	min-height: 40px !important;
}

/* Chỉ hiện khi đi bằng bàn phím — dùng chuột không thấy gì khác. WCAG 2.4.7 */
html body .prod-heading-right select:focus-visible {
	outline: 1px solid var( --lz-ink, #141310 ) !important;
	outline-offset: 3px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   E1 · BADGE BỘ CÔNG THƯƠNG
   ══════════════════════════════════════════════════════════════════════════
   Đo: .image-bct img = 200 × 75.7px trong footer rộng 1381px.
   Là vật thể BÃO HOÀ MÀU DUY NHẤT (xanh + đỏ) trên nền đen — hút mắt mạnh hơn
   toàn bộ phần còn lại của footer, kể cả tên LALUZ.

   KHÔNG xoá, KHÔNG đổi asset, KHÔNG grayscale, link vẫn bấm được.
   Chỉ hạ dominance bằng kích thước + khoảng thở, đúng ràng buộc §10.8 của spec.
   140px vẫn thừa để đọc rõ chữ "ĐÃ THÔNG BÁO / BỘ CÔNG THƯƠNG".
   ────────────────────────────────────────────────────────────────────────── */
html body .footer .image-bct {
	margin-top: 18px !important;
}

html body .footer .image-bct img {
	width: 140px !important;
	height: auto !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   E2 · ICON LIÊN HỆ vs ICON SOCIAL
   ══════════════════════════════════════════════════════════════════════════
   Đo: hai bộ icon đang thuộc hai hệ hình khác nhau.

                    liên hệ (ic-house/ic-phone/ic-mail)   social (FB/TikTok/IG)
     cỡ                     22 × 22                            40 × 40
     kiểu               nét ĐẶC, không khung          nét VIỀN, trong vòng tròn
     độ nổi        trắng 100% (filter invert)              viền mảnh

   → icon liên hệ đang nặng hơn chính dòng chữ nó đứng cạnh.

   KHÔNG vẽ icon mới (rule #9 của handoff) — dùng đúng asset SVG sẵn có.
   Chỉ hạ cỡ và độ nổi để nó ngang trọng lượng với dòng chữ.
   Muốn thống nhất HÌNH DẠNG (outline, stroke 1.25px) thì phải làm 3 file SVG
   mới — việc đó chờ Thành duyệt, không làm ở đây.
   ────────────────────────────────────────────────────────────────────────── */
html body .footer .ft-it .menu-ft-list img {
	width: 16px !important;
	height: 16px !important;
	margin-right: 12px !important;
	opacity: .6 !important;
}

html body .footer .ft-it .menu-ft-list .menu-item {
	align-items: center !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   E3 · WATERMARK FOOTER
   ══════════════════════════════════════════════════════════════════════════
   Root cause đo được (khác hẳn "watermark bị chữ đè" của audit cũ):
   trong WPCode 23020 có BA rule chồng nhau cho footer.footer::after, mỗi rule
   từ một round redesign khác nhau —

     ① footer.footer::after      { right:-36px; bottom:-56px; 300×300 }   góc phải
     ② body footer.footer::after { right:12px;  bottom:8px;   340×340 }   góc phải
     ③ body footer.footer::after { inset:0; 100%×100%;
                                   mask-position: 44% 94%; mask-size:180px } ← THẮNG

   Rule ③ đặt logo ở 44% ngang / 94% dọc → nó rơi đúng dưới khối chữ pháp lý
   (dòng "Địa chỉ: 144 phố Kim Ngưu…" chạy x=90→537, watermark bắt đầu x=528)
   và chạm mép dưới footer → trông đúng như lỗi layer.

   QUYẾT ĐỊNH: BỎ HẲN, không dời chỗ. Lý do:
     · footer không còn khoảng trống nào — phải là badge BCT, trái là khối pháp
       lý, giữa là 3 cột menu. Dời đi đâu cũng va vào chữ.
     · ngay phía trên footer đã có band "LALUZ PARFUMS" cỡ lớn; một watermark
       3.5% alpha bên dưới không thêm được gì.
   Spec cho phép: "hoặc bỏ watermark nếu nó không còn đóng vai trò thị giác".

   Không sửa 23020 — chỉ đè bằng specificity cao hơn từ plugin.
   ────────────────────────────────────────────────────────────────────────── */
html body footer.footer::after {
	display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   F4 · CHUẨN HOÁ HIỂN THỊ EMAIL Ở FOOTER
   ══════════════════════════════════════════════════════════════════════════
   Footer đang hiện "Info@laluz.vn" (chữ I hoa). Spec cho phép chuẩn hoá
   PRESENTATION: "có thể chuẩn hóa presentation thành info@laluz.vn".

   Neo vào a[href^="mailto:"] — đã kiểm trên live, trong footer có ĐÚNG MỘT
   link như vậy và nó chính là link email. Không neo vào tên file icon vì icon
   bị lazyload nên thuộc tính src là data-URI.

   Đây là bản vá TẠM: gốc của nó là Navigation Label trong Appearance → Menus.
   Rule này idempotent — Thành sửa label rồi thì nó vẫn đúng, không xung đột.
   KHÔNG đổi địa chỉ mailto:.
   ────────────────────────────────────────────────────────────────────────── */
html body .footer a[href^="mailto:"] {
	text-transform: lowercase !important;
}