/* Cửa hàng /cua-hang và thẻ bài theo thiết kế "Bàn làm việc" (ADR-0045, kế hoạch Đợt A, Task 4; design-handoff/.../CuaHang.dc.html).
   Thẻ bài (.d-card) cũng dùng ở hàng bài giảng của trang chủ. Thay web/stage-store.css. Token ở tokens.css, chip/tab/nút/giấy nhớ ở public-ui.css. */

/* ---- Khung và đầu trang ---- */
/* Chỉ trang danh sách giữ chỗ cho thanh cuộn: trang ngắn lại lúc tải không làm bố cục trượt ngang. Không đặt cho mọi trang
   (tests/layout-stability.test.mjs lệch 15px ở 1440px vì Playwright ẩn thanh cuộn nhưng vẫn giữ chỗ). */
html:has(.store-listing) { scrollbar-gutter: stable; }
.d-store { box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; max-width: 1200px; margin: 0 auto; padding: 10px 0 60px; color: var(--d-ink); font-family: var(--d-font-sans); }
.d-store__head h1 { margin: 0; color: var(--d-ink); font: 700 var(--d-fs-hero) / var(--d-lh-hero) var(--d-font-display); }
.d-store__lead { margin: 6px 0 0; color: var(--d-ink-soft); font: 400 var(--d-fs-body) / var(--d-lh-body) var(--d-font-sans); }
.d-store .store-empty-filters { margin: 0; padding: 0; border: 0; }  /* styles.css draws a rule above every <details> */
.d-store .store-empty-filters > summary { min-height: var(--d-control-s); cursor: pointer; font: 700 var(--d-fs-label) / 1.3 var(--d-font-sans); }
.d-store__filters { display: flex; flex-direction: column; gap: 18px; margin: 0; }

/* ---- Ô tìm: viền --d-line-input (3,59:1), cao 64px ---- */
.d-search { box-sizing: border-box; display: flex; align-items: center; gap: var(--d-space-3); min-height: var(--d-control-l); padding: 6px 8px 6px 20px; border: 2px solid var(--d-line-input); border-radius: 20px; background: var(--d-surface); }
.d-search:focus-within { outline: 3px solid var(--d-brand); outline-offset: 3px; }
.d-search svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--d-muted); stroke-width: 2.2; stroke-linecap: round; }
.d-search input { flex: 1; min-width: 0; min-height: var(--d-control-s); padding: 0; border: 0; outline: 0; background: transparent; color: var(--d-ink); font: 400 calc(19px * var(--d-text-scale)) / 1.3 var(--d-font-sans); }
.d-search input::placeholder { color: #4A5D56; opacity: 1; }  /* giữ mức 7:1 trên nền trắng như ô tìm cũ (--d-muted chỉ 5,57:1); opacity 1 để Firefox không làm mờ */
.d-search .d-btn { flex: none; min-height: 48px; padding-inline: 22px; }

/* ---- Chip Cấp học → Lớp → Môn ---- */
.d-store__chips { display: flex; flex-direction: column; gap: var(--d-space-3); padding: 18px 20px; border: 1px solid var(--d-line); border-radius: var(--d-radius-xl); background: var(--d-surface); }
.d-chiprow { display: flex; align-items: center; gap: var(--d-space-3); }
.d-chiprow[hidden] { display: none; }
.d-chiprow__label { flex: 0 0 80px; color: var(--d-muted); font: 700 var(--d-fs-caption) / 1.3 var(--d-font-sans); }
.d-store .d-chips { flex: 1; min-width: 0; }
.d-store .d-chip { padding-inline: 18px; border-radius: var(--d-radius-pill); }
.d-store .d-chip[hidden] { display: none; }
/* Chip cấp học có màu riêng (bản vẽ), không viền; đã chọn thì như mọi chip đã chọn: nền brand, chữ trắng, dấu tích. */
.d-store .d-chip[data-tone] { border-color: transparent; }
.d-store .d-chip[data-tone="mam-non"] { background: #F3E6CF; }
.d-store .d-chip[data-tone="tieu-hoc"] { background: #DFF1EA; }
.d-store .d-chip[data-tone="thcs"] { background: #DCE9F7; }
.d-store .d-chip[data-tone="thpt"] { background: #F8DCD6; }
.d-store .d-chip[data-tone="dai-hoc"] { background: #E7E3F7; }
.d-store .d-chip[data-tone="nguoi-di-lam"] { background: #F6DFE7; }
.d-store .d-chip[aria-pressed="true"] { border-color: var(--d-brand); background: var(--d-brand); color: #fff; }

/* ---- Loại và sắp xếp ---- */
.d-store__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--d-space-3); }
.d-kinds { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--d-line); border-radius: var(--d-radius-xl); background: var(--d-surface); }
.d-kinds .d-tab { padding-inline: 18px; border-radius: var(--d-radius-pill); }
.d-sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d-space-2); color: var(--d-muted); font: 600 var(--d-fs-caption) / 1.3 var(--d-font-sans); }
.d-sort select { min-height: var(--d-control-s); padding: 0 12px; border: 2px solid var(--d-line-input); border-radius: var(--d-radius-md); background: var(--d-surface); color: var(--d-ink); font: 700 var(--d-fs-caption) / 1.3 var(--d-font-sans); }

/* ---- Kết quả: dòng đếm, lưới thẻ, trống, lỗi, chuyển trang ---- */
.d-store .store-count { margin: 0 0 14px; color: var(--d-muted); font: 600 var(--d-fs-caption) / 1.4 var(--d-font-sans); }
/* Vùng kết quả giữ chiều cao khi tải (app.js đặt min-height); kết quả cũ chỉ mờ đi nếu sau 0,2 giây vẫn chờ (mạng nhanh thì không nhấp nháy), rõ lại ngay khi kết quả mới về.
   Nó nhận focus bằng script (tabindex=-1) sau khi chuyển trang: không vẽ vòng focus cho cả vùng. */
.d-store .store-results { min-height: 320px; outline: none; }
.d-store .store-results[aria-busy="true"] { opacity: .55; cursor: progress; transition: opacity 0s .2s; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; }
.d-store .store-empty { display: flex; flex-direction: column; align-items: center; gap: var(--d-space-3); padding: 36px 16px; text-align: center; }
.d-store .store-empty p { margin: 0; color: var(--d-ink-soft); font: 400 var(--d-fs-body) / var(--d-lh-body) var(--d-font-sans); }
.d-store .store-empty .d-btn { min-height: var(--d-control-m); }
.d-store .store-inline-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d-space-3); margin: 0 0 14px; padding: 12px 16px; border-radius: var(--d-radius-lg); background: var(--d-danger-tint); color: var(--d-danger-text); font: 600 var(--d-fs-body) / 1.4 var(--d-font-sans); }
.d-store .store-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--d-space-2); margin-top: 26px; }
.d-store .store-pager a, .d-store .store-pager span { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--d-control-s); min-height: var(--d-control-s); padding: 0 14px;
  border: 2px solid var(--d-line-input); border-radius: var(--d-radius-pill); background: var(--d-surface); color: var(--d-ink); text-decoration: none; font: 700 var(--d-fs-caption) / 1.2 var(--d-font-sans); }
