/*
 * Bộ lọc sản phẩm ở trang danh mục (2026-10-16; máy chủ: includes/bo-loc.php, JS: js/bo-loc.js; mô tả ở SO-TAY/02). Nạp sau style.css,
 * ở mọi trang danh mục. Số đo lấy từ ảnh demo người dùng duyệt (backups/anh-chup/2026-10-16-demo-bo-loc/, bản "nhỏ"): nút như nút Sắp
 * xếp (cao 26px, chữ 13px, bo 6px, viền #ddd), cách nhau 8px; dòng "Đang lọc theo" cách 8px, thẻ cao 24px. Khung xổ: cách nút 8px, rộng
 * 400px, lề trong 12px, bo 8px, ô cao 28px cách nhau 6px, vạch #f0f0f0, 2 nút cao 32px. Điện thoại: hàng nút cao 32px chữ 12px vuốt ngang;
 * bảng từ dưới lên (cao tối đa 84%, bo 16px góc trên).
 * Từ 2026-10-17 (demo `backups/anh-chup/2026-10-17-demo-gop-loc-sap-xep/`): "Lọc theo" và "Sắp xếp theo" chung một dải nền #f5f5f5 như
 * khung tiêu đề, cao 36px khi đủ chỗ 1 hàng, các nút nằm giữa dải theo chiều dọc; "Lọc theo" thẳng hàng với chữ tiêu đề (cách mép 23px).
 * Cũng 2026-10-17, sau đó (người dùng yêu cầu): bỏ nền xám, dải trong suốt; "Lọc theo" sát mép trái, Sắp xếp sát mép phải, thẳng mép lưới
 * sản phẩm (bỏ lề trong 2 bên); lề trên dưới giữ nguyên nên nút, lưới không xê dịch theo chiều dọc.
 */

/* ---------- Dải lọc + Sắp xếp ---------- */
/* Dải cách dải banner 10px, cách lưới 7px; lề trên dưới 5px (của dải nền xám trước đây) giữ lại nên nút cách hàng chấm banner 15px, cách
   khung thẻ 12px như trước. Dòng "Đang lọc theo" (nếu có) cách lưới 7px */
.bo-loc {position: relative; z-index: 20; margin: 10px 0 7px;}
.bo-loc-hang {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 5px 0;}
/* Nhãn thẳng hàng với dòng nút đầu (danh mục nhiều tiêu chí thì nút lọc xuống 2 dòng, Sắp xếp nằm giữa bên phải). Phần lọc cần ít nhất
   420px: màn hẹp (vd 768px) không đủ chỗ thì Sắp xếp xuống dòng riêng, bên phải, thay vì ép nút lọc thành 3 dòng */
