/* 1clicktee — KHO TỔNG /explore (G1 12/11/2026; KHO E 13/11: explore-1211a.css → explore-1311c.css — MỘT lưới có bộ
   lọc, tải dần, ảnh ghép áo; KHO-Q 13/11 → explore-1311d.css: hàng lọc đang bật xuống dòng ở điện thoại; T1 13/11 → explore-1311e.css: khoảng trắng trước
   footer 32px, vùng chạm 40px trên màn chạm). Đổi nội dung = đổi tên file (cache tĩnh 7 ngày). Bản cũ explore-1211a.* / explore-1311c.css giữ tại chỗ.
   Chỉ class .ote-*; token/nút/ô nhập/hộp thoại dùng chung ở base-1211a.css (KHÔNG thêm màu ngoài --ot-*).
   Chip .ote-chip = bê nguyên .otc-chip (+ cỡ .otc-sbox .otc-chip) của app-1311b.css; ô tìm bê .otc-search; thẻ bê
   .ote-card của explore-1211a.css; dòng lỗi bê .otc-go__msg; khung xương bê .otc-*.is-sk.
   Bố cục: ≥1024 hai cột (cột lọc trái DÍNH, tự cuộn trong | lưới 3 cột); <1024 thanh tìm DÍNH dưới header + nút
   "Bộ lọc" mở tấm .ot-modal (base JS lo Esc / bấm nền / giữ focus); điện thoại ≤743 tấm trượt từ đáy (base). */

.ote{padding-bottom:32px}
.ote [hidden]{display:none!important}
@keyframes ote-sk{0%{background-position:100% 0}100%{background-position:0 0}}

/* ── đầu trang: dải mực gọn ── */
.ote-hero{background:var(--ot-ink);color:var(--ot-on-ink);border-bottom:var(--ot-bw) solid var(--ot-ink)}
.ote-hero__in{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;padding-top:40px;padding-bottom:36px}
.ote-hero__txt{min-width:0}
.ote-hero .ot-kicker{margin-bottom:16px;color:var(--ot-on-ink)}
.ote-h1{font-size:clamp(48px,5.4vw,80px);line-height:.92;color:var(--ot-on-ink)}
.ote-h1 em{font-style:normal;color:var(--ot-accent)}
:lang(vi) .ote-h1{line-height:1.14}
.ote-hero__side{flex:0 0 320px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ote-lede{margin:0;font-size:16px;line-height:1.5;color:rgba(244,241,234,.78)}
.ote-hero__cta{border-color:var(--ot-accent)}
.ote-hero__cta:hover{background:var(--ot-on-ink);border-color:var(--ot-on-ink);color:var(--ot-ink)}

/* ── khung hai cột ── */
.ote-wrap{display:grid;grid-template-columns:264px minmax(0,1fr);gap:0 40px;align-items:start;padding-top:32px}
.ote-main{min-width:0}

/* ── ô tìm (bê .otc-search) ── */
.ote-bar{display:flex;align-items:flex-end;gap:10px}
.ote-search{flex:1 1 auto;min-width:0;margin:0}
.ote-search__l{margin-bottom:10px;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--ot-muted)}
.ote-search__box{position:relative;display:block}
.ote-search__box>.ot-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ot-muted);pointer-events:none}
.ote-search__in.ot-input{padding-left:42px;padding-right:44px}
.ote-search__in::-webkit-search-cancel-button,.ote-search__in::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.ote-search__x{position:absolute;top:50%;right:4px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:var(--ot-r-sm);background:none;color:var(--ot-ink);transform:translateY(-50%);cursor:pointer}
.ote-search__x:hover{background:var(--ot-accent-soft)}
.ote-search__x:focus-visible{outline:2px solid var(--ot-ink);outline-offset:-2px}
.ote-fbtn{display:none;flex:none;gap:8px;padding:0 16px}
.ote-fbtn__n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--ot-r-sm);background:var(--ot-accent);color:var(--ot-ink);font-size:12px;letter-spacing:0;font-variant-numeric:tabular-nums}

