/* ======================================================================
   ListHeader — HEADER DÙNG CHUNG cho trang listing (bóc từ cq-plant 2026-08-08).
   Gồm: eyebrow + tiêu đề (icon + tên + số đếm) + thanh 1 HÀNG
   [ tiêu đề | phân trang (giữa) | dropdown sắp xếp (phải) ] + note + subnote.
   Dựng bằng ListHeader.mount(cfg) trong ListHeader.js. Giữ tên class cq-tvhead/cq-pg
   để tương thích code cũ; nhiều trang cùng nạp 1 file này -> đồng bộ.
   ⚠ Sửa .css/.js nhớ bump ?v= ở mọi nơi nhúng.
   ====================================================================== */

/* ---- Khối header ---- */
.cq-tvhead { position: relative; margin: 6px 0 20px; }
/* Xanh lá CHUẨN thương hiệu = var(--cq-green) (--cq-green). Dùng cho tiêu đề + accent. */
.cq-tvhead__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cq-green); margin: 0 0 2px; }
.cq-tvhead__eyebrow a { color: var(--cq-green); text-decoration: none; }
.cq-tvhead__eyebrow a:hover { text-decoration: underline; }
.cq-tvhead__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 30px; font-weight: 800; color: var(--cq-green); margin: 0 0 12px; text-transform: uppercase; letter-spacing: -.3px; line-height: 1.1; }
.cq-tvhead__ic { font-size: 30px; line-height: 1; }
.cq-tvhead__count { font-size: 14px; font-weight: 600; color: var(--cq-green); opacity: .7; text-transform: none; letter-spacing: 0; }
.cq-tvhead__note { font-size: 13px; color: var(--cq-text); line-height: 1.6; background: var(--cq-light); border: 1px solid var(--cq-border); border-left: 3px solid var(--cq-green); border-radius: 8px; padding: 11px 15px; margin: 0; }
.cq-tvhead__note b { color: var(--cq-green); }
.cq-tvhead__note-sub { font-size: 12px; color: var(--cq-text); line-height: 1.55; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--cq-border); }
.cq-tvhead__note-sub b { color: var(--cq-green); }
.cq-tvhead__note-warn { font-size: 12px; color: #9a6a00; line-height: 1.55; margin-top: 6px; }
.cq-tvhead__note-warn b { color: #9a6a00; }
.cq-tvhead__titlelink { color: inherit; text-decoration: none; }
.cq-tvhead__titlelink:hover { text-decoration: underline; }
.cq-tvhead__phanloai { font-size: 12px; color: var(--cq-muted); line-height: 1.5; margin: 7px 0 0; }
.cq-tvhead__phanloai b { color: var(--cq-text); }

/* ---- Ô sắp xếp (dropdown) đưa lên header ---- */
.cq-tvhead__sort { visibility: visible !important; float: none !important; margin: 0 !important; width: auto !important; display: flex; align-items: center; gap: 6px; }
.cq-tvhead__sort > * { float: none !important; margin: 0 !important; }
.cq-tvhead__sort .btn-style, .cq-tvhead__sort .glyphicon-plus { display: none !important; }
/* gỡ khung/nền thừa của wrapper .filter-price quanh dropdown -> chỉ còn select sạch */
.cq-tvhead__sort .filter-price, .cq-tvhead__sort .filter-price.fr { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
/* dropdown "Sắp xếp" chuẩn: viên bo, viền nhạt, hover xanh */
.cq-tvhead__sort select { height: 40px; padding: 0 14px; border: 1px solid var(--cq-border) !important; border-radius: 10px !important; background: #fff !important; color: var(--cq-dark) !important; font-weight: 600; font-size: 14px; cursor: pointer; outline: none; box-shadow: none !important; transition: border-color .15s; }
.cq-tvhead__sort select:hover, .cq-tvhead__sort select:focus { border-color: var(--cq-green) !important; }

/* ---- Thanh 1 HÀNG: tiêu đề | phân trang | sắp xếp ---- */
.cq-tvhead__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; flex-wrap: wrap; }
.cq-tvhead__bar .cq-tvhead__title { margin: 0; flex: 0 0 auto; }
.cq-tvhead__bar .cq-pg { flex: 0 0 auto; justify-content: center; padding: 0; margin: 0 0 0 auto; gap: 6px; }   /* pager dồn về PHẢI, sát dropdown sắp xếp */
.cq-tvhead__bar .cq-tvhead__sort { position: static !important; top: auto !important; right: auto !important; flex: 0 0 auto; margin-left: 0 !important; }
.cq-tvhead__bar .cq-pg .cqpg { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; }
.cq-tvhead__bar .cq-pg .cqpg-inp { width: 46px; height: 30px; border-radius: 7px; }
.cq-tvhead__bar .cq-pg .cqpg-jump { font-size: 12px; gap: 5px; }

/* ---- Phân trang thông minh (‹ Trang [ô nhập] / tổng ›) ---- */
.cq-pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 24px 0 12px; }
.cq-pg .cqpg { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--cq-border); background: #fff; color: var(--cq-dark); font-weight: 700; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.cq-pg a.cqpg:hover { border-color: var(--cq-green); color: var(--cq-green); }
.cq-pg .cqpg--cur { background: var(--cq-green); border-color: var(--cq-green); color: #fff; }
.cq-pg .cqpg--nav { background: var(--cq-green); border-color: var(--cq-green); color: #fff; }
.cq-pg a.cqpg--nav:hover { background: var(--cq-green); border-color: var(--cq-green); color: #fff; }
.cq-pg .cqpg--nav.cqpg--dis { opacity: .45; }
.cq-pg .cqpg-jump { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: #7a8794; font-size: 13px; font-weight: 600; }
.cq-pg .cqpg-inp { width: 54px; height: var(--cq-pager-size); text-align: center; border: 1px solid var(--cq-border); border-radius: 8px; font-weight: 700; color: var(--cq-dark); -moz-appearance: textfield; }
.cq-pg .cqpg-inp::-webkit-outer-spin-button, .cq-pg .cqpg-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Desktop: header khớp mép lưới card + pager căn GIỮA thật ---- */
@media (min-width: 768px) {
    .cq-tvhead { margin-left: -10px; margin-right: -10px; }
    .cq-tvhead__bar { min-height: 40px; }
    /* pager không còn absolute-center: nằm bên phải sát dropdown sắp xếp (margin-left:auto ở rule gốc) */
}
@media (max-width: 767px) {
    /* Mobile: tiêu đề 1 dòng riêng; phân trang + sắp xếp CHUNG 1 dòng dưới, thu nhỏ cho vừa. */
    .cq-tvhead__title { font-size: 22px; flex-basis: 100%; }
    .cq-tvhead__ic { font-size: 22px; }
    .cq-tvhead__bar { gap: 8px; margin-bottom: 10px; }
    .cq-tvhead__bar .cq-pg { order: 2; flex: 0 0 auto; margin: 0; }
    .cq-tvhead__bar .cq-tvhead__sort { order: 3; margin-left: auto; }
    .cq-tvhead__bar .cq-pg .cqpg { min-width: 28px; height: 28px; padding: 0 6px; }
    .cq-tvhead__bar .cq-pg .cqpg-inp { width: 40px; height: 26px; }
    .cq-tvhead__bar .cq-pg .cqpg-jump { font-size: 11px; }
    .cq-tvhead__sort select { height: 34px; font-size: 13px; padding: 0 10px; }
}