.d-store .store-pager [aria-current="page"] { border-color: var(--d-ink); background: var(--d-ink); color: #fff; }
.d-store .store-pager .gap { border-color: transparent; background: transparent; }
.d-store .store-pager a:focus-visible { outline: 3px solid var(--d-brand); outline-offset: 3px; }

/* ---- Thẻ bài: bìa 16:9 không cắt, tên đầy đủ, giá trên giấy nhớ, hai nút. Liên kết của tên phủ cả thẻ; các nút nằm trên nó. ---- */
.d-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--d-line); border-radius: 26px; background: var(--d-surface); color: var(--d-ink); }
.d-card:has(.product-name a:focus-visible) { outline: 3px solid var(--d-brand); outline-offset: 3px; }
.d-card .product-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #FFF4DC; }  /* nền bìa của bản vẽ, nhạt hơn giấy nhớ giá (--d-sun-tint) */
.d-card .product-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.d-card .product-thumb img.is-fallback { position: absolute; inset: 0; width: 96px; height: 96px; margin: auto; }
.d-card .product-sale { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: var(--d-radius-pill); background: var(--d-surface); color: var(--d-ink); font: 700 var(--d-fs-badge) / 1.2 var(--d-font-sans); }
.d-card__body { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.d-card__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }  /* a wide price (large text, many digits) moves under the name instead of squeezing it */
.d-card__text { display: flex; flex: 1 1 10em; flex-direction: column; gap: 4px; min-width: 0; }
.d-card .product-where { color: var(--d-muted); font: 700 var(--d-fs-caption) / 1.3 var(--d-font-sans); }
.d-card .product-name { margin: 0; overflow-wrap: anywhere; font: 700 var(--d-fs-title-s) / 1.25 var(--d-font-display); }
.d-card .product-name a { color: var(--d-ink); text-decoration: none; outline: 0; }
.d-card .product-name a::after { content: ""; position: absolute; inset: 0; }
.d-note--price { flex: 0 0 auto; margin-left: auto; align-items: flex-end; padding: 8px 12px; border-radius: 4px 4px 4px 14px; transform: rotate(2deg); pointer-events: none; }
/* transform đặt giấy nhớ lên trên lớp phủ của liên kết tên (::after): không bắt chuột, để bấm vào giá cũng mở bài. */
.d-note--price .product-was { color: var(--d-sun-text); white-space: nowrap; font: 400 var(--d-fs-caption) / var(--d-lh-caption) var(--d-font-sans); }
.d-note--price .product-tag { color: var(--d-sun-ink); white-space: nowrap; font: 700 calc(20px * var(--d-text-scale)) / 1.3 var(--d-font-display); }
.d-card__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.d-card__actions .d-btn { flex: 1 1 120px; }