/* ── nhóm lọc ── */
.ote-grp{padding:16px 0 18px;border-top:var(--ot-bw) solid var(--ot-line-soft)}
.ote-grp__t{margin:0 0 10px;font-size:11px;font-weight:800;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--ot-muted)}
.ote-chips{display:flex;flex-wrap:wrap;gap:6px}
.ote-chips:not(.is-open) .is-extra:not([aria-pressed=true]){display:none}

/* chip — bê .otc-chip + .otc-sbox .otc-chip (app-1311b.css) */
.ote-chip{display:inline-flex;align-items:center;gap:6px;height:32px;margin:0;padding:0 10px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r-sm);background:transparent;color:var(--ot-ink);font-family:var(--ot-font);font-size:12px;font-weight:800;line-height:1;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.ote-chip small{font-size:11px;font-weight:700;color:var(--ot-muted);font-variant-numeric:tabular-nums}
.ote-chip:hover{background:var(--ot-accent-soft)}
.ote-chip[aria-pressed=true]{background:var(--ot-ink);color:var(--ot-on-ink)}
.ote-chip[aria-pressed=true] small{color:var(--ot-accent)}
.ote-chip:focus-visible{outline:2px solid var(--ot-ink);outline-offset:2px}
.ote-chip--more{border-color:var(--ot-line-soft);color:var(--ot-muted)}
.ote-chip--more:hover{border-color:var(--ot-ink);color:var(--ot-ink)}

