@charset "UTF-8";
/* ==========================================================================
   TMT collection / listing (Task 08). Chỉ nạp ở template collection*. Phụ thuộc tmt-design-system.css.
   Mobile-first. Class .tmt-*; các selector trỏ vào markup cũ (aside-filter.bwt) đều có tiền tố .tmt-filter
   vì col.js/search_filter.js phụ thuộc id/thuộc tính của markup đó và không được thay đổi.
   ========================================================================== */

.tmt-collection { background: var(--color-bg-page); padding-bottom: var(--space-8); }
.tmt-collection .bg_collection { background: none; border: 0; padding: 0; margin: 0; } /* class cũ chỉ còn làm đích cuộn của col.js */
/* CSS cũ gán float:left cho .category-products: một khối có overflow (mô tả SEO rút gọn) sẽ bị đẩy cạnh phần float và co về rộng 0 */
.tmt-collection .category-products { float: none; width: auto; margin: 0; padding: 0; }
.tmt-collection .tmt-collection__main { display: flow-root; }

.tmt-collection__head { margin: 0 0 var(--space-3); }
.tmt-collection__title { margin: 0; font: 700 var(--text-h1)/var(--lh-h1) var(--font-display); color: var(--color-text-strong); overflow-wrap: break-word; }
.tmt-collection .tmt-breadcrumb { padding-top: var(--space-2); }

/* Accordion "Sưu tầm" (mobile/tablet, < 992px): thay hàng chip danh mục gốc + mục "Danh mục" trùng lặp. Mặc định đóng (thuộc tính hidden trong markup nên không nhảy bố cục).
   Cả hàng là một <button aria-expanded>; danh sách nằm trong luồng trang (đẩy lưới xuống, không đè lên). Desktop: ẩn, đã có dropdown "Sưu tầm" trên header. */