.bo-loc-trai {display: flex; align-items: flex-start; flex: 1 1 420px; min-width: 0;}
.bo-loc-hang .product-sort {flex: none; margin: 0 0 0 auto;}
.bo-loc-nhan,
.bo-loc-dang-nhan {flex: none; margin-right: 8px; color: var(--xam-12); font-size: 13px; font-weight: 700; line-height: 26px; white-space: nowrap;}
.bo-loc-nut-ds {display: flex; flex-wrap: wrap; gap: 8px; min-width: 0;}
.bo-loc-nut {display: inline-flex; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box; height: 26px; margin: 0; padding: 0 10px; background: #fff; border: 1px solid var(--xam-5); border-radius: 6px; color: var(--xam-12); font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; transition: color .2s, border-color .2s, background-color .2s;}
.bo-loc-nut i {font-size: 12px;}
.bo-loc-nut .bo-loc-mui-ten {margin-left: 1px; color: var(--xam-11); font-size: 10px; transition: transform .2s;}
.bo-loc-nut:hover,
.bo-loc-nut:focus-visible {color: var(--do-11); border-color: var(--do-8); text-decoration: none; outline: none;}
.bo-loc-nut:focus {text-decoration: none;}
.bo-loc-nut.active {color: var(--do-11); background: var(--do-3); border-color: var(--do-8); font-weight: 700;}
.bo-loc-nut:hover .bo-loc-mui-ten,
.bo-loc-nut.active .bo-loc-mui-ten,
.bo-loc-nut.dang-mo .bo-loc-mui-ten {color: inherit;}
.bo-loc-nut.dang-mo .bo-loc-mui-ten {transform: rotate(180deg);}
.bo-loc-nut-tat-ca,
.bo-loc-nut-tat-ca:focus {color: var(--do-11); border-color: var(--do-8);}
.bo-loc-dem {display: inline-block; box-sizing: border-box; min-width: 16px; height: 16px; padding: 0 4px; background: var(--do-9); border-radius: 8px; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;}

/* Dòng "Đang lọc theo" */
.bo-loc-dang {display: flex; align-items: flex-start; margin-top: 8px;}
.bo-loc-dang-nhan {margin-right: 10px; line-height: 24px;}
.bo-loc-the-ds {display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0;}
.bo-loc-the {display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 24px; padding: 0 10px; background: var(--do-3); border: 1px solid var(--do-8); border-radius: 12px; color: var(--do-11); font-size: 12px; line-height: 1; white-space: nowrap; transition: background-color .2s;}
.bo-loc-the i {font-size: 10px;}
.bo-loc-the:hover,
.bo-loc-the:focus {background: var(--do-4); color: var(--do-10); text-decoration: none;}
.bo-loc-bo-het,
.bo-loc-bo-het:focus {margin-left: 4px; color: var(--do-11); font-size: 12px; text-decoration: underline; white-space: nowrap;}
.bo-loc-bo-het:hover {color: var(--do-10);}

/* Lọc ra 0 sản phẩm */
.bo-loc-trong {margin: 20px 0; font-size: 15px;}
.bo-loc-trong a {color: var(--do-11); text-decoration: underline;}

/* ---------- Khung xổ (máy tính) ---------- */
.bo-loc-khung {position: absolute; top: 0; left: 0; z-index: 60; box-sizing: border-box; width: 400px; max-width: 100%; padding: 12px; background: #fff; border-radius: 8px; box-shadow: 0 6px 24px rgba(16, 24, 40, .16), 0 0 0 1px rgba(16, 24, 40, .05); color: var(--xam-12); font-size: 13px; line-height: 1.4; text-align: left;}
.bo-loc-khung[hidden] {display: none;}
.bo-loc-khung:focus {outline: none;}
.bo-loc-khung-tat-ca {width: 640px;}
.bo-loc-mui {position: absolute; top: -6px; left: 30px; width: 12px; height: 12px; background: #fff; box-shadow: -1px -1px 0 rgba(16, 24, 40, .05), -3px -3px 6px rgba(16, 24, 40, .05); transform: rotate(45deg);}
.bo-loc-khung-dau {display: none;}
.bo-loc-khung-than {position: relative;}
.bo-loc-khung-tat-ca .bo-loc-khung-than {max-height: min(60vh, 520px); overflow-y: auto; margin-right: -8px; padding-right: 8px; overscroll-behavior: contain;}
.bo-loc-nhom[hidden] {display: none;}
.bo-loc-nhom + .bo-loc-nhom {margin-top: 14px;}
.bo-loc-nhom-ten {margin: 0 0 8px; color: var(--xam-12); font-size: 13px; font-weight: 700; line-height: 1.4;}
.bo-loc-o-ds {display: flex; flex-wrap: wrap; gap: 6px;}
.bo-loc-o {position: relative; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 28px; margin: 0; padding: 0 10px; background: #fff; border: 1px solid var(--xam-5); border-radius: 6px; color: var(--xam-12); font-size: 13px; font-weight: 400; line-height: 1; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; transition: color .2s, border-color .2s;}
.bo-loc-o[hidden] {display: none;}
.bo-loc-o input {position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;}
.bo-loc-so {color: var(--xam-11); font-size: 12px; font-weight: 400;}
.bo-loc-o:hover {border-color: var(--do-8); color: var(--do-11);}
.bo-loc-o:focus-within {box-shadow: 0 0 0 2px rgba(228, 11, 11, .25);}
.bo-loc-o.dang-chon {background: var(--do-3); border-color: var(--do-8); color: var(--do-11); font-weight: 700;}
.bo-loc-o.dang-chon .bo-loc-so {color: var(--do-8);}
/* Dấu ✓ trắng trên nền đỏ ở góc trên phải ô đang chọn */
.bo-loc-o.dang-chon::before {content: ''; position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; background: var(--do-9); border-radius: 0 6px 0 6px;}
.bo-loc-o.dang-chon::after {content: ''; position: absolute; top: 1px; right: 4px; width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);}
.bo-loc-khung-chan {display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--xam-3);}
.bo-loc-khung-chan button {flex: 1 1 0; box-sizing: border-box; height: 32px; margin: 0; padding: 0 10px; border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; transition: color .2s, border-color .2s, background-color .2s;}
.bo-loc-bo-chon {background: #fff; border: 1px solid var(--xam-5); color: var(--xam-12);}
.bo-loc-bo-chon:hover,
.bo-loc-bo-chon:focus-visible {border-color: var(--do-8); color: var(--do-11); outline: none;}
.bo-loc-xem {background: var(--do-9); border: 1px solid var(--do-9); color: #fff;}
.bo-loc-xem:hover,
.bo-loc-xem:focus-visible {background: var(--do-10); border-color: var(--do-10); outline: none;}
.bo-loc-xem[disabled] {opacity: .7; cursor: wait;}

/* ---------- Bảng lọc điện thoại (JS chuyển khung ra cuối body, lớp bo-loc-khung-bang) ---------- */
.bo-loc-lop {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s;}
.bo-loc-lop.hien {opacity: 1;}
.bo-loc-lop[hidden] {display: none;}
.bo-loc-khung.bo-loc-khung-bang {position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 100001; display: flex; flex-direction: column; width: auto; max-width: none; max-height: 84vh; max-height: 84dvh; padding: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, .18); font-family: inherit; transform: translateY(100%); transition: transform .25s ease;}
.bo-loc-khung.bo-loc-khung-bang[hidden] {display: none;}
.bo-loc-khung-bang.hien {transform: none;}
.bo-loc-khung-bang .bo-loc-mui {display: none;}
.bo-loc-khung-bang .bo-loc-khung-dau {display: flex; flex: none; align-items: center; justify-content: space-between; padding: 16px 16px 14px; border-bottom: 1px solid var(--xam-3);}
.bo-loc-khung-ten {margin: 0; color: var(--xam-12); font-size: 18px; font-weight: 700; line-height: 24px;}
.bo-loc-dong {width: 32px; height: 32px; margin: -6px -8px -6px 0; padding: 0; background: none; border: 0; color: var(--xam-12); font-size: 20px; line-height: 32px; cursor: pointer;}
.bo-loc-khung-bang .bo-loc-khung-than {flex: 1 1 auto; overflow-y: auto; padding: 0 16px 16px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;}
.bo-loc-khung-bang .bo-loc-nhom {margin-top: 16px;}
.bo-loc-khung-bang .bo-loc-nhom-ten {color: var(--xam-12); font-size: 15px;}
.bo-loc-khung-bang .bo-loc-o-ds {gap: 8px;}
.bo-loc-khung-bang .bo-loc-khung-chan {flex: none; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff;}
html.bo-loc-khoa,
html.bo-loc-khoa body {overflow: hidden !important;}

@media (prefers-reduced-motion: reduce) {
	.bo-loc-khung-bang,
	.bo-loc-lop,
	.bo-loc-nut .bo-loc-mui-ten {transition: none;}
}

/* ---------- Điện thoại ---------- */
@media (max-width: 767px) {
	/* Không đủ chỗ 1 hàng: "Lọc theo" (vuốt ngang) ở trên, "Sắp xếp theo" ngay dưới, cùng thẳng mép lưới; lề trên dưới 10px giữ như khi
	   còn nền xám */
	.bo-loc-hang {display: block; padding: 10px 0;}
	.bo-loc-trai {display: block;}
	.bo-loc-trai + .product-sort {margin-top: 10px;}
	.bo-loc-nhan {display: block; margin: 0 0 8px; line-height: 16px;}
	/* Hàng nút lọc, hàng thẻ "Đang lọc theo" vuốt ngang tới sát mép màn hình (vuốt hết thì nút cuối thẳng mép phải lưới); không xuống dòng,
	   không hiện thanh cuộn */
	.bo-loc-nut-ds,
	.bo-loc-the-ds {flex-wrap: nowrap; overflow-x: auto; margin-right: -15px; padding-right: 15px; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
	.bo-loc-nut-ds::-webkit-scrollbar,
	.bo-loc-the-ds::-webkit-scrollbar {display: none;}
	.bo-loc-nut {flex: none; height: 32px; font-size: 12px;}
	.bo-loc-dang {margin-top: 10px;}
	.bo-loc-the,
	.bo-loc-bo-het {flex: none;}
}