@media (max-width: 600px) {
  .d-store { gap: 18px; }
  .d-store__chips { padding: 14px; }
  .d-chiprow { flex-direction: column; align-items: stretch; gap: 8px; }
  .d-chiprow__label { flex: none; }
  .d-search { padding-left: 14px; }
}
/* ---- Điện thoại (dưới 768px, ADR-0054): bộ lọc vào ngăn kéo từ đáy màn; trên trang chỉ còn nút "Lọc" và chip các bộ lọc đang chọn, thẻ bài ở ngay dưới.
   Máy tính và iPad ngang: hàng này và đầu/chân ngăn kéo ẩn, form ở chỗ cũ. app.js (openSheet) dùng cùng mốc 768px. ---- */
.store-filterbar, .store-sheet__head, .store-sheet__foot, .store-sheet-backdrop { display: none; }
@media (max-width: 767.98px) {
  .d-store { gap: 0; }
  .d-store__head { margin-bottom: 14px; }
  .d-store__head h1 { font-size: calc(30px * var(--d-text-scale)); line-height: 1.2; }
  .d-store .store-empty-filters > summary { display: none; }
  .store-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
  .store-filter-open { min-height: var(--d-control-s); padding: 0 16px; border-radius: var(--d-radius-pill); background: var(--d-surface); font-size: var(--d-fs-label); }
  .store-filter-open svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .store-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--d-radius-pill); background: var(--d-brand); color: #fff; font: 700 var(--d-fs-caption) / 1 var(--d-font-sans); }
  .store-active { display: contents; margin: 0; padding: 0; list-style: none; }
  .store-active li { display: flex; min-width: 0; max-width: 100%; }
  .store-active-chip { box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: var(--d-control-s); padding: 0 10px 0 14px;
    border: 2px solid var(--d-brand); border-radius: var(--d-radius-pill); background: var(--d-brand-tint); color: var(--d-brand-deep); cursor: pointer; overflow-wrap: anywhere; text-align: left; font: 700 var(--d-fs-label) / 1.25 var(--d-font-sans); }
  .store-active-chip svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  .store-filter-open:focus-visible, .store-active-chip:focus-visible, .store-sheet__close:focus-visible { outline: 3px solid var(--d-brand); outline-offset: 3px; }
  /* Ngăn kéo: đóng thì không hiện, mở thì cố định ở đáy, phần form cuộn bên trong, chân có "Bỏ lọc" và "Xem kết quả". */
  .store-sheet:not(.is-open) { display: none; }
  .store-sheet.is-open { position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; flex-direction: column; max-height: calc(100dvh - 24px); border-radius: 24px 24px 0 0; background: var(--d-surface); box-shadow: 0 -8px 32px rgba(18, 38, 33, .25); }
  .store-sheet.is-open .store-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--d-line); }
  .store-sheet__head h2 { margin: 0; color: var(--d-ink); font: 700 var(--d-fs-title-s) / 1.25 var(--d-font-display); }
  .store-sheet__close { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--d-radius-pill); background: transparent; color: var(--d-ink); cursor: pointer; }
  .store-sheet__close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  .store-sheet .d-store__filters { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
  .store-sheet .d-store__chips { padding: 0; border: 0; background: transparent; }
  .store-sheet.is-open .store-sheet__foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--d-line); }
  .store-sheet__foot .d-btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
  .store-sheet__foot .d-btn--brand { flex-grow: 2; }
  .store-sheet-backdrop:not([hidden]) { position: fixed; inset: 0; z-index: 59; display: block; background: rgba(18, 38, 33, .5); }
  html.store-sheet-open, html.store-sheet-open body { overflow: hidden; }
}
/* Trang lỗi khi chưa tải được cửa hàng (vẽ thay cả danh sách) */
.public .store-error { display: flex; flex-direction: column; align-items: center; gap: var(--d-space-3); padding: 48px 16px; text-align: center; color: var(--d-ink-soft); font: 400 var(--d-fs-body) / var(--d-lh-body) var(--d-font-sans); }
@media (forced-colors: active) {
  .d-store .store-pager [aria-current="page"] { outline: 2px solid CanvasText; outline-offset: -5px; }
  .d-store .store-pager a:focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
  .store-sheet.is-open { border: 2px solid CanvasText; }
  .d-note--price { transform: none; }
}