/* ==========================================================================
   TRANG DANH MỤC v3 (/nha-khoa · /labo · /vat-tu · /dung-cu · /sang-nhuong) — demo docs/thiet-ke-header-danh-muc-v3, chủ duyệt 22/10/2026.
   Chỉ ĐỔI KHUNG: giữ nguyên DOM/hook cũ (.jbar .jf-top .jsort .jdd .jchips .tlay .tmain .jside .pin-super .pinv …) nên bộ lọc, URL, AJAX tại chỗ, SEO, bản đồ không đổi.
   - Máy tính (≥ 981px): lưới 3 cột = cột lọc (dính) | danh sách | cột phải; thanh công cụ dính (ô lọc tên + sắp xếp + Danh sách/Bản đồ + chip lọc nhanh).
   - Dưới 981px: giữ thanh dropdown / bảng lọc trượt từ đáy sẵn có (p-toolbar.css, p-jobs.css).
   Tiền tố riêng: dm- (tránh trùng lớp cũ, xem tests/dental-class-collision.test.js). Token: --ds-* (p-ds.css). Không vạch trái, không thanh cuộn (mép mờ).
   ========================================================================== */
.dm-page .phead h1 { font-size: 24px !important; line-height: 1.25; }

/* ---------- thanh công cụ dính: ô lọc tên + chip nhanh ---------- */
.dm-bar { display: grid; gap: 8px; }
.dm-q { flex: 0 0 240px; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; background: var(--ds-bg-soft); transition: background .2s var(--ds-ease), border-color .2s var(--ds-ease); }
.dm-q:focus-within { background: #fff; border-color: var(--ds-blue-500); box-shadow: 0 0 0 3px rgba(84, 143, 235, .16); }
.dm-q i { font-size: 16px; color: var(--ds-ink-500); flex: none; }
.dm-q input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; border-radius: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ds-ink-900); }
.dm-q input:focus, .dm-q input:focus-visible { outline: 0; box-shadow: none; }
.dm-q input::placeholder { color: var(--ds-ink-500); } .dm-q input::-webkit-search-cancel-button { display: none; }
.dm-quick { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; min-width: 0; }
.dm-quick::-webkit-scrollbar { display: none; }
.dm-qc { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--ds-line); border-radius: 6px; background: #fff; font-size: 12px; font-weight: var(--ds-fw-500); color: var(--ds-ink-700); white-space: nowrap; transition: background .2s var(--ds-ease), border-color .2s var(--ds-ease); }
.dm-qc i { font-size: 14px; }
.dm-qc:hover { border-color: var(--ds-blue-200); background: var(--ds-blue-50); }
.dm-qc.on { border-color: var(--ds-blue-200); background: var(--ds-blue-100); color: var(--ds-blue-700); font-weight: var(--ds-fw-600); }
.dm-qc:focus-visible { outline: 2px solid var(--ds-blue-500); outline-offset: 1px; }