/* ── dòng đếm + lọc đang bật + sắp xếp (cao cố định → lưới không nhảy khi đổi lọc) ── */
.ote-status{display:flex;align-items:center;gap:16px;height:56px;margin:0 0 24px;padding-top:2px;border-bottom:var(--ot-bw) solid var(--ot-ink)}
.ote-count{flex:none;margin:0;font-size:32px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
:lang(vi) .ote-count{line-height:1.2}
.ote-active{flex:1 1 auto;display:flex;align-items:center;gap:6px;min-width:0;height:44px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.ote-active::-webkit-scrollbar{display:none}
.ote-tag{display:inline-flex;flex:none;align-items:center;gap:6px;height:32px;margin:0;padding:0 8px 0 10px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r-sm);background:var(--ot-ink);color:var(--ot-on-ink);font-family:var(--ot-font);font-size:12px;font-weight:800;line-height:1;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.ote-tag:hover{background:var(--ot-accent);color:var(--ot-ink)}
.ote-tag:focus-visible{outline:2px solid var(--ot-ink);outline-offset:2px}
.ote-active__clear{flex:none;min-height:32px;margin-left:4px;font-size:13px}
.ote-sort{flex:none;display:flex;gap:6px}
.ote-sort--sheet{display:flex;flex-wrap:wrap}
.ote-grp--sort{display:none}

/* ── lỗi tải (bê .otc-go__msg) ── */
.ote-err{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 24px;padding:10px 12px;border:var(--ot-bw) solid var(--ot-accent-2);border-left-width:6px;border-radius:var(--ot-r-sm);background:var(--ot-accent-bg);color:var(--ot-ink)}
.ote-err__t{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:14px;font-weight:700;line-height:1.45}
.ote-err__t .ot-icon{flex:none;margin-top:1px;color:var(--ot-accent-2)}

/* ── lưới thẻ (bê .ote-card của explore-1211a.css; ảnh = ảnh ghép áo thật, phủ kín khung) ── */
.ote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 20px;margin:0;padding:0;list-style:none}
.ote-card{min-width:0}
.ote-card__a{display:flex;flex-direction:column;gap:4px;height:100%;color:var(--ot-ink);text-decoration:none}
.ote-card__fig{position:relative;display:block;aspect-ratio:1/1;margin-bottom:8px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r);overflow:hidden}
.ote-ink-dark{background:var(--ot-line-soft)}
.ote-ink-light{background:var(--ot-paper)}
.ote-card__fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ot-ease)}
.ote-card__a:hover .ote-card__fig img{transform:scale(1.04)}
.ote-card__a:hover .ote-card__t{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.ote-card__a:focus-visible{outline:none}
.ote-card__a:focus-visible .ote-card__fig{outline:2px solid var(--ot-accent);outline-offset:2px}
.ote-card__t{display:block;overflow:hidden;font-size:15px;font-weight:800;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.ote-card__q{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding-top:.1em;font-size:13px;font-weight:600;line-height:1.4;color:var(--ot-muted);overflow-wrap:anywhere}
.ote-card__m{display:block;min-height:1.5em;margin-bottom:10px;overflow:hidden;font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;color:var(--ot-muted)}
.ote-card__q:empty{display:none}
.ote-card__go{align-self:flex-start;margin-top:auto}
.ote-card__a:hover .ote-card__go{background:var(--ot-ink);color:var(--ot-on-ink)}
.ote-card__a:hover .ote-card__go .ot-btn__arrow{transform:translateX(3px)}

/* thẻ xương lúc chờ (cùng kích thước thẻ thật → không nhảy) — bê .otc-*.is-sk */
.ote-card.is-sk{pointer-events:none}
.ote-card.is-sk .ote-card__fig{border-color:transparent;background:linear-gradient(100deg,var(--ot-line-soft) 40%,rgba(11,11,11,.07) 50%,var(--ot-line-soft) 60%) 0 0/300% 100%;animation:ote-sk 1.4s linear infinite}
.ote-card.is-sk .ote-card__t,.ote-card.is-sk .ote-card__m{width:62%;height:1.35em;background:var(--ot-line-soft)}
.ote-card.is-sk .ote-card__q{display:block;height:1.4em;background:linear-gradient(var(--ot-line-soft),var(--ot-line-soft)) 0 .25em/88% .9em no-repeat}
.ote-card.is-sk .ote-card__m{width:40%;height:1.5em}
.ote-card.is-sk .ote-card__go{width:128px;border-color:var(--ot-line-soft);background:var(--ot-line-soft)}

/* ── tải dần ── */
.ote-more{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px}
.ote-more__msg{margin:0;font-size:13px;font-weight:700;color:var(--ot-accent-2)}
.ote-more__msg:empty{display:none}
.ote-more .ot-btn{min-width:240px}
.ote-end{margin:0;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ot-muted)}
.ote-more{position:relative}
.ote-sentinel{position:absolute;left:0;bottom:0;width:100%;height:1px}   /* T1: ra khỏi luồng → không cộng khe 12px + 1px trước footer */

/* ── rỗng ── */
.ote-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:36px 32px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r);background:var(--ot-paper)}
.ote-empty__t{margin:0;font-size:clamp(36px,4vw,52px)}
.ote-empty__b{margin:0 0 6px;font-size:16px;line-height:1.5;color:var(--ot-muted)}
.ote-empty__txt{display:flex;flex-direction:column;gap:12px}
.ote-empty__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}

