/* Bộ tìm pallet: tâm điểm của trang chủ. Mặt bàn làm việc nổi trên nền, thanh tìm kiếm to, bộ lọc và thẻ có chiều sâu. */
.finder { position: relative; padding: 56px 0 80px; background: linear-gradient(180deg, #E9ECF2 0, #DDE2EA 100%); border-top: 1px solid var(--line); }
.finder::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--orange); }
.finder__head { align-items: flex-end; margin-bottom: 22px; }
.finder__head h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.02em; color: #14203F; }
.finder .results__count { font-size: 18px; padding: 8px 14px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--orange); }
.finder__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: st; }
.finder__steps li { counter-increment: st; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); font-size: 16px; font-weight: 600; color: #14203F; }
.finder__steps li + li { border-left: 0; }
.finder__steps li::before { content: counter(st); flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: #14203F; color: #fff; font-weight: 800; }
.finder__steps span { display: block; font-weight: 400; font-size: 15px; color: var(--mut, #4A5365); }

.finder__search { padding: 28px; background: #14203F; border-radius: 4px; box-shadow: 0 24px 48px -20px rgba(20, 32, 63, .55), 0 2px 0 var(--orange) inset; position: relative; }
.finder__search .search { border: 0; border-radius: 2px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.finder__search .search input { font-size: 20px; padding: 18px 22px; }
.finder__search .search .btn { min-height: 64px; padding: 0 36px; font-size: 18px; border-radius: 0; }
.finder__search .hero__quick { margin-top: 18px; color: #C9D0E2; }
.finder__search .chip { color: #14203F; background: #fff; border: 0; border-bottom: 3px solid var(--orange); border-radius: 2px; padding: 8px 14px; font-weight: 700; }
.finder__search .chip:hover { background: #FFF3E6; }

.finder__grid { margin-top: -10px; padding-top: 0; }
.finder .facets { background: #fff; border: 1px solid var(--line); border-top: 4px solid #14203F; box-shadow: 0 14px 30px -18px rgba(20, 32, 63, .45); padding: 6px 18px 14px; margin-top: 24px; }
.finder .fg summary { font-size: 17px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.finder .opt { border-radius: 0; }
.finder .opt:hover { background: #FFF3E6; }
.finder .opt input { accent-color: #C2410C; }
.finder__main { margin-top: 24px; }
.finder .results__bar { padding: 10px 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 20px -16px rgba(20, 32, 63, .5); }
.finder .pcard { border: 1px solid #C9CFDA; border-radius: 2px; box-shadow: 0 1px 0 #fff inset, 0 10px 22px -16px rgba(20, 32, 63, .55); position: relative; }
.finder .pcard::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.finder .pcard:hover { transform: translateY(-4px); border-color: #14203F; box-shadow: 0 22px 36px -18px rgba(20, 32, 63, .6); }
.finder .pcard:hover::after { transform: scaleX(1); }
.finder .pcard__img { border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, #fff, #F1F3F7); }
.finder .pcard__title { color: #14203F; }
.finder .pcard__specs span { color: #14203F; font-weight: 700; }
.pcard__bar { display: block; height: 6px; background: #E3E6EB; margin: 2px 0 0; }
.pcard__bar i { display: block; height: 100%; background: #14203F; }
.pcard__bar + .pcard__barl { display: block; font-size: 14px; color: var(--mut, #4A5365); margin: 3px 0 0; }
@media (max-width: 860px) {
  .finder { padding: 36px 0 56px; }
  .finder__steps { grid-template-columns: 1fr; }
  .finder__steps li + li { border-left: 1px solid var(--line); border-top: 0; }
  .finder__search { padding: 16px; }
  .finder__search .search input { font-size: 16px; padding: 14px; }
  .finder__search .search .btn { min-height: 54px; padding: 0 18px; }
  .finder__grid { margin-top: 0; }
}