@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap');

/*
  Chợ đặt sân — hệ thị giác dùng chung (SF-MARKETPLACE-010..016), bám mockup src/sport-field/_marketplace-mockups/.
  Nền sáng sân cỏ, xanh lá chủ đạo, Be Vietnam Pro, bo góc 20px.
*/

:root {
    color-scheme: light;
    --ground: #f3f8f3;
    --card: #ffffff;
    --line: #e3ede4;
    --text: #1c2b21;
    --text-dim: #62766a;
    --green: #2fa84f;
    --green-soft: #e6f5e9;
    --green-dim: #1f7c3a;
    --radius: 20px;

    --c-football: #2fa84f;
    --c-pickleball: #c88a10;
    --c-tennis: #7f9310;
    --c-badminton: #d1452f;
    --c-basketball: #cf6a18;
    --c-volleyball: #2b74cf;

    /* accent trang — mặc định xanh; trang theo môn ghi đè --c */
    --c: var(--green);
    --c-soft: var(--green-soft);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; background: var(--ground); color: var(--text); }

body {
    font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
    background: radial-gradient(ellipse 1000px 520px at 50% -10%, color-mix(in srgb, var(--c) 12%, transparent), transparent 62%), var(--ground);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

::selection { background: var(--c); color: #fff; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--c); outline-offset: 2px; border-radius: 8px;
}
/* Blazor tự đưa tiêu điểm vào h1 mỗi lượt điều hướng để trình đọc màn hình đọc đúng chỗ. Tiêu đề
   không bấm được nên vòng tiêu điểm chẳng nói gì với người nhìn — bỏ vòng, giữ nguyên phần a11y. */
h1:focus, h1:focus-visible { outline: none; }

/* ---- shell + header + footer ---- */
.mp-shell { max-width: 1080px; margin: 0 auto; padding: 20px 20px 40px; min-height: 100vh; display: flex; flex-direction: column; }

/* ---- thanh đầu trang ---- */
/* Dính đỉnh, nền mờ: cuộn xuống vẫn bấm về trang chủ hoặc đổi môn được, mà không che mất nội dung. */
.mp-topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin: 0 -20px clamp(16px, 2.6vw, 24px); padding: 12px 20px;
    background: color-mix(in srgb, var(--ground) 82%, transparent);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, var(--line));
}

.mp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }

/* Khối vạch sân: ba vạch đứng dày dần, cùng ngôn ngữ với vạch biên kẻ dưới mỗi thẻ. */
.mp-brand .mark { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 20px; }
.mp-brand .mark i { display: block; width: 3px; border-radius: 2px; background: var(--c); }
.mp-brand .mark i:nth-child(1) { height: 9px; opacity: 0.38; }
.mp-brand .mark i:nth-child(2) { height: 14px; opacity: 0.66; }
.mp-brand .mark i:nth-child(3) { height: 20px; }
.mp-brand:hover .mark i { opacity: 1; transition: opacity 180ms; }

.mp-brand .word { font-weight: 900; font-size: 17px; letter-spacing: 0.01em; display: inline-flex; align-items: baseline; gap: 4px; }
.mp-brand .dot { color: var(--c); font-size: 18px; line-height: 1; }

.mp-topnav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Nhãn ngữ cảnh trên thanh đầu trang. Tên riêng, KHÔNG dùng .mp-chip — lớp đó đã là nhãn nhỏ trên
   thẻ kết quả và khai sau trong tệp này, nên nó sẽ đè mất chiều cao định ở đây. */
.mp-hchip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--card);
    font-weight: 800; font-size: 13px; color: var(--text-dim); text-decoration: none;
}
.mp-hchip .mp-i { width: 15px; height: 15px; }
.mp-hchip-sport { color: var(--text); background: var(--c-soft); border-color: color-mix(in srgb, var(--c) 28%, var(--line)); padding-right: 5px; }
.mp-hchip-sport .swap { font-size: 11px; font-weight: 800; color: var(--c); background: var(--card); border: 1px solid color-mix(in srgb, var(--c) 24%, var(--line)); padding: 3px 9px; border-radius: 999px; }
.mp-hchip-sport:hover { border-color: var(--c); }

.mp-main { flex: 1; }