.tmt-collect-acc { margin: 0 0 var(--space-4); background: var(--color-bg-surface); border: 1px solid var(--color-border-control); border-radius: var(--radius-md); }
.tmt-collect-acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 48px; margin: 0; padding: 0 var(--space-4);
  font: 700 15px/1.2 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; text-align: left; color: var(--color-text-strong);
  background: transparent; border: 0; border-radius: var(--radius-md); cursor: pointer;
}
.tmt-collect-acc__btn:hover { background: var(--color-bg-subtle); }
.tmt-collect-acc__btn[aria-expanded="true"] { color: var(--color-brand-700); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tmt-collect-acc__btn svg { flex: 0 0 22px; width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-fast) var(--ease); }
.tmt-collect-acc__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.tmt-collect-acc__btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.tmt-collect-acc__panel { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.tmt-collect-acc__panel > li { border-top: 1px solid var(--color-border); }
.tmt-collect-acc__panel > li:first-child { border-top: 0; }
/* Danh sách bên trong là cây đệ quy dùng chung (.tmt-nt__*, style ở tmt-nav.css): không có style link riêng cho accordion này. */
@media (min-width: 992px) { .tmt-collect-acc { display: none; } }
@media (prefers-reduced-motion: reduce) { .tmt-collect-acc__btn svg { transition: none; } }

/* Chip danh mục con: dải cuộn ngang trên mobile */
.tmt-subcats { margin: 0 calc(var(--gutter) * -1) var(--space-4); padding: 0 var(--gutter); }
.tmt-subcats .tmt-chips { margin: 0; padding: 0 0 var(--space-1); list-style: none; }
.tmt-subcats .tmt-chip { text-decoration: none; }
@media (min-width: 768px) {
  .tmt-subcats { margin-inline: 0; padding-inline: 0; }
  .tmt-subcats .tmt-chips { flex-wrap: wrap; overflow: visible; }
}

/* ---------- Bố cục: 1 cột mobile; desktop: sidebar bộ lọc + kết quả ---------- */
.tmt-collection__layout { display: block; }
@media (min-width: 992px) {
  .tmt-collection__layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
}

/* ---------- Thanh công cụ ---------- */
.tmt-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "count count" "filter sort"; gap: var(--space-2) var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.tmt-toolbar__count { grid-area: count; margin: 0; font-size: var(--text-small); color: var(--color-text-muted); }
.tmt-toolbar__count strong { color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.tmt-toolbar__filter { grid-area: filter; width: 100%; }
.tmt-toolbar__badge { display: inline-block; min-width: 20px; padding: 0 6px; font: 700 13px/20px var(--font-sans); text-align: center; color: var(--color-text-inverse); background: var(--color-brand-700); border-radius: var(--radius-pill); }
.tmt-toolbar__badge[hidden] { display: none; }
.tmt-toolbar__sort { grid-area: sort; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.tmt-toolbar__sort-label { flex: 0 0 auto; font-size: var(--text-small); color: var(--color-text-muted); }
.tmt-toolbar__sort .tmt-select { flex: 1 1 auto; min-width: 0; min-height: var(--tap-min); padding-block: var(--space-2); font-size: 16px; text-overflow: ellipsis; }
@media (max-width: 429.98px) {
  .tmt-toolbar__sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 768px) {
  .tmt-toolbar { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "count filter sort"; gap: var(--space-3) var(--space-4); }
  .tmt-toolbar__filter { width: auto; }
  .tmt-toolbar__sort .tmt-select { flex: 0 0 auto; width: 200px; }
}
@media (min-width: 992px) {
  .tmt-toolbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "count sort"; }
  .tmt-toolbar__filter { display: none; }
}

/* ---------- Lưới sản phẩm: 2 / 3 / 3 (có sidebar) / 4 cột ---------- */
.tmt-grid--collection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .tmt-grid--collection { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .tmt-grid--collection { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1200px) { .tmt-grid--collection { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Phân trang ---------- */
.tmt-pager { margin-top: var(--space-8); }
.tmt-pagination { gap: var(--space-2); }
.tmt-pagination li { margin: 0; }
.tmt-pagination__status span { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-2); font-weight: 600; color: var(--color-text-strong); background: none; border: 0; }
.tmt-pagination__num { display: none; }
@media (min-width: 768px) {
  .tmt-pagination__status { display: none; }
  .tmt-pagination__num { display: block; }
}

/* ---------- Bộ lọc: bottom sheet (mobile/tablet) → sidebar (desktop) ---------- */
.tmt-filter-overlay { position: fixed; inset: 0; z-index: calc(var(--z-drawer) + 1); background: rgba(31, 27, 22, 0.5); }
.tmt-filter-overlay[hidden] { display: none; }
.tmt-filter {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-drawer) + 2);
  display: flex; flex-direction: column; max-height: 88vh; max-height: 88dvh;
  background: var(--color-bg-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg);
  transform: translateY(100%); visibility: hidden;
  transition: transform var(--duration-base) var(--ease), visibility 0s linear var(--duration-base);
}
.tmt-filter.is-open { transform: none; visibility: visible; transition: transform var(--duration-base) var(--ease), visibility 0s; }
/* Khối "Danh mục sưu tầm": chỉ desktop (>= 992px); dưới đó dùng accordion .tmt-collect-acc. */
.tmt-catside { display: none; }
.tmt-collection__side { display: contents; }
body.tmt-sheet-locked { overflow: hidden; }
html body.tmt-sheet-locked #_zalo, html body.tmt-sheet-locked #suntory-alo-phoneIcon { display: none !important; }
.tmt-filter__head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--color-border); }
.tmt-filter__title { margin: 0; font: 700 var(--text-h3)/1.2 var(--font-display); color: var(--color-text-strong); }
.tmt-filter__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--space-2) var(--space-4) var(--space-4); }
.tmt-filter__foot { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: var(--color-bg-page); }
.tmt-filter__foot .tmt-btn { flex: 1 1 0; }
@media (min-width: 992px) {
  .tmt-filter-overlay { display: none !important; }
  .tmt-collection__side { position: sticky; top: calc(var(--header-h) + var(--space-4)); max-height: calc(100vh - var(--header-h) - var(--space-8)); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
  .tmt-filter { position: static; z-index: auto; max-height: none; transform: none; visibility: visible; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: none; transition: none; flex: 0 0 auto; }
  .tmt-catside { display: block; background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); flex: 0 0 auto; }
  .tmt-catside__title { margin: 0; padding: var(--space-3) var(--space-4); font: 700 var(--text-small)/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand-700); border-bottom: 1px solid var(--color-border); }
  .tmt-catside__list > .tmt-nt__item > .tmt-nt__link, .tmt-catside__list > .tmt-nt__item > .tmt-nt__row > .tmt-nt__link, .tmt-catside__list > .tmt-nt__item > .tmt-nt__row > .tmt-nt__toggle--row { font-weight: 700; }
  .tmt-filter__head, .tmt-filter__foot { display: none; }
}