/* ---------- dải thẻ nổi bật (phương án B) ---------- */
.dm-feat { margin: 0 0 14px; }
.dm-feat-tr { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; border-radius: 10px; }
.dm-feat-tr::-webkit-scrollbar { display: none; }
.dm-feat-tr:focus-visible { outline: 2px solid var(--ds-blue-500); outline-offset: 2px; }
.dm-fc { position: relative; flex: 0 0 min(340px, 78%); height: 200px; overflow: hidden; scroll-snap-align: start; border-radius: 10px; background: linear-gradient(135deg, #1f62d6, #0c9c79); color: #fff; }
.dm-fc.no-img.p-b { background: linear-gradient(135deg, #5b3fd0, #548feb); } .dm-fc.no-img.p-c { background: linear-gradient(135deg, #0c9c79, #0e8fb3); } .dm-fc.no-img.p-d { background: linear-gradient(135deg, #d6455d, #ef7d1a); } .dm-fc.no-img.p-e { background: linear-gradient(135deg, #0e8fb3, #548feb); } .dm-fc.no-img.p-f { background: linear-gradient(135deg, #476c14, #0c9c79); }
.dm-fc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ds-ease); }
.dm-fc:hover > img { transform: scale(1.04); }
.dm-fc::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 22, 40, .86) 0%, rgba(8, 22, 40, .6) 55%, rgba(8, 22, 40, .12) 100%); }
.dm-fc-in { position: relative; z-index: 2; display: grid; gap: 5px; align-content: center; justify-items: start; height: 100%; padding: 14px 16px; }
.dm-fc .tg { display: flex; gap: 6px; }
.dm-fc h3 { display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 0; font-size: 16px; font-weight: var(--ds-fw-700); line-height: 1.25; color: #fff; }
.dm-fc h3 a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; } .dm-fc h3 i { flex: none; font-size: 16px; color: #5fe0bd; }
.dm-fc .mt { display: flex; align-items: center; gap: 6px; max-width: 100%; font-size: 12px; color: rgba(255, 255, 255, .88); }
.dm-fc .mt i { font-size: 13px; color: var(--ds-gold-400); flex: none; } .dm-fc .mt b { font-weight: var(--ds-fw-700); color: #fff; } .dm-fc .mt .sp { opacity: .5; }
.dm-fc .mt .pl { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm-fc .mt .pl i { color: #ffb3c3; }
.dm-fc .act { display: flex; gap: 8px; margin-top: 4px; } .dm-fc .act .ds-btn { height: 34px; }
.dm-fc-w { background: rgba(255, 255, 255, .92); color: var(--ds-ink-900); } .dm-fc-w:hover { background: #fff; }
.dm-fc.ad { background: linear-gradient(115deg, #2f6fe0, #548feb 55%, #7aa9f5); } .dm-fc.ad.blue { background: linear-gradient(115deg, #164ba8, #2061d7 60%, #548feb); } .dm-fc.ad.violet { background: linear-gradient(115deg, #5b3fd0, #7a63e0 60%, #a08cf0); }
.dm-fc.ad::before { display: none; } .dm-fc.ad .art { position: absolute; right: 8%; top: 50%; z-index: 1; font-size: 96px; opacity: .22; transform: translateY(-50%) rotate(-8deg); }
.dm-fc.ad h3 { font-size: 18px; white-space: normal; } .dm-fc.ad h3 a { white-space: normal; }
.dm-fc .ds-btn--primary, .dm-fc .ds-btn { color: #fff; } .dm-fc .dm-fc-w { color: var(--ds-ink-900); }
@media (max-width: 760px) { .dm-fc { height: 150px; flex-basis: 76%; } .dm-fc-in { padding: 10px 12px; gap: 3px; } .dm-fc h3 { font-size: 15px; } .dm-fc .act .dm-fc-w:not(:only-child) { display: none; } .dm-fc .act .ds-btn { height: 32px; padding: 0 12px; } }

/* ---------- khối ghim: KHÔNG khung bao; thẻ ghim rộng bằng thẻ thường, phân biệt bằng nền nhạt + viền mảnh 1px ngay trên thẻ ---------- */
.dm-lay .pin-super, .dm-lay .pinv { margin: 0 0 14px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.dm-lay .pin-hd { margin: 0 0 8px; padding: 0; }
.dm-lay .pin-super .pin-strip, .dm-lay .pinv .pin-rows { display: grid; gap: 12px; overflow: visible; }
.dm-lay .pin-super .pin-strip, .dm-lay .pin-super .pin-cp { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: minmax(0, 1fr); padding: 0; }
.dm-lay .pin-super .pin-strip > *, .dm-lay .pinv .pin-rows > * { margin: 0; max-width: none; width: auto; }
@media (min-width: 1400px) { .dm-page.wrap { max-width: 1320px; } }
.dm-lay .rows { display: grid; gap: 12px; }
.dm-lay .pin-super .v3-place { background: #faf8ff; border: 1px solid #d9cff7; }
.dm-lay .pinv .v3-place { background: #fffaf0; border: 1px solid #f0d98f; }
.dm-lay .pinv .rlist > *, .dm-lay .pinv .lr { background: #fffaf5; border-color: #f7d9b8; }
.dm-lay .v3-place:hover { border-color: var(--ds-blue-200); }
.dm-lay .v3-place { grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
@media (max-width: 760px) { .dm-lay .v3-place { grid-template-columns: minmax(0, 1fr); } }

/* ---------- khối "Bạn là chủ …?" nổi bật: nền teal đậm, nút amber (khác nút Đặt hẹn xanh) ---------- */
.dm-lay .claim { display: flex; align-items: center; gap: 14px; min-height: 72px; margin: 0; padding: 12px 16px; border: 0; border-radius: 10px; position: relative; overflow: hidden; color: #fff; background: linear-gradient(110deg, #053f3a 0%, #0a6b5c 62%, #0c8a72 100%); box-shadow: 0 6px 18px rgba(8, 90, 76, .22); }
.dm-lay .claim::after { content: ''; position: absolute; right: 140px; top: -50px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
.dm-lay .claim .ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 22px; }
.dm-lay .claim b { display: block; font-size: 14px; font-weight: var(--ds-fw-700); color: #fff; } .dm-lay .claim small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .85); line-height: 1.45; }
.dm-lay .claim .btn { flex: none; margin-left: auto; height: 38px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--ds-gold-400); color: #3a2a00; font-size: 13px; font-weight: var(--ds-fw-700); position: relative; z-index: 1; box-shadow: none; }
.dm-lay .claim .btn i { color: #3a2a00; font-size: 17px; } .dm-lay .claim .btn:hover { background: #ffc965; box-shadow: 0 4px 14px rgba(253, 184, 65, .45); }
@media (max-width: 760px) { .dm-lay .claim { gap: 10px; padding: 10px 12px; } .dm-lay .claim .ic { width: 36px; height: 36px; font-size: 19px; } .dm-lay .claim small { display: none; } .dm-lay .claim b { font-size: 13px; line-height: 1.35; } .dm-lay .claim .btn { padding: 0 12px; } }

/* ---------- Dụng cụ: lưới 3 cột ---------- */
@media (min-width: 981px) { .dm-lay .pgrid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- MÁY TÍNH ≥ 981px: lưới 3 cột (lọc | danh sách | cột phải) ---------- */
@media (min-width: 981px) {
  .dm-lay { display: grid; grid-template-columns: 232px minmax(0, 1fr) 304px; column-gap: 16px; align-items: start; }
  .dm-lay > .jbar, .dm-lay > .jbar > .jf { display: contents; }
  .dm-lay > .jbar { border: 0; box-shadow: none; background: none; margin: 0; }
  .dm-lay .dm-bar { grid-column: 2 / 4; grid-row: 1; position: sticky; top: var(--hdr-h, 52px); z-index: 15; margin: 0 0 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--ds-line); border-radius: 10px; box-shadow: var(--ds-sh-1); }
  .dm-lay .dm-bar .jf-top { padding: 0; gap: 8px; flex-wrap: nowrap; }
  .dm-lay .jf-open, .dm-lay .jf-sh, .dm-lay .jf-bd { display: none; }
  .dm-lay .jf-sheet { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: calc(var(--hdr-h, 52px) + 8px); max-height: calc(100vh - var(--hdr-h, 52px) - 24px); overflow-y: auto; scrollbar-width: none; background: #fff; border: 1px solid var(--ds-line); border-radius: 10px; }
  .dm-lay .jf-sheet::-webkit-scrollbar { display: none; }
  .dm-lay .jf-dds { display: block; padding: 0; }
  .dm-lay .jdd { border-top: 1px solid var(--ds-line); } .dm-lay .jdd:first-child { border-top: 0; }
  .dm-lay .jdd-b { width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 0; background: none; box-shadow: none; justify-content: flex-start; pointer-events: none; font-weight: var(--ds-fw-700); }
  .dm-lay .jdd-b .cv { display: none; } .dm-lay .jdd-b .n { margin-left: auto; }
  .dm-lay .jdd.act .jdd-b { background: none; border: 0; }
  .dm-lay .jdd-p, .dm-lay .jdd-js .jdd-p, .dm-lay .jdd-js .jdd.open .jdd-p { display: block; position: static; min-width: 0; max-width: none; padding: 0 6px 10px; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .dm-lay .jdd-list { max-height: 240px; }
  .dm-lay .jdd-f { display: none; }
  .dm-lay .jf-ft, .dm-lay .jdd-js .jf-ft { display: flex; padding: 8px 12px; border-top: 1px solid var(--ds-line); background: none; } .dm-lay .jf-ft .btn { display: none; }
  .dm-lay .jchips { grid-column: 2 / 4; grid-row: 2; margin: 0 0 10px; }
  .dm-lay .tlay { display: contents; }
  .dm-lay .tmain { grid-column: 2; grid-row: 3; min-width: 0; }
  .dm-lay .jside { grid-column: 3; grid-row: 3; top: calc(var(--hdr-h, 52px) + 84px); }
}
/* máy tính bảng / điện thoại: thanh cũ + ô lọc tên + chip nhanh xếp hàng riêng */
@media (max-width: 980px) {
  .dm-bar .jf-top { flex-wrap: wrap; row-gap: 6px; }
  .dm-bar .dm-q { order: -1; flex: 1 1 100%; }
  .dm-bar .dm-quick { padding: 0 12px 8px; }
}

/* 981–1199px: hai cột (lọc | danh sách); cột phải trả phí xuống dưới danh sách */
@media (min-width: 981px) and (max-width: 1199px) {
  .dm-lay { grid-template-columns: 220px minmax(0, 1fr); }
  .dm-lay .dm-bar, .dm-lay .jchips { grid-column: 2; }
  .dm-lay .jside { grid-column: 2; grid-row: 4; position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
  .dm-lay .dm-q { flex-basis: 180px; }
}

/* tên/ meta dài không làm thẻ tràn khung (v3-body căn start theo nội dung → ép theo bề rộng thẻ) */
.dm-lay .v3-body { grid-template-columns: minmax(0, 1fr); justify-items: stretch; min-width: 0; }
.dm-lay .v3-body > * { min-width: 0; max-width: 100%; }
.dm-lay .v3-name a { min-width: 0; }