.mp-footer { margin-top: clamp(30px, 4vw, 44px); padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.mp-footer .note { font-size: 11px; font-weight: 800; color: var(--text-dim); letter-spacing: 0.02em; opacity: 0.72; }
.mp-footer a { font-size: 13px; font-weight: 700; color: var(--text-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.mp-footer a:hover { color: var(--green-dim); border-color: var(--green); }

/* ---- typography ---- */
/* Nhãn khối ăn theo màu môn, không neo vào xanh — nếu không thì trang pickleball có vạch vàng mà
   chữ vẫn xanh, hai thứ cạnh nhau đá nhau. */
.mp-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 78%, #000); margin: 0 0 10px; }
.mp-h1 { font-weight: 800; font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 10px; }
.mp-h1 span { color: var(--c); }
.mp-sub { font-size: clamp(0.98rem, 2.1vw, 1.06rem); font-weight: 600; color: var(--text-dim); line-height: 1.5; margin: 0; max-width: 52ch; }
.mp-crumb { font-size: 12.5px; font-weight: 700; color: var(--text-dim); padding-bottom: 14px; }
.mp-crumb a { text-decoration: none; }
.mp-crumb a:hover { color: var(--c); }

.mp-hero { animation: mp-rise 460ms cubic-bezier(0.16,1,0.3,1) both; }
@keyframes mp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- 010 · board môn ---- */
.mp-board { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: clamp(20px, 3vw, 30px); }
@media (min-width: 560px) { .mp-board { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 900px) { .mp-board { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.mp-court { --court: var(--green); position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 176px; padding: 18px; border-radius: var(--radius); overflow: hidden; text-decoration: none; background: linear-gradient(158deg, color-mix(in srgb, var(--court) 92%, #fff), color-mix(in srgb, var(--court) 72%, #000)); box-shadow: 0 1px 2px rgba(28,43,33,0.05); transition: transform 220ms cubic-bezier(0.16,1,0.3,1), box-shadow 220ms; }
@media (min-width: 900px) { .mp-court { min-height: 208px; } }
.mp-court:hover, .mp-court:focus-visible { transform: translateY(-6px); box-shadow: 0 26px 44px -20px color-mix(in srgb, var(--court) 60%, transparent); }
.mp-court::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(transparent, rgba(0,0,0,0.34)); }
.mp-court .lines { position: absolute; inset: 0; width: 100%; height: 100%; stroke: rgba(255,255,255,0.42); stroke-width: 2; fill: none; }
.mp-court .meta { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.mp-court .name { font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 800; color: #fff; line-height: 1.15; }
.mp-court .count { flex: none; font-size: 11px; font-weight: 800; color: #fff; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.34); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }

/* ---- 011 · thẻ khu vực ---- */
.mp-places { margin-top: clamp(22px, 3vw, 32px); display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .mp-places { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.mp-place { position: relative; display: flex; align-items: center; gap: 14px; padding: 20px 18px 20px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--text); box-shadow: 0 1px 2px rgba(28,43,33,0.04); transition: transform 180ms cubic-bezier(0.16,1,0.3,1), border-color 180ms, box-shadow 180ms; }
.mp-place::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); }
.mp-place:hover, .mp-place:focus-visible { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 22px 34px -22px color-mix(in srgb, var(--c) 50%, transparent); }
.mp-place .info { flex: 1; min-width: 0; }
.mp-place .pname { font-size: clamp(1.15rem, 2.6vw, 1.4rem); font-weight: 800; line-height: 1.2; }
.mp-place .pcount { font-size: 13px; font-weight: 800; color: var(--c); margin-top: 4px; }
.mp-place .go { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--c-soft); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--c); }

/* ---- empty state ---- */
.mp-empty { margin-top: 40px; text-align: center; padding: 40px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.mp-empty p { font-size: 15px; font-weight: 700; color: var(--text-dim); margin: 0 0 16px; }
.mp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 800; font-size: 14px; line-height: 1; color: var(--c); background: var(--card); border: 1.5px solid color-mix(in srgb, var(--c) 40%, var(--line)); padding: 0 20px; border-radius: 12px; text-decoration: none; cursor: pointer; }
.mp-btn:hover { background: var(--c-soft); }
.mp-btn-primary { color: #fff; background: var(--c); border-color: var(--c); }
.mp-btn-primary:hover { background: color-mix(in srgb, var(--c) 88%, #000); }
/* Chỉ đường là lối ra ngoài ứng dụng bản đồ — phải nhìn ra là nút bấm được, không phải chữ gạch chân lẫn trong địa chỉ. */
.mp-btn-map { font-size: 13.5px; }

/* ---- 012 · search + filter + card kết quả ---- */
.mp-searchbar { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 6px 6px 6px 16px; box-shadow: 0 14px 30px -24px rgba(28,43,33,0.3); }
.mp-searchbar input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text); padding: 12px 0; }
.mp-searchbar button { font-family: inherit; font-weight: 800; font-size: 14px; color: #fff; background: var(--c); border: none; border-radius: 11px; padding: 11px 20px; cursor: pointer; white-space: nowrap; }
.mp-filters { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Bộ chọn dùng chung một khuôn: bỏ hẳn mũi tên mặc định của hệ điều hành (mỗi máy một kiểu, và nó
   là thứ làm ô chọn trông rẻ tiền nhất), vẽ lại mũi tên bằng nền SVG, chừa chỗ bên phải cho nó. */
.mp-select, .mp-filters select, .mp-filters input[type=time] {
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text);
    height: 40px; padding: 0 34px 0 13px; border: 1px solid var(--line); border-radius: 11px;
    background-color: var(--card); cursor: pointer; line-height: 1;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235b6b60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
    transition: border-color 120ms, box-shadow 120ms;
}
.mp-filters input[type=time] { padding-right: 13px; background-image: none; }
.mp-select:hover, .mp-filters select:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.mp-select:focus, .mp-filters select:focus {
    outline: none; border-color: var(--c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
}
.mp-filters .spacer { flex: 1; }
.mp-toggle { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.mp-toggle span, .mp-toggle a { font-size: 13px; font-weight: 800; text-decoration: none; color: var(--text-dim); padding: 7px 14px; border-radius: 8px; }
.mp-toggle .on { background: var(--c); color: #fff; }
.mp-toggle .disabled { opacity: 0.5; cursor: not-allowed; }
/* ── Phân trang + trạng thái đang tìm (SF-MARKETPLACE-019) ──────────────────────────────────────── */
.mp-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0 8px; }
.mp-pager-at { font-size: 13px; font-weight: 800; color: var(--text-dim); }

/* Đang hỏi: danh sách cũ mờ đi và không bấm được, nhưng vẫn nằm đó — trống trơn là khách tưởng mất hết. */
.mp-list.is-loading { opacity: 0.45; pointer-events: none; transition: opacity 120ms; }

.mp-count { margin: 18px 0 14px; font-size: 14px; font-weight: 800; }
.mp-count b { color: var(--c); }

.mp-list { display: grid; gap: 14px; }
.mp-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); box-shadow: 0 1px 2px rgba(28,43,33,0.04); transition: transform 180ms cubic-bezier(0.16,1,0.3,1), border-color 180ms, box-shadow 180ms; }
.mp-row:hover, .mp-row:focus-visible { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 22px 34px -22px color-mix(in srgb, var(--c) 50%, transparent); }
@media (max-width: 720px) { .mp-row { grid-template-columns: 1fr; } }
.mp-thumb { position: relative; min-height: 150px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 42%, #7bc98f), color-mix(in srgb, var(--c) 78%, #1f7c3a)); background-size: cover; background-position: center; }
.mp-mid { padding: 16px 4px 16px 0; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 720px) { .mp-mid { padding: 0 16px 8px; } }
.mp-row .name { font-size: 16px; font-weight: 800; }
.mp-row .addr { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.mp-row .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mp-chip { font-size: 11.5px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--ground); border: 1px solid var(--line); color: var(--text-dim); }
.mp-chip.free { background: var(--c-soft); border-color: color-mix(in srgb, var(--c) 30%, var(--line)); color: var(--green-dim); }
.mp-chip.none { background: #fbe4de; border-color: #f0c3b8; color: #b23b26; }
/* SF-MARKETPLACE-012 FR-20 — nút bản đồ đứng cạnh nút xem sân trong cụm thao tác bên phải thẻ.
   Cả thẻ vẫn bấm được: liên kết tên phủ kín khuôn bằng lớp trong suốt, hai nút thật nổi lên trên nó. */
.mp-row-wrap { position: relative; }
.mp-cover { text-decoration: none; color: inherit; }
.mp-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mp-actions { display: flex; align-items: center; gap: 8px; position: relative; z-index: 2; }
@media (max-width: 720px) { .mp-actions { width: 100%; } }
.mp-map { font-size: 12px; font-weight: 800; padding: 8px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--text-dim); text-decoration: none; white-space: nowrap; }
.mp-map:hover { border-color: var(--c); color: var(--text); }

/* Quét quanh tôi + ô bán kính — cặp điều khiển đầu danh sách (SF-MARKETPLACE-012 mục 7). */
.mp-scan { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 13px; font-weight: 800; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.mp-scan:hover { border-color: var(--c); }
/* Dò vị trí mất vài giây (hỏi quyền + GPS) — nút phải tự nói là đang chạy, và khóa lại để không bấm chồng. */
.mp-scan[disabled] { cursor: progress; color: var(--text-dim); }
.mp-scan .mp-spin { display: none; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--c); border-radius: 50%; }
.mp-scan.is-scanning .mp-spin { display: inline-block; animation: mp-spin 0.7s linear infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }
.mp-radius { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--text-dim); }

/* ── Khối quét quanh tôi (SF-MARKETPLACE-017) ─────────────────────────────────────────────────────
   Dấu nhận diện là ba vòng tròn đồng tâm mang màu của môn: bán kính trên bản đồ và vòng tròn giữa sân
   bóng là cùng một hình, nên khối tự nói mình làm gì mà không cần một biểu tượng ghim chung chung. */
.mp-nearby { display: flex; align-items: center; gap: clamp(14px, 3vw, 26px); margin: 0 0 14px; padding: clamp(14px, 2.4vw, 20px) clamp(16px, 3vw, 24px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.mp-nearby.is-compact { padding: 10px clamp(14px, 2.4vw, 20px); gap: 14px; }

.mp-rings { position: relative; flex: none; width: 68px; height: 68px; }
.mp-nearby.is-compact .mp-rings { width: 34px; height: 34px; }
.mp-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid color-mix(in srgb, var(--c) 20%, var(--line)); border-radius: 50%; }
.mp-ring.is-on { border-color: var(--c); }
.mp-ring-1 { width: 32%; height: 32%; }
.mp-ring-2 { width: 66%; height: 66%; }
.mp-ring-3 { width: 100%; height: 100%; }

/* Vòng lan ra trong lúc dò — trạng thái chờ có NGHĨA, không phải vòng xoay chung chung. */
.mp-nearby.is-locating .mp-ring { animation: mp-ripple 1.6s ease-out infinite; }
.mp-nearby.is-locating .mp-ring-2 { animation-delay: 0.22s; }
.mp-nearby.is-locating .mp-ring-3 { animation-delay: 0.44s; }
@keyframes mp-ripple {
    0%   { opacity: 0.25; transform: translate(-50%, -50%) scale(0.7); }
    55%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
    .mp-nearby.is-locating .mp-ring { animation: none; }
}

.mp-nearby-a { display: grid; justify-items: start; gap: 4px; }
.mp-nearby-a .mp-eyebrow { margin: 0; }
.mp-nearby-h { margin: 0 0 6px; font-size: clamp(1.05rem, 2.4vw, 1.35rem); font-weight: 900; letter-spacing: -0.015em; }
.mp-nearby-note { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.mp-nearby-err { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: #b23b26; }

.mp-nearby-b { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 0; }
.mp-nearby-on { font-size: 14px; font-weight: 800; }
.mp-nearby-again { font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--text-dim); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
/* Ô chọn khu vực. Bản gốc là một <select> thuần (chạy được khi JavaScript tắt); tệp kịch bản dựng
   thêm lớp gõ-được lên trên và giấu <select> đi — giấu bằng clip chứ không display:none, để nó vẫn là
   một ô của biểu mẫu và vẫn gửi giá trị đi. */
.mp-nearby-area { display: inline-flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.mp-nearby-area label { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--text-dim); }

.mp-combo { position: relative; display: inline-block; }
.mp-combo-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.mp-combo-input {
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text);
    height: 40px; width: 210px; padding: 0 34px 0 32px; border: 1px solid var(--line); border-radius: 11px;
    background: var(--card) no-repeat left 11px center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235b6b60' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/g%3E%3C/svg%3E");
    cursor: text; transition: border-color 120ms, box-shadow 120ms;
}
.mp-combo-input::placeholder { color: var(--text-dim); font-weight: 600; }
.mp-combo-input:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.mp-combo-input:focus {
    outline: none; border-color: var(--c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
}

.mp-combo-list {
    position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; max-width: 320px;
    max-height: 300px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 18px 40px -20px rgba(28,43,33,0.45);
}
.mp-combo-item {
    padding: 9px 11px; border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--text);
    cursor: pointer; white-space: nowrap;
}
.mp-combo-item:hover { background: var(--ground); }
.mp-combo-item.is-on { background: var(--c-soft); color: var(--green-dim); }
.mp-combo-item.is-me { color: var(--c); }
.mp-combo-item.is-me::before { content: "\2316  "; }
.mp-combo-empty { padding: 9px 11px; font-size: 12.5px; font-weight: 700; color: var(--text-dim); }

@media (max-width: 560px) { .mp-combo, .mp-combo-input { width: 100%; } }
.mp-nearby-a .mp-nearby-area { margin-top: 8px; }
.mp-nearby-again:hover { color: var(--c); }

@media (max-width: 560px) {
    .mp-nearby { gap: 14px; }
    .mp-rings { width: 52px; height: 52px; }
}

/* Số liên hệ cuối trang chi tiết (SF-MARKETPLACE-013 FR-16). */
/* Số của sân đã hợp tác: một dòng chữ lẫn trong đoạn giới thiệu thì khách không nhận ra là gọi được. */

.mp-right { padding: 16px 18px 16px 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; text-align: right; }
@media (max-width: 720px) { .mp-right { padding: 0 16px 16px; align-items: flex-start; text-align: left; flex-direction: row; justify-content: space-between; width: 100%; } }
.mp-price { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.mp-price b { display: block; font-size: 18px; font-weight: 800; color: var(--c); }
.mp-go { font-size: 13px; font-weight: 800; color: #fff; background: var(--c); padding: 9px 16px; border-radius: 10px; white-space: nowrap; text-decoration: none; }

/* ---- 016 · khối môn trên trang tỉnh ---- */
.mp-sport-block { margin-top: 30px; }
.mp-sport-block h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 4px; }
.mp-sport-block .see-all { font-size: 13px; font-weight: 800; color: var(--c); text-decoration: none; }

/* ---- 013 · chi tiết sân ---- */
.mp-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; height: 220px; border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
@media (max-width: 680px) { .mp-gallery { grid-template-columns: 2fr 1fr; height: 170px; } .mp-gallery > :nth-child(3) { display: none; } }
.mp-gallery > div { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 40%, #7bc98f), color-mix(in srgb, var(--c) 78%, #1f7c3a)); background-size: cover; background-position: center; }
.mp-amen { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.mp-amen span { font-size: 12px; font-weight: 800; color: var(--text-dim); background: var(--card); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; }
.mp-amen span.open { color: var(--green-dim); background: var(--c-soft); border-color: color-mix(in srgb, var(--c) 28%, var(--line)); }

.mp-detail { margin-top: 26px; min-width: 0; }
.mp-sec { margin-bottom: 32px; }
.mp-sec-t { font-size: 1.1rem; font-weight: 800; margin: 0 0 12px; }

.mp-price-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: 13.5px; }
.mp-price-table th, .mp-price-table td { padding: 12px 14px; text-align: left; }
.mp-price-table thead th { background: var(--ground); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); }
.mp-price-table tbody tr { border-top: 1px solid var(--line); }
.mp-price-table tbody td:first-child { font-weight: 700; }
.mp-price-table .band { color: var(--text-dim); font-size: 11.5px; font-weight: 600; display: block; }
.mp-price-table .amt { font-weight: 800; }

.mp-pick-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mp-pick-row .k { font-size: 11.5px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; width: 64px; flex: none; }
.mp-chip-btn { font-family: inherit; font-size: 13px; font-weight: 800; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; cursor: pointer; line-height: 1.1; text-decoration: none; display: inline-block; }
.mp-chip-btn small { display: block; font-size: 9.5px; font-weight: 700; color: var(--text-dim); }
.mp-chip-btn.on { background: var(--c); color: #fff; border-color: var(--c); }
.mp-chip-btn.on small { color: rgba(255,255,255,0.85); }
/* Sân hết chỗ vẫn bấm được để xem ngày khác, nhưng phải nhìn ra ngay là kín (SF-MARKETPLACE-013 FR-23). */
.mp-chip-btn.full { color: var(--text-dim); background: var(--ground); border-style: dashed; }
.mp-chip-btn.full small { color: #b23b26; }
.mp-chip-btn.full.on { background: var(--text-dim); color: #fff; border-style: solid; }
.mp-chip-btn.full.on small { color: rgba(255,255,255,0.9); }

.mp-free-count { font-size: 12.5px; font-weight: 700; color: var(--text-dim); margin: 6px 0 4px; }
.mp-free-count b { color: var(--green-dim); }
.mp-slots .g { font-size: 11px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin: 16px 0 8px; }
.mp-slot-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-slot { font-family: inherit; font-size: 13.5px; font-weight: 800; color: var(--green-dim); background: var(--card); border: 1.5px solid var(--c); border-radius: 10px; padding: 10px 0; cursor: pointer; width: 74px; text-align: center; text-decoration: none; display: inline-block; }
.mp-slot.on { background: var(--c); color: #fff; }
.mp-slot.off { color: var(--text-dim); border: 1px solid var(--line); cursor: not-allowed; background: repeating-linear-gradient(45deg, #f1f4f1 0 6px, #e9eee9 6px 12px); pointer-events: none; }

/* SF-MARKETPLACE-013 FR-18 — thanh đặt sân đứng CUỐI trang và dính đáy khung nhìn, không phải cụm ở cột phải. */
.mp-book { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: 0 20px 44px -26px rgba(28,43,33,0.42); }
.mp-book .sum { flex: 1; min-width: 200px; }
.mp-book .from { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.mp-book .from b { font-size: 22px; font-weight: 800; color: var(--c); letter-spacing: -0.02em; }
.mp-book .pick { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--text-dim); line-height: 1.5; }
.mp-book .pick b { color: var(--text); }
.mp-book .act { flex: none; }
.mp-book .cta { display: block; text-align: center; font-family: inherit; font-weight: 800; font-size: 15px; color: #fff; background: var(--c); border: none; border-radius: 12px; padding: 14px 34px; cursor: pointer; text-decoration: none; }
.mp-book .cta.disabled { opacity: 0.45; pointer-events: none; }
.mp-book .fine { font-size: 11px; font-weight: 600; color: var(--text-dim); text-align: center; margin-top: 8px; line-height: 1.5; max-width: 260px; }
@media (max-width: 620px) { .mp-book .act { width: 100%; } .mp-book .fine { max-width: none; } }

/* ---- 014 · wizard ---- */
/* Một cột: ba bước xếp theo thứ tự khách làm, thanh chốt đơn nằm dưới cùng — không tách cột phụ. */
.mp-wizard { background: var(--card); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; margin-top: 10px; }
.mp-wizard .main { padding: 24px 26px 30px; }
.mp-wizard .step { padding: 22px 0; border-top: 1px solid var(--line); }
.mp-wizard .step:first-of-type { border-top: none; padding-top: 6px; }
.mp-wizard .st { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mp-wizard .num { width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.mp-wizard .st h2 { font-size: 14.5px; font-weight: 800; margin: 0; }
.mp-form { display: grid; gap: 12px; }
.mp-form label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 5px; }
.mp-form input, .mp-form textarea { width: 100%; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text); padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--ground); }
.mp-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .mp-form .two { grid-template-columns: 1fr; } }
.mp-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; font-weight: 600; color: var(--text-dim); line-height: 1.5; }
.mp-agree input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--c); }
.mp-err { color: #b23b26; font-size: 12.5px; font-weight: 700; margin: 8px 0 0; }

.mp-book .from span { font-weight: 700; color: var(--text-dim); }
.mp-book .pick b { font-variant-numeric: tabular-nums; }
.mp-confirm { display: block; font-family: inherit; font-weight: 800; font-size: 15px; color: #fff; background: var(--c); border: none; border-radius: 12px; padding: 14px 34px; cursor: pointer; white-space: nowrap; }
.mp-confirm:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 620px) { .mp-confirm { width: 100%; } }

.mp-done { text-align: center; padding: 36px 26px 40px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; margin-top: 10px; }
.mp-done h2 { font-size: 1.3rem; font-weight: 800; margin: 8px 0 6px; }
.mp-done p { font-size: 13.5px; font-weight: 600; color: var(--text-dim); margin: 0 auto 20px; max-width: 44ch; line-height: 1.55; }
.mp-code-box { width: 200px; margin: 0 auto 14px; padding: 18px 12px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--c) 40%, var(--line)); background: var(--c-soft); }
.mp-code-box .lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-dim); }
.mp-code-box .code { font-size: 20px; font-weight: 900; letter-spacing: 0.04em; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── SF-MARKETPLACE-030 — ô QR giữ chỗ ──────────────────────────────────────
   Giữ đúng chỗ và kích thước cho ảnh VietQR tĩnh sẽ thay vào. Nét đứt + chữ mờ để không ai tưởng
   là mã quét được. */
.mp-qr-box { width: 200px; margin: 0 auto 16px; }
.mp-qr-box .ph { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px;
    border: 1px dashed var(--line); background: var(--c-soft);
    font-size: 22px; font-weight: 900; letter-spacing: 0.1em; color: var(--text-dim); opacity: 0.45; }
.mp-qr-box .note { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-dim); line-height: 1.5; }

/* ── SF-MARKETPLACE-022 — hồ sơ danh bạ ─────────────────────────────────────
   Thẻ mồi dùng chung khuôn .mp-row với thẻ sân thật; chỉ khác huy hiệu và chỗ giá để trống. */
.mp-verified { font-size: 11.5px; font-weight: 900; color: var(--c); letter-spacing: 0.2px; }

/* Hai cột: liên hệ bên trái, lối nhận quản lý bên phải. Dưới 860px xếp dọc như cũ. */

.mp-dir-notice { font-size: 13px; font-weight: 700; color: var(--text-dim); background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 14px 0 0; }

.mp-dir-claim { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.mp-dir-claim h2 { font-size: 16px; font-weight: 900; margin: 0 0 12px; }
.mp-dir-claim form { display: grid; gap: 10px; }
.mp-dir-claim input, .mp-dir-claim textarea { font-family: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text); }
.mp-dir-claim textarea { min-height: 84px; resize: vertical; }
.mp-dir-thanks { font-size: 14px; font-weight: 800; color: var(--green-dim); }

.mp-dir-error { font-size: 13px; font-weight: 800; color: #b23b26; margin-top: 14px; }

/* Thanh tiến trình đầu trang — chợ chạy Static SSR nên mỗi thao tác là một lượt tải trang mới. */
.mp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 999; overflow: hidden; opacity: 0; transition: opacity 120ms; pointer-events: none; }
.mp-progress.on { opacity: 1; }
.mp-progress span { display: block; height: 100%; width: 34%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, transparent, var(--c)); animation: mp-progress-run 1.05s ease-in-out infinite; }
@keyframes mp-progress-run { from { transform: translateX(-100%); } to { transform: translateX(394%); } }

/* ── Trang chi tiết sân — ba thẻ (SF-MARKETPLACE-013) ─────────────────────────────────────────────
   Trang tự nhuộm theo môn qua SportView.PageAccentStyle: pickleball vàng, tennis ô-liu, bóng rổ cam.
   Hệ màu theo môn đã có sẵn trong token từ đầu, trang này trước đó không dùng nên mọi sân trông
   giống hệt nhau bất kể đang xem môn gì. */

.mp-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 26px); margin-bottom: 14px; box-shadow: 0 1px 2px rgba(28,43,33,0.04); }

/* Hai thẻ đầu trang trên MỘT trục ngang (FR-27). auto-fit lo cả hai ca bằng một dòng: hai thẻ thì chia đôi,
   một thẻ — cơ sở chưa có ảnh không gian sân (FR-14) — thì nới ra trọn chiều ngang. Dưới ~700px lưới tự
   rớt về một cột, không cần điểm ngắt riêng. */
/* `stretch` chứ không `start`: hai thẻ đứng cạnh nhau mà cao lệch nhau thì hàng bị hụt một góc,
   nhìn như thẻ bên thấp đang thiếu nội dung. Cao bằng nhau rồi thì ảnh tự giãn cho đầy phần dư. */
.mp-venue-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; align-items: stretch; margin-bottom: 14px; }
.mp-venue-top > .mp-card { margin-bottom: 0; display: flex; flex-direction: column; }

/* Thẻ hình ảnh: băng ảnh ăn hết phần chiều cao còn dư của thẻ, thay vì để một khoảng trắng dưới đáy. */
.mp-venue-top .mp-carousel { flex: 1; align-items: stretch; min-height: 240px; }
.mp-venue-top .mp-slide { display: flex; }
.mp-venue-top .mp-slide img { height: 100%; min-height: 240px; }

/* Vạch kẻ sân: nhãn thẻ ngồi trên một đường đôi dày–mảnh, đúng cách vạch biên kẻ trên mặt sân thật. */
.mp-rule { position: relative; padding-bottom: 12px; margin-bottom: 16px; }
.mp-rule::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(to right, var(--c) 0 56px, color-mix(in srgb, var(--c) 22%, var(--line)) 56px 100%); border-radius: 2px; }


.mp-card h1 { margin: 0 0 4px; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
.mp-card .addr { color: var(--text-dim); font-weight: 600; font-size: 14.5px; }

/* Bảng tỉ số: số to trên nhãn nhỏ, ngăn bằng vạch mảnh — ba thứ quyết định, đọc một lần liếc. */
.mp-scoreboard { display: flex; flex-wrap: wrap; gap: 0; margin: 18px 0 4px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--ground); }
.mp-stat { flex: 1 1 128px; padding: 12px 16px; border-left: 1px solid var(--line); }
.mp-stat:first-child { border-left: 0; }
.mp-stat .k { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px; }
.mp-stat strong { font-size: 17px; font-weight: 900; letter-spacing: -0.01em; white-space: nowrap; }
.mp-stat strong a { text-decoration: none; }
.mp-stat strong a:hover { color: var(--c); }
.mp-stat strong.on { color: var(--green-dim); font-size: 15px; }
.mp-stat strong.on::before { content: "● "; color: var(--green); }

.mp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mp-intro { margin: 18px 0 0; font-size: 15px; font-weight: 600; color: var(--text-dim); line-height: 1.6; max-width: 62ch; }

/* Băng ảnh trượt ngang bằng scroll-snap — không JavaScript, giữ nguyên Static SSR. */
.mp-carousel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
.mp-carousel::-webkit-scrollbar { height: 6px; }
.mp-carousel::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--c) 30%, var(--line)); border-radius: 999px; }
.mp-slide { display: block; flex: 0 0 auto; width: min(100%, 520px); scroll-snap-align: center; border-radius: 14px; overflow: hidden; }
.mp-slide img { display: block; width: 100%; height: 320px; object-fit: cover; }
@media (max-width: 680px) { .mp-slide { width: 88%; } .mp-slide img { height: 210px; } }
.mp-carousel-hint { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--text-dim); }

/* Ảnh khổ lớn bật bằng :target (FR-28 · FR-29) — mốc neo trên đường dẫn là công tắc, trình duyệt tự lo,
   không một dòng JavaScript nào. Màn ngăn và nút đóng đều là liên kết trỏ về mốc neo của thẻ hình ảnh. */
.mp-lightbox { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 40px); }
.mp-lightbox:target { display: flex; }
.mp-lightbox-veil { position: absolute; inset: 0; background: rgba(14,22,17,0.84); }
.mp-lightbox-img { position: relative; max-width: min(100%, 1120px); max-height: 86vh; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,0.5); }
.mp-lightbox-x { position: absolute; top: clamp(12px, 2vw, 22px); right: clamp(12px, 2vw, 24px); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,0.94); color: var(--text); font-size: 26px; font-weight: 800; line-height: 1; text-decoration: none; }
.mp-lightbox-x:hover { background: #fff; color: var(--c); }

.mp-card .mp-price-table { margin-bottom: 22px; }
.mp-card .mp-amen { margin: 18px 0 0; }

/* ---- biểu tượng nét (MpIcon) ---- */
/* Biểu tượng mang MÀU CỦA MÔN, nhãn chữ để xám: mắt bắt hình trước, đọc chữ sau, và mỗi gian hàng
   có sắc riêng. Bốn hình cùng một màu xám thì chúng chỉ là nhiễu đặt cạnh chữ. */
.mp-i { width: 16px; height: 16px; flex: none; vertical-align: -3px; color: var(--c); }
.mp-stat .k .mp-i { width: 14px; height: 14px; vertical-align: -2.5px; }
.mp-card .addr .mp-i { width: 15px; height: 15px; vertical-align: -3px; }
.mp-hchip .mp-i { color: var(--c); }
.mp-dir-notice .mp-i { color: var(--c); }

/* Trạng thái là tín hiệu nghiệp vụ, không phải nhãn gian hàng — nó giữ màu xanh "đang chạy" kể cả
   trên trang môn có accent khác, vì đỏ/xanh ở đây có nghĩa cố định. */
.mp-stat .k.is-live .mp-i { color: var(--green); }

/* ---- 022 · hồ sơ danh bạ (sân chưa xác nhận) ---- */
/* Dùng lại nguyên bộ .mp-card / .mp-rule / .mp-scoreboard của trang sân đã hợp tác — khách không phải
   học lại cách đọc. Khác biệt nằm ở nội dung, không ở hình thức. */
.mp-stat strong .muted { color: var(--text-dim); font-weight: 800; font-size: 15px; }
.mp-stat strong.muted { color: var(--text-dim); font-size: 15px; }

.mp-dir-notice { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; padding: 10px 14px; border: 1px dashed color-mix(in srgb, var(--c) 26%, var(--line)); border-radius: 12px; background: var(--ground); font-size: 13px; font-weight: 700; color: var(--text-dim); }
.mp-dir-thanks { margin: 0; font-size: 15px; font-weight: 700; color: var(--green-dim); }

.mp-claim-form { display: grid; gap: 10px; max-width: 460px; margin-top: 14px; }
.mp-claim-form input, .mp-claim-form textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font: inherit; font-size: 14px; font-weight: 600; color: var(--text); }
.mp-claim-form textarea { min-height: 84px; resize: vertical; }
.mp-claim-form input::placeholder, .mp-claim-form textarea::placeholder { color: var(--text-dim); font-weight: 600; }
.mp-claim-form input:focus, .mp-claim-form textarea:focus { outline: none; border-color: var(--c); }
.mp-claim-form button { justify-self: start; }
.mp-dir-error { margin-top: 12px; font-size: 13.5px; font-weight: 700; color: #b4271a; }