/* Làm lại giao diện markup bộ lọc cũ (aside-filter.bwt). JS cũ phụ thuộc id/thuộc tính nên KHÔNG đổi markup. */
.tmt-filter .filter-content, .tmt-filter .filter-container { background: none; border: 0; padding: 0; margin: 0; float: none; width: auto; }
.tmt-filter .aside-item { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--color-border); background: none; float: none; width: auto; }
.tmt-filter .aside-item:last-child { border-bottom: 0; }
.tmt-filter .aside-title { margin: 0; padding: 0; background: none; border: 0; }
.tmt-filter .aside-title .title-head, .tmt-filter .aside-title h2 { position: static; display: block; top: auto; left: auto; right: auto; bottom: auto; transform: none; width: auto; height: auto; margin: 0; padding: 0; background: none; border: 0; font: 700 var(--text-body)/1.3 var(--font-sans); color: var(--color-text-strong); text-transform: none; }
.tmt-filter .aside-title .title-head::before, .tmt-filter .aside-title .title-head::after { content: none; }
.tmt-filter .aside-title .title-head span { display: block; background: none; padding: 0; }
.tmt-filter .aside-title [role="button"] { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap-min); cursor: pointer; }
.tmt-filter .aside-title [role="button"]::after { content: "+"; font: 400 24px/1 var(--font-sans); color: var(--color-brand-700); }
.tmt-filter .aside-item:not(.is-collapsed) .aside-title [role="button"]::after { content: "\2212"; }
.tmt-filter .aside-item.is-collapsed .aside-content { display: none; }
.tmt-filter .aside-content { padding: 0 0 var(--space-3); border: 0; background: none; max-height: 288px; overflow-y: auto; }
.tmt-filter .aside-content ul { margin: 0; padding: 0; list-style: none; }
.tmt-filter .filter-item { float: none; display: block; min-width: 0; margin: 0; padding: 0 !important; line-height: 1.4; }
.tmt-filter .filter-item > span { display: block; }
.tmt-filter .filter-item label { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); margin: 0; padding: var(--space-1) 0; cursor: pointer; font: 400 var(--text-body)/1.35 var(--font-sans); color: var(--color-text); }
.tmt-filter .filter-item--check-box input[type="checkbox"] { position: static !important; opacity: 1 !important; visibility: visible !important; display: inline-block !important; flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--color-brand-700); cursor: pointer; }
.tmt-filter .filter-item--check-box label i.fa { display: none; }
.tmt-filter .filter-item--check-box label:hover { color: var(--color-text-strong); }
.tmt-filter input[type="checkbox"]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* Bộ lọc đang chọn ("Bạn chọn") thành chip */
.tmt-filter .filter-container__selected-filter { margin: 0 0 var(--space-2); padding: var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--color-border); background: none; }
.tmt-filter .filter-container__selected-filter-header { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap-min); }
.tmt-filter .filter-container__selected-filter-header-title { font: 700 var(--text-body)/1.3 var(--font-sans); color: var(--color-text-strong); cursor: default; }
.tmt-filter .filter-container__selected-filter-header-title .fa { display: none; }
.tmt-filter .filter-container__clear-all { display: inline-flex; align-items: center; min-height: var(--tap-min); font-weight: 600; color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; }
.tmt-filter .filter-container__clear-all .fa { display: none; }
.tmt-filter .filter-container__selected-filter-list ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tmt-filter .filter-container__selected-filter-item a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-small); color: var(--color-text-inverse); text-decoration: none; background: var(--color-brand-700); border-radius: var(--radius-pill); }
.tmt-filter .filter-container__selected-filter-item a .fa { font-size: 12px; }