/* ═════════ ≥1024: cột lọc trái DÍNH; tấm .ot-modal hiện tại chỗ như cột thường ═════════ */
@media (min-width:1024px){
  .ote-side{align-self:stretch;min-width:0}
  .ote-side__in{position:sticky;top:calc(var(--ot-header-h) + var(--ot-bw) + 20px);max-height:calc(100vh - var(--ot-header-h) - 40px);margin:0 -4px;padding:0 4px 24px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .ote-bar{padding:2px 0 18px}
  .ote-fsheet.ot-modal{position:static;display:block;padding:0;z-index:auto}
  .ote-fsheet .ot-modal__backdrop,.ote-fsheet__head,.ote-fsheet__foot{display:none}
  .ote-fsheet__panel.ot-modal__panel{display:block;max-width:none;max-height:none;overflow:visible;border:0;border-radius:0;background:none;animation:none}
  .ote-fsheet__body.ot-modal__body{padding:0;overflow:visible;font-size:inherit;line-height:inherit}
}

/* ═════════ <1024: một cột, thanh tìm dính + nút "Bộ lọc" mở tấm ═════════ */
@media (max-width:1023px){
  .ote-hero__in{padding-top:32px;padding-bottom:28px;gap:20px 32px}
  .ote-hero__side{flex-basis:280px}
  .ote-wrap{display:block;padding-top:0}
  .ote-side,.ote-side__in{display:contents}
  /* top = header-h (không cộng viền): thanh luồn 1.5px dưới viền header (z cao hơn) → không hở khe nửa điểm ảnh */
  .ote-bar{position:sticky;top:var(--ot-header-h);z-index:40;margin:0 calc(-1 * var(--ot-gutter));padding:12px var(--ot-gutter);background:var(--ot-bg);border-bottom:var(--ot-bw) solid var(--ot-line-soft)}
  .ote-search__l{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
  .ote-fbtn{display:inline-flex}
  .ote-main{padding-top:16px}
  .ote-grid{gap:32px 16px}
  .ot-modal__panel.ote-fsheet__panel{max-width:640px;max-height:min(760px,calc(100vh - 48px))}
  .ote-fsheet__body{flex:1 1 auto;min-height:0;padding-bottom:12px}
  .ote-fsheet__head{border-bottom:var(--ot-bw) solid var(--ot-ink)}
  .ote-fsheet__foot{border-top:var(--ot-bw) solid var(--ot-ink);padding-top:14px}
  .ote-fsheet__foot .ot-btn{flex:1 1 0}
  .ote-grp:first-child{border-top:0}
}

/* ═════════ điện thoại (≤743, có dải menu đáy) ═════════ */
@media (max-width:743px){
  .ote-chip{height:40px}   /* U1 14/11 (QM L6/P5): vùng bấm chip lọc ≥ 40px trên điện thoại */
  .ote-hero__in{display:block;padding-top:24px;padding-bottom:22px}
  .ote-hero .ot-kicker{margin-bottom:12px}
  .ote-h1{font-size:44px}
  :lang(vi) .ote-h1{font-size:40px}
  .ote-hero__side{margin-top:14px;gap:14px}
  .ote-lede{font-size:15px}
  .ote-hero__cta{width:100%}
  .ote-bar{padding:10px var(--ot-gutter)}
  .ote-fbtn{padding:0 12px}
  /* KHO-Q 13/11: hàng lọc đang bật xuống dòng dưới dòng đếm (wrap, không cuộn ngang) → "Xoá hết"/"Clear all" luôn trọn chữ */
  .ote-status{flex-wrap:wrap;gap:10px;height:auto;min-height:52px;margin-bottom:20px}
  .ote-count{font-size:26px}
  .ote-active{flex:1 1 100%;flex-wrap:wrap;gap:8px 6px;height:auto;margin-bottom:10px;overflow:visible}
  .ote-active:not(:has(> :not([hidden]))){display:none}
  .ote-tag{max-width:100%}
  .ote-tag>span{min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.6}   /* 1.6: không xén dấu tiếng Việt */
  .ote-active__clear{white-space:nowrap}
  .ote-sort--bar{display:none}
  .ote-grp--sort{display:block}
  .ote-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  .ote-card__t{font-size:14px}
  .ote-card__q{font-size:12px}
  .ote-card__go{padding:0 10px;font-size:11px;letter-spacing:.05em}
  .ot-modal__panel.ote-fsheet__panel{max-height:calc(100vh - 56px)}
  .ote-more .ot-btn{width:100%}
  .ote-empty{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){.ote-card.is-sk .ote-card__fig{animation:none}.ote-card__fig img{transition:none}}
/* T1 13/11: màn chạm — chip lọc/sort, thẻ lọc đang bật, "Clear all" ≥40px (máy tính giữ 32px) */
@media (pointer:coarse){
  .ote-chip,.ote-tag{height:auto;min-height:40px}
  .ote-active__clear{min-height:40px}
}