/* CNP Bộ lọc 0.2 – giao diện kiểu app Chấm điểm: lưới 4 cột, ô chọn thả xuống. Xám than + vàng kim, dùng tốt trên điện thoại. */
.cnpbl { --t: #2b2e33; --v: #c9a227; --vd: #8a6d0f; --vn: #f6efd6; --n: #fff; --n2: #f7f6f3; --c: #23262b; --m: #6b6f76; --l: #dedbd3;
	color: var(--c); font-size: 15px; line-height: 1.45; margin: 0 0 16px; }
/* Chế độ tối: chỉ khi bật trong CNP Hiển thị (thân trang có lớp cnp-toi). Mặc định theo màu sáng của web. */
@media (prefers-color-scheme: dark) {
	body.cnp-toi .cnpbl { --v: #e0b84a; --vd: #e0b84a; --vn: #3d3520; --n: #232427; --n2: #2c2e32; --c: #ecebe6; --m: #a9abb0; --l: #3d3f44; }
	body.cnp-toi .cnpbl-loc { background: var(--v); color: #2b2e33; }
}
.cnpbl *, .cnpbl-man * { box-sizing: border-box; }
/* Chặn kiểu mặc định của giao diện (Flatsome: nút chữ in hoa, label đậm khối, ô chọn có lề). */
.cnpbl label, .cnpbl button, .cnpbl summary, .cnpbl a, .cnpbl select, .cnpbl input, .cnpbl-man button { text-transform: none; letter-spacing: normal; font-size: inherit; font-family: inherit; }
.cnpbl label { display: block; font-weight: 400; margin: 0; }
.cnpbl button, .cnpbl-man button { line-height: 1.2; box-shadow: none; text-shadow: none; margin: 0; }
.cnpbl summary { list-style: none; }
.cnpbl summary::-webkit-details-marker { display: none; }

.cnpbl-hop { background: var(--n); border: 1px solid var(--l); border-radius: 12px; }
.cnpbl-nut-mo { cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; font-weight: 700; }
.cnpbl-nut-mo::after { content: "▾"; margin-left: auto; color: var(--m); }
.cnpbl-hop[open] .cnpbl-nut-mo::after { content: "▴"; }
.cnpbl-dem { background: var(--v); color: #2b2e33; border-radius: 10px; padding: 0 8px; font-size: 12px; }
.cnpbl-form { padding: 0 16px 16px; }
.cnpbl-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.cnpbl-o { min-width: 0; position: relative; }
.cnpbl-nhan { display: block; font-size: 13px; color: var(--m); margin-bottom: 5px; font-weight: 400; }
.cnpbl-nhan i, .cnpbl-nhan small { font-style: normal; color: #a3a6ab; font-size: 12px; }
.cnpbl input[type=text], .cnpbl select, .cnpbl-chon { width: 100%; height: 42px; min-height: 0; border: 1px solid var(--l); border-radius: 8px; background-color: var(--n); color: var(--c); font-size: 15px; padding: 0 12px; margin: 0; box-shadow: none; }
.cnpbl input[type=text]::placeholder { color: #a3a6ab; }
.cnpbl select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; padding-right: 30px; line-height: 40px; }
.cnpbl-chon { display: flex; align-items: center; cursor: pointer; padding-right: 30px; position: relative; user-select: none; }
.cnpbl-chon span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cnpbl-chon.trong span { color: #a3a6ab; }
.cnpbl-chon::after { content: ""; position: absolute; right: 12px; top: 50%; margin-top: -3px; width: 10px; height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat; }
.cnpbl-dd[data-tat] > .cnpbl-chon { background: var(--n2); cursor: not-allowed; }
.cnpbl-khoang { display: flex; align-items: center; gap: 8px; }
.cnpbl-khoang span { color: var(--m); }
.cnpbl-bang { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: min(360px, 92vw); background: var(--n); border: 1px solid var(--l); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 8px; }
.cnpbl-o:nth-child(4n) .cnpbl-bang { left: auto; right: 0; }
.cnpbl-bang .cnpbl-tim-o { height: 36px; margin-bottom: 6px; }
.cnpbl-ds { max-height: 280px; overflow: auto; overscroll-behavior: contain; }
.cnpbl-ds label { display: flex; gap: 8px; align-items: flex-start; padding: 7px 6px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.cnpbl-ds label:hover { background: var(--n2); }
.cnpbl-ds input[type=checkbox] { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--vd); flex-shrink: 0; position: static; opacity: 1; }
.cnpbl-ds .phu { display: block; font-size: 12px; color: var(--m); }
.cnpbl-ds .nhom { font-size: 12px; font-weight: 700; color: var(--vd); padding: 8px 6px 2px; text-transform: uppercase; letter-spacing: .03em; }
.cnpbl-ds .trong-ds { color: var(--m); font-size: 13px; padding: 8px 6px; }
.cnpbl-tab { display: flex; gap: 4px; margin-bottom: 6px; background: var(--n2); border-radius: 8px; padding: 3px; }
.cnpbl-tab button { flex: 1; border: 0; background: none; border-radius: 6px; padding: 6px; font-size: 13px; cursor: pointer; color: var(--m); }
.cnpbl-tab button.on { background: var(--n); color: var(--c); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.cnpbl-chan { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--l); margin-top: 6px; padding-top: 8px; }
.cnpbl-nut { height: 32px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--t); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.cnpbl-nut.phu { background: none; color: var(--c); border: 1px solid var(--l); font-weight: 500; }
.cnpbl-cuoi { display: flex; align-items: center; gap: 12px; align-self: end; height: 42px; }
.cnpbl-loc { height: 42px; padding: 0 22px; border-radius: 8px; border: 0; background: var(--t); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.cnpbl-xoa { color: var(--m); text-decoration: underline; }
.cnpbl-them { grid-column: 1 / -1; }
.cnpbl-them > summary { display: inline-flex; align-items: center; cursor: pointer; color: var(--vd); font-weight: 600; height: 32px; }
.cnpbl-them > summary::after { content: " ▾"; white-space: pre; }
.cnpbl-them[open] > summary::after { content: " ▴"; }
.cnpbl-them[open] > summary { margin-bottom: 8px; }
.cnpbl-them > .cnpbl-luoi { border-top: 1px dashed var(--l); padding-top: 12px; }
.cnpbl-goi-y { color: var(--m); font-size: 13px; margin: 4px 0 0; }
.cnpbl-tom-tat { margin-top: 10px; padding: 10px 14px; background: var(--vn); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cnpbl-tom-tat > b { margin-right: 4px; }
.cnpbl-chip-loc { display: inline-flex; align-items: center; gap: 6px; background: var(--n); border: 1px solid #ead9a0; border-radius: 16px; padding: 3px 10px; font-size: 13px; color: inherit; text-decoration: none; }
.cnpbl-chip-loc span { color: var(--vd); font-size: 15px; line-height: 1; }
.cnpbl-xoa-het { color: inherit; text-decoration: underline; font-size: 13px; }
.cnpbl-tom-tat .cnpbl-bao { margin-left: auto; height: 38px; padding: 0 14px; border-radius: 8px; background: var(--n); color: var(--c); border: 1px solid var(--vd); font-weight: 700; font-size: 14px; cursor: pointer; }
.cnpbl-tom-tat .cnpbl-bao.noi { background: var(--v); color: #2b2e33; border-color: var(--v); }
.cnpbl-tom-tat .cnpbl-goi-y { flex-basis: 100%; }
@media (min-width: 900px) { .cnpbl-hop[open] > .cnpbl-nut-mo { pointer-events: none; } .cnpbl-hop[open] > .cnpbl-nut-mo::after { content: none; } }
@media (max-width: 899px) { .cnpbl-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cnpbl-o:nth-child(2n) .cnpbl-bang { left: auto; right: 0; } .cnpbl-o:nth-child(2n+1) .cnpbl-bang { left: 0; right: auto; } }
@media (max-width: 599px) {
	.cnpbl-luoi { gap: 10px; }
	.cnpbl-cuoi { grid-column: 1 / -1; }
	.cnpbl-cuoi .cnpbl-loc { flex: 1; }
	.cnpbl-bang { max-width: calc(100vw - 32px); }
	.cnpbl-tom-tat .cnpbl-bao { margin-left: 0; width: 100%; }
}

.cnpbl-man { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 99998; display: flex; align-items: flex-end; justify-content: center; padding: 16px; font-size: 15px; }
@media (min-width: 600px) { .cnpbl-man { align-items: center; } }
.cnpbl-man .hop { background: #fff; color: #23262b; border-radius: 14px; max-width: 440px; width: 100%; padding: 18px; }
@media (prefers-color-scheme: dark) { body.cnp-toi .cnpbl-man .hop { background: #232427; color: #ecebe6; } }
.cnpbl-man h3 { margin: 0 0 6px; font-size: 18px; color: inherit; }
.cnpbl-man p { margin: 0 0 12px; opacity: .8; }
.cnpbl-man input[type=text], .cnpbl-man input[type=tel] { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #ccc; border-radius: 10px; font-size: 16px; margin-bottom: 8px; }
.cnpbl-man .nut { display: flex; flex-direction: column; gap: 8px; }
.cnpbl-man .phu { background: transparent; color: inherit; border: 1px solid #ccc; }
.cnpbl-man .loi { color: #c0392b; min-height: 20px; font-size: 14px; }
.cnpbl-bay { position: absolute !important; left: -9999px !important; }