/* ---------- Mô tả SEO ---------- */
.tmt-seo { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.tmt-seo__body { color: var(--color-text); font-size: var(--text-body); line-height: var(--lh-body); overflow-wrap: break-word; }
.tmt-seo__body h2, .tmt-seo__body h3, .tmt-seo__body h4 { margin: var(--space-4) 0 var(--space-2); font-family: var(--font-display); font-weight: 700; color: var(--color-text-strong); }
.tmt-seo__body h2 { font-size: var(--text-h2); line-height: var(--lh-h2); }
.tmt-seo__body h3 { font-size: var(--text-h3); line-height: var(--lh-h3); }
.tmt-seo__body > :first-child { margin-top: 0; }
.tmt-seo__body p { margin: 0 0 var(--space-3); }
.tmt-seo__body ul, .tmt-seo__body ol { margin: 0 0 var(--space-3); padding-left: 1.25em; }
.tmt-seo__body ul { list-style: disc; }
.tmt-seo__body ol { list-style: decimal; }
.tmt-seo__body a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; }
.tmt-seo__body img { max-width: 100%; height: auto; }
.tmt-seo__toggle { margin-top: var(--space-3); }
.tmt-seo__toggle[hidden] { display: none; }
/* Rút gọn bằng CSS (nội dung vẫn nằm trong DOM). Chỉ khi JS đã đánh dấu data-collapsed và chỉ dưới 992px */
@media (max-width: 991.98px) {
  .tmt-seo[data-collapsed="true"] .tmt-seo__body { max-height: 208px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
}
@media (min-width: 992px) { .tmt-seo__toggle { display: none; } }

@media (prefers-reduced-motion: reduce) { .tmt-filter { transition: none; } }
.tmt-collection__eyebrow { margin: 0 0 var(--space-1); font: 700 var(--text-caption)/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand-700); }
.tmt-collection__eyebrow a { color: var(--color-text-link); text-transform: none; letter-spacing: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Task 71 — F1 (SỬA CỤC BỘ, chưa lên Sapo): trang danh mục (template collection*) gọn và nhất quán.
   - Desktop: bỏ cây "Danh mục sưu tầm" ở cột trái (CEO cho phép; header đã có menu Sưu tầm, hàng chip danh mục con ở trên, và khối "Tất cả danh mục" cuối trang vẫn giữ liên kết) -> cột trái chỉ còn bộ lọc, hẹp hơn.
   - Nút trên thẻ sản phẩm: một kiểu viền navy duy nhất (không còn nút đặc xen nút viền); đổi màu khi di chuột.
   Chỉ ảnh hưởng .tmt-collection (danh mục/tìm kiếm dùng chung). Không đổi markup, bộ lọc hay JS.
   ========================================================================== */
@media (min-width: 992px) {
  .tmt-collection__layout { grid-template-columns: 236px minmax(0, 1fr); gap: 32px; }
  .tmt-collection__side .tmt-catside { display: none; }
}
.tmt-collection .tmt-card .tmt-btn { background: transparent; color: var(--color-brand-700); border: 1.5px solid var(--color-brand-700); }
.tmt-collection .tmt-card .tmt-btn:hover { background: var(--color-brand-700); color: #fff; border-color: var(--color-brand-700); }