/* Chọn nhanh lần đầu + bộ lọc nhớ theo máy + giới hạn xem khi chưa đăng nhập (task 401, KQ-20261109-008).
   Lớp cn-* = chọn nhanh, xg-* = giới hạn xem. Dùng token của ui2.css. */

/* ---------- Thẻ hỏi lần đầu (nằm trong danh sách, không che nội dung) ---------- */
.cn-card{margin:12px 0 4px;padding:16px;border-radius:var(--r-lg,16px);background:var(--band,#123a32);color:var(--band-ink,#f6f3ea)}
.cn-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.cn-step{font:600 12px/1 var(--f-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--band-ink-2,#b9cdc5)}
.cn-skip{min-height:44px;padding:0 4px;margin:-6px -4px;border:0;background:none;color:var(--band-ink,#f6f3ea);font:500 14px/1 var(--f-ui);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.cn-q{margin:6px 0 12px;font:700 18px/1.3 var(--f-ui);color:var(--band-ink,#f6f3ea)}
.cn-hint{margin:-6px 0 12px;font:400 14px/1.4 var(--f-ui);color:var(--band-ink-2,#b9cdc5)}
.cn-opts{display:flex;flex-wrap:wrap;gap:8px}
.cn-opt{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid color-mix(in srgb,var(--band-ink,#f6f3ea) 28%,transparent);border-radius:999px;background:transparent;color:var(--band-ink,#f6f3ea);font:500 15px/1.2 var(--f-ui);cursor:pointer;transition:background .15s,color .15s}
.cn-opt:hover{background:color-mix(in srgb,var(--band-ink,#f6f3ea) 10%,transparent)}
.cn-opt[aria-pressed="true"]{background:var(--band-ink,#f6f3ea);border-color:var(--band-ink,#f6f3ea);color:var(--band,#123a32);font-weight:700}
.cn-opt:focus-visible,.cn-skip:focus-visible,.cn-next:focus-visible{outline:2px solid var(--band-ink,#f6f3ea);outline-offset:2px}
.cn-acts{display:flex;align-items:center;gap:12px;margin-top:14px}
.cn-next{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border:0;border-radius:12px;background:var(--band-ink,#f6f3ea);color:var(--band,#123a32);font:700 15px/1 var(--f-ui);cursor:pointer}
.cn-next[disabled]{opacity:.45;cursor:default}
.cn-next .ic{width:18px;height:18px}
.cn-back{min-height:44px;padding:0 8px;border:0;background:none;color:var(--band-ink-2,#b9cdc5);font:500 14px/1 var(--f-ui);cursor:pointer}
@media (min-width:760px){
  .cn-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:4px 24px;padding:20px 24px}
  .cn-top{grid-column:1/-1}
  .cn-body{min-width:0}
  .cn-acts{margin-top:0;align-self:end}
}
body.cn-asking #goi-y-banner{display:none!important}

/* ---------- Dải "bộ lọc của bạn" (đang dùng bộ lọc nhớ trên máy) ---------- */
.cn-saved{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:10px 0 2px;padding:8px 8px 8px 12px;border-radius:12px;background:var(--accent-soft,#dcebe5);color:var(--ink,#141c19);font:500 14px/1.35 var(--f-ui)}
.cn-saved .ic{width:18px;height:18px;flex:none;color:var(--accent,#1c5d4f)}
.cn-saved-t{display:flex;align-items:center;gap:8px;flex:1 1 200px;min-width:0}
.cn-saved-acts{display:flex;align-items:center;gap:4px;margin-left:auto}
.cn-link{min-height:40px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--accent,#1c5d4f);font:600 14px/1 var(--f-ui);cursor:pointer}
.cn-link:hover{background:color-mix(in srgb,var(--accent,#1c5d4f) 10%,transparent)}
.cn-clear{min-height:40px;padding:0 14px;border:0;border-radius:10px;background:var(--accent,#1c5d4f);color:var(--accent-ink,#fff);font:600 14px/1 var(--f-ui);cursor:pointer}
body.cn-has-saved #active-chips .chip.clear-all{display:none}
/* Chưa lọc gì: một chip mời chọn nhanh trong hàng chip (không thêm dòng chữ). */
.cn-ask-chip{gap:6px;color:var(--accent,#1c5d4f);border-style:dashed;cursor:pointer}
.cn-ask-chip .ic{width:16px;height:16px}

/* ---------- Giới hạn xem: tin thứ 11 khi chưa đăng nhập ---------- */
.xg{max-width:560px;margin:24px auto;padding:0 16px}
.xg-card{padding:24px 20px;border:1px solid var(--rule,#d8d5cc);border-radius:var(--r-lg,16px);background:var(--sheet,#fff);text-align:left}
.xg-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--accent-soft,#dcebe5);color:var(--accent,#1c5d4f)}
.xg-ic .ic{width:24px;height:24px}
.xg h1{margin:16px 0 8px;font:700 22px/1.3 var(--f-ui);color:var(--ink,#141c19)}
.xg p{margin:0 0 8px;color:var(--ink-2,#3f4a45);font:400 15px/1.5 var(--f-ui)}
.xg-item{margin:12px 0 4px;padding:12px;border-radius:12px;background:var(--sheet-2,#faf9f6);color:var(--ink,#141c19);font:600 15px/1.4 var(--f-ui);overflow-wrap:anywhere}
.xg-item small{display:block;margin-bottom:4px;color:var(--ink-3,#66716b);font:500 12px/1.2 var(--f-ui)}
.xg-acts{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.xg-acts .btn-primary,.xg-acts .btn-ghost{width:100%;min-height:48px;font-size:15px}
.xg-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:8px;color:var(--ink-2,#3f4a45);font:500 14px/1 var(--f-ui);text-decoration:none}
.xg-back .ic{width:18px;height:18px}
@media (min-width:760px){.xg{margin-top:48px}.xg-card{padding:32px}.xg-acts{flex-direction:row}.xg-acts .btn-primary,.xg-acts .btn-ghost{width:auto;flex:1}}

/* Điện thoại, đang lọc: nút Bộ lọc chỉ còn icon + số (nhãn đọc màn hình "Bộ lọc, đang bật N" vẫn giữ ở aria-label),
   để ô tìm không bị cắt chữ gợi ý "Tìm gói, chủ đầu tư" khi huy hiệu số làm nút rộng ra. */
@media (max-width:639px){
  .lt-ctl .fbtn:has(.count:not([hidden])){padding:0 12px;gap:6px}
  .lt-ctl .fbtn:has(.count:not([hidden])) .fbtn-t{display:none}
}