@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-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; }

/* Nút "Vị trí của tôi" ở dòng gọn — nút THẬT, có viền và nền, cao 44px cho ngón tay chạm trúng.
   Dòng gọn không dựng ba vòng nữa nên chỗ đó dành trọn cho nó. */
.mp-nearby-origin { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
    font-family: inherit; font-size: 14px; font-weight: 800; color: var(--c); cursor: pointer;
    background: color-mix(in srgb, var(--c) 8%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--c) 35%, var(--line)); border-radius: 999px; }
.mp-nearby-origin:hover { background: color-mix(in srgb, var(--c) 16%, transparent); border-color: var(--c); }
.mp-nearby-origin:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }

/* Tâm ngắm: nét vẽ mượn màu chữ của nút nên đổi môn là đổi theo, không đẻ bảng màu mới (FR-5). */
.mp-ico-locate { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; }
.mp-ico-locate .mp-ico-dot { fill: currentColor; stroke: none; }
.mp-nearby.is-locating .mp-ico-locate { animation: mp-ripple 1.6s ease-out infinite; }

/* Đang quanh một xã thì nói ra xã nào — nút chỉ còn nói về hành động, không còn chở trạng thái. */
.mp-nearby-at { font-size: 14px; font-weight: 800; }
.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; }
/* Ô 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; top: 0; left: 0; 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; }

/* Trên điện thoại khối này phải xếp DỌC. Nó là hàng ngang của bốn thứ đều co không nổi — chữ trạng thái,
   nút quét lại, ô bán kính, ô chọn khu vực — nên để nguyên hàng ngang là chúng chen nhau rồi tràn ra
   ngoài thẻ. Mỗi điều khiển chiếm trọn chiều ngang, cao tối thiểu 44px cho ngón tay chạm trúng. */
/* Trên điện thoại khối này gập còn BA hàng, mỗi hàng là một cặp đi với nhau:

     1  "Sân gần bạn"            [ Quét lại ]
     2  Bán kính                 [ Tất cả ▾ ]
     3  Khu vực                  [ Toàn Đà Nẵng ]

   Nhãn giữ bề ngang riêng rồi ô ăn hết phần còn lại, nên bốn điều khiển không chen nhau như lúc còn là
   một hàng ngang duy nhất, mà cũng không bị xé thành bảy dòng rời. */
@media (max-width: 560px) {
    .mp-nearby { flex-direction: column; align-items: stretch; gap: 12px; }
    .mp-rings { width: 52px; height: 52px; }

    .mp-nearby-a { width: 100%; }
    .mp-nearby-a .mp-btn { width: 100%; }

    .mp-nearby-b { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; }

    /* Hàng 1: trạng thái bên trái, nút quét lại bên phải. */
    .mp-nearby-at { grid-column: 1; font-size: 15px; }
    .mp-nearby-origin { grid-column: 2; justify-self: stretch; justify-content: center; }

    /* Hàng 2: nhãn "Bán kính" nằm ngoài, ô chọn ăn hết cột còn lại — label đang bọc cả hai nên
       cho chính nó trải hai cột rồi chia lại bên trong. */
    .mp-radius { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
    .mp-radius .mp-select { min-width: 0; width: 100%; height: 44px; }

    /* Hàng 3: cùng khuôn với hàng 2 để hai ô chọn thẳng mép nhau. */
    .mp-nearby-area { grid-column: 1 / -1; width: 100%; }
    .mp-nearby-area label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; }
    .mp-nearby-area .mp-combo { width: 100%; }
    .mp-nearby-area .mp-combo-input { width: 100%; height: 44px; }
}

/* 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-req { color: #dc3545; margin-left: 2px; }
.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; } }
/* Ngày · Giờ · Giờ kết thúc (SF-MATCHUP-002 FR-22) — điện thoại: ngày một hàng, hai ô giờ chung hàng dưới. */
.mp-form .three { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .mp-form .three { grid-template-columns: 1fr 1fr; } .mp-form .three > :first-child { grid-column: 1 / -1; } }
.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. */
/* ── Thư viện ảnh trang sân ────────────────────────────────────────────────────────────────────
   Công tắc là Ô CHỌN ẨN, không phải mốc neo trên đường dẫn: mốc neo buộc trình duyệt ghi một mốc
   lịch sử cho mỗi lượt mở và mỗi lượt đóng, xem 4 ảnh là khách phải bấm Lui 9 lần mới rời trang.
   Ô chọn không chạm đường dẫn nên không sinh mốc nào. Vẫn không một dòng JavaScript. */
.mp-gal-switch { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.mp-carousel-wrap { position: relative; }
.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; cursor: zoom-in; }
.mp-slide img { display: block; width: 100%; height: 320px; object-fit: cover; }
.mp-slide:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }

/* Ô lấp cho sân CHỈ CÓ MỘT ảnh — chỗ lấp, không phải ảnh của sân: không bấm được, không phóng to,
   nền nhạt và ảnh mờ để mắt đọc ra ngay là khung trống. */
.mp-slide-fill { cursor: default; background: color-mix(in srgb, var(--c) 6%, var(--line)); display: grid; place-items: center; }
/* Có ô lấp nghĩa là sân đúng một ảnh: cho ảnh thật và ô lấp CHIA ĐÔI hàng. Để nguyên bề rộng cố
   định thì hai ô cộng lại vượt bề ngang dải và đẻ ra thanh cuộn chỉ để cuộn tới một ô trống.
   Đo thật 02/10 ở màn 1024-1440px: một ảnh để lại khoảng trống 466-488px, đúng một ô. */
.mp-carousel:has(.mp-slide-fill) .mp-slide { flex: 1 1 0; width: auto; min-width: 0; }
.mp-slide-fill img { width: auto; max-width: 62%; height: auto; max-height: 56%; object-fit: contain; opacity: 0.4; }

/* Nút lướt dải ảnh. Khung rộng dùng chuột thì không vuốt được — nút là đường duy nhất. */
.mp-carousel-nav { position: absolute; top: calc(50% - 5px); transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,0.94); box-shadow: 0 4px 14px rgba(0,0,0,0.22); color: var(--text); font-size: 24px; font-weight: 800; line-height: 1; cursor: pointer; user-select: none; }
.mp-carousel-nav:hover { background: #fff; color: var(--c); }
.mp-carousel-prev { left: 8px; }
.mp-carousel-next { right: 8px; }

.mp-carousel-hint { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--text-dim); }

/* Ảnh khổ lớn phủ trên trang (FR-28 · FR-29). Ô chọn đang bật quyết định khối nào hiện — ô chọn
   là anh em đứng TRƯỚC nên bộ chọn "~" với tới được. Ô số 0 là trạng thái đóng. */
.mp-lightbox { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 40px); }
#gal-venue-1:checked     ~ .mp-lb-1,  #gal-directory-1:checked ~ .mp-lb-1,
#gal-venue-2:checked     ~ .mp-lb-2,  #gal-directory-2:checked ~ .mp-lb-2,
#gal-venue-3:checked     ~ .mp-lb-3,  #gal-directory-3:checked ~ .mp-lb-3,
#gal-venue-4:checked     ~ .mp-lb-4,  #gal-directory-4:checked ~ .mp-lb-4,
#gal-venue-5:checked     ~ .mp-lb-5,  #gal-directory-5:checked ~ .mp-lb-5,
#gal-venue-6:checked     ~ .mp-lb-6,  #gal-directory-6:checked ~ .mp-lb-6,
#gal-venue-7:checked     ~ .mp-lb-7,  #gal-directory-7:checked ~ .mp-lb-7,
#gal-venue-8:checked     ~ .mp-lb-8,  #gal-directory-8:checked ~ .mp-lb-8 { display: flex; }

.mp-lightbox-veil { position: absolute; inset: 0; background: rgba(14,22,17,0.84); cursor: zoom-out; }
.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; cursor: pointer; }
.mp-lightbox-x:hover { background: #fff; color: var(--c); }

/* Chuyển ảnh ngay trong khổ lớn — thiếu nó thì khách phải đóng ra bấm lại từng tấm. */
.mp-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--text); font-size: 30px; font-weight: 800; line-height: 1; cursor: pointer; user-select: none; }
.mp-lightbox-nav:hover { background: #fff; color: var(--c); }
.mp-lightbox-prev { left: clamp(10px, 3vw, 28px); }
.mp-lightbox-next { right: clamp(10px, 3vw, 28px); }
.mp-lightbox-count { position: absolute; bottom: clamp(14px, 3vw, 26px); left: 50%; transform: translateX(-50%); padding: 5px 13px; border-radius: 999px; background: rgba(14,22,17,0.72); color: #fff; font-size: 13px; font-weight: 700; }

/* Khung hẹp: một ảnh đã phủ kín hàng nên KHÔNG còn chỗ trống để lấp — giấu ô lấp đi, đừng bắt
   khách vuốt qua một ô giả. Vuốt chạy tốt ở đây nên nút lướt dải cũng thừa; nút trong khổ lớn
   thì GIỮ, vì không có cách nào khác để sang ảnh kế tiếp. */
@media (max-width: 680px) {
  .mp-slide { width: 88%; }
  .mp-slide img { height: 210px; }
  /* Phải nhắc cả `.mp-venue-top` mới thắng được `.mp-venue-top .mp-slide { display: flex }`
     ở trên — luật đó độ ưu tiên cao hơn nên một mình `.mp-slide-fill` không đè nổi. */
  .mp-slide-fill, .mp-venue-top .mp-slide-fill { display: none; }
  .mp-carousel-nav { display: none; }
  .mp-lightbox-nav { width: 44px; height: 44px; font-size: 26px; }
}

.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; }

/* ── [SF-MARKETPLACE-029] Trang tin ─────────────────────────────────────────────────────────────── */
.mp-news { margin-top: 28px; }
.mp-news-h2 { font-size: 1.25rem; font-weight: 800; margin: 0; }
.mp-news-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mp-news-more { font-size: 13.5px; font-weight: 800; color: var(--c); text-decoration: none; }
.mp-news-chips { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 14px; margin-bottom: 6px; scrollbar-width: none; }
.mp-news-chips::-webkit-scrollbar { display: none; }
.mp-news-chips .mp-chip-btn { white-space: nowrap; }
.mp-news-chips .mp-chip-btn[aria-current="page"] { color: #fff; background: var(--c); border-color: var(--c); }
.mp-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mp-news-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); transition: transform .15s ease, box-shadow .15s ease; }
.mp-news-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28, 43, 33, 0.08); }
.mp-news-thumb { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--c-soft), color-mix(in srgb, var(--c) 35%, var(--card))); }
.mp-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-news-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.mp-news-cat { align-self: flex-start; font-size: 11.5px; font-weight: 800; color: var(--green-dim); background: var(--c-soft); border-radius: 999px; padding: 3px 9px; text-decoration: none; }
.mp-news-title { font-size: 1.02rem; font-weight: 800; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-news-summary { font-size: 14px; color: var(--text-dim); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mp-news-date { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.mp-news-back { text-align: center; margin-top: 12px; }

.mp-article { max-width: 760px; margin: 0 auto; padding-top: 8px; }
.mp-article-title { font-weight: 800; font-size: clamp(1.6rem, 4.5vw, 2.4rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 12px; }
.mp-article-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 0 0 18px; }
.mp-article-cover { width: 100%; border-radius: var(--radius); display: block; margin-bottom: 22px; }
.mp-article-body { font-size: 1.04rem; line-height: 1.75; overflow-wrap: anywhere; }
.mp-article-body h2, .mp-article-body h3, .mp-article-body h4 { line-height: 1.3; margin: 1.6em 0 0.6em; }
.mp-article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.mp-article-body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; }
.mp-article-body a { color: var(--c); }
.mp-article-body blockquote { margin: 1.2em 0; padding: 4px 16px; border-left: 4px solid var(--c); color: var(--text-dim); }
.mp-article-body pre { overflow-x: auto; background: var(--ground); padding: 12px; border-radius: 10px; }
.mp-article-cta { margin: 28px 0 8px; }
.mp-hchip-news { text-decoration: none; }

@media (max-width: 900px) {
    .mp-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .mp-news-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- tìm kèo: tài khoản người chơi (SF-MATCHUP-001) ---- */
.mp-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--c-soft); color: var(--c); font-weight: 900; font-size: 14px; }
.mp-avatar-lg { width: 56px; height: 56px; font-size: 22px; flex: none; }
.mp-player-menu { position: relative; }
.mp-player-menu > summary { list-style: none; cursor: pointer; display: flex; }
.mp-player-menu > summary::-webkit-details-marker { display: none; }
.mp-player-menu-box { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; display: grid; gap: 2px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(28,43,33,0.12); z-index: 50; }
.mp-player-menu-box .who { padding: 6px 10px 8px; font-size: 13px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-player-menu-box a, .mp-player-menu-box button { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--text); background: none; border: 0; cursor: pointer; }
.mp-player-menu-box a:hover, .mp-player-menu-box button:hover { background: var(--c-soft); }
/* [SF-MATCHUP-009] Quả chuông — cùng hộp thả của menu tài khoản */
.mp-bell { position: relative; }
.mp-bell > summary { list-style: none; cursor: pointer; position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; }
.mp-bell > summary::-webkit-details-marker { display: none; }
.mp-bell-count { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d1452f; color: #fff; font-size: 11px; font-weight: 900; line-height: 18px; text-align: center; }
.mp-bell-box { min-width: 280px; max-width: min(360px, calc(100vw - 32px)); }
.mp-bell-box a { font-weight: 500; white-space: normal; line-height: 1.35; }
.mp-bell-box a.is-unread { font-weight: 800; }
.mp-bell-box .mp-bell-all { text-align: center; color: var(--c); font-weight: 800; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; }
.mp-bell-empty { padding: 8px 10px; font-size: 13px; color: var(--text-dim); }
.mp-notice-list { display: grid; gap: 6px; margin: 12px 0; padding: 0; list-style: none; }
.mp-notice-list a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.mp-notice-list a.is-unread { font-weight: 800; background: var(--c-soft); }
.mp-notice-list .when { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.mp-account { max-width: 560px; margin-left: auto; margin-right: auto; }
.mp-player-who { display: flex; gap: 14px; align-items: flex-end; }
.mp-player-who > div { flex: 1; }
.mp-check { display: flex !important; gap: 10px; align-items: flex-start; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--text) !important; margin: 8px 0 0 !important; cursor: pointer; }
.mp-check input { width: 18px !important; height: 18px; margin: 2px 0 0; flex: none; }
.mp-check-strong { font-weight: 800 !important; }
.mp-hint { margin: 4px 0 0; font-size: 12.5px; color: var(--text-dim); }
.mp-alert { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.mp-alert-error { background: #fdecea; color: #a12a1b; }
.mp-alert-ok { background: var(--green-soft); color: var(--green-dim); }
.mp-account-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.mp-danger > summary { list-style: none; }
.mp-danger > summary::-webkit-details-marker { display: none; }
.mp-btn-danger { color: #b3261e; border-color: color-mix(in srgb, #b3261e 35%, var(--line)); }
.mp-btn-danger.is-disabled { opacity: 0.45; pointer-events: none; }
.mp-btn-danger-solid { color: #fff; background: #b3261e; border-color: #b3261e; }
.mp-danger-box { margin-top: 10px; padding: 12px 14px; border: 1px solid #f3c7c2; border-radius: 12px; background: #fff7f6; font-size: 14px; }
.validation-message { color: #a12a1b; font-size: 12.5px; font-weight: 600; margin-top: 4px; }

/* ---- tìm kèo: form đăng kèo · Kèo của tôi (SF-MATCHUP-002) ---- */
/* Khuôn chung là .mp-select; trong form chỉ giãn hết bề ngang, cao bằng ô nhập bên cạnh, nền theo nền ô nhập. */
.mp-form select { width: 100%; height: 44px; font-size: 14px; font-weight: 600; background-color: var(--ground); }
.mp-account-wide { max-width: 760px; }
.mp-account-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mp-account-head h1 { margin: 0; }
.mp-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-seg button { flex: 1 1 auto; min-height: 42px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 800; color: var(--text); background: var(--ground); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.mp-seg button.on { color: #fff; background: var(--c); border-color: var(--c); }
.mp-seg-lg button { min-height: 52px; font-size: 15px; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.mp-chips .mp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--c-soft); color: var(--text); font-size: 13.5px; font-weight: 700; }
.mp-chips .mp-chip button { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--text-dim); }
.mp-venue-search { display: flex; gap: 8px; }
.mp-venue-search input { flex: 1; }
.mp-venue-results { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mp-venue-results li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.mp-venue-results li:first-child { border-top: 0; }
.mp-venue-results .mp-btn { min-height: 34px; padding: 0 12px; }
.mp-post-preview { padding: 14px 16px; border: 1.5px dashed color-mix(in srgb, var(--c) 45%, var(--line)); border-radius: 14px; background: var(--card); }
.mp-post-preview b { display: block; font-size: 15px; margin: 2px 0 4px; }
.mp-post-preview .note, .mp-post-preview .phone { margin: 2px 0; font-size: 13.5px; color: var(--text-dim); }
.mp-post-preview .phone { color: var(--text); font-weight: 800; }
.mp-my-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mp-my-post { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.mp-my-post .head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mp-my-post .title { font-weight: 800; font-size: 14.5px; text-decoration: none; }
.mp-my-post .note { margin: 4px 0 8px; font-size: 13px; color: var(--text-dim); }
.mp-my-post .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-my-post .actions .mp-btn { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.mp-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--ground); color: var(--text-dim); }
.mp-status-open { background: var(--green-soft); color: var(--green-dim); }
.mp-status-started { background: #fff4dc; color: #8a5b00; }
.mp-status-removed { background: #fdecea; color: #a12a1b; }

/* ---- tìm kèo: cổng, bảng kèo, thẻ kèo, chi tiết (SF-MATCHUP-003) ---- */
.mp-h2 { font-size: 1.15rem; font-weight: 900; margin: 22px 0 10px; }
.mp-match-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mp-match-tile { display: grid; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-decoration: none; }
.mp-match-tile b { font-size: 15px; }
.mp-match-tile span { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.mp-match-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.mp-match-filters select { flex: 1 1 140px; }
.mp-match-list { display: grid; gap: 12px; }
@media (min-width: 560px) { .mp-match-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
/* Thẻ kèo: cột dọc, khối .mp-mbottom đẩy xuống đáy → thẻ cùng hàng cao bằng nhau và thẳng nút liên hệ. */
.mp-mcard { --sc-soft: color-mix(in srgb, var(--sc, var(--c)) 12%, #fff); --sc-ink: color-mix(in srgb, var(--sc, var(--c)) 72%, #000);
    display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.mp-mcard:hover { border-color: color-mix(in srgb, var(--sc, var(--c)) 40%, var(--line)); box-shadow: 0 8px 22px rgba(28, 43, 33, 0.08); transform: translateY(-1px); }
.mp-mcard .mp-i { color: var(--sc, var(--c)); }
.mp-mtags { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--ground); font-size: 12.5px; font-weight: 700; color: var(--text); }
.mp-tag .mp-i { width: 14px; height: 14px; }
.mp-tag.is-kind { background: var(--sc-soft); color: var(--sc-ink); font-weight: 800; }
.mp-mcard .meta .mp-i { width: 15px; height: 15px; }
.mp-mbottom { margin-top: auto; display: grid; gap: 10px; }
.mp-mcard footer .note { margin-right: auto; display: inline-flex; align-items: center; gap: 5px; }
.mp-mcard footer .note .mp-i { width: 14px; height: 14px; color: var(--text-dim); }
.mp-mcomments { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--text-dim); text-decoration: none; }
.mp-mcomments .mp-i { width: 15px; height: 15px; }
.mp-mcard.is-started { opacity: 0.72; }
.mp-mcard .who { display: flex; align-items: center; gap: 10px; }
.mp-mcard .who b { font-size: 14px; }
.mp-mcard .who .name { display: grid; gap: 1px; }
.mp-mcard.is-venue { border-left: 4px solid var(--sc, var(--c)); }
.mp-mcard.is-venue .mp-avatar { border-radius: 10px; object-fit: cover; }
.mp-mcard .who { flex-wrap: wrap; }
.mp-mcard .who .name { min-width: 0; flex: 1 1 0; }
.mp-mcard .who .name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-mcard .who .name small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--text-dim); font-weight: 600; }
.mp-mcard .who .mp-status { flex: none; }
.mp-mcard .who .mp-mreport { flex: none; }
.mp-mcard .t { font-weight: 900; font-size: 15.5px; text-decoration: none; line-height: 1.35; }
.mp-mcard .meta { margin: 0; font-size: 13.5px; color: var(--text-dim); font-weight: 600; }
.mp-mcard .note { margin: 0; font-size: 13.5px; color: var(--text-dim); white-space: pre-line; }
.mp-mcard .note.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mp-mcard.is-compact .note.clamp { -webkit-line-clamp: 2; }
.mp-mcontact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; padding: 8px 10px; border-radius: 12px; background: var(--ground); }
.mp-mcontact .phone { font-size: 15px; letter-spacing: 0.02em; }
.mp-mcontact .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-mcontact .mp-btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
.mp-mcontact .ph { font-size: 13px; color: var(--text-dim); }
.mp-mcard footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mp-mcard footer .note { font-size: 12.5px; }
/* Bấm cả thẻ mở chi tiết: liên kết tiêu đề phủ kín thẻ, mọi nút / liên kết / hộp khác nổi lên trên để bấm riêng. */
.mp-mcard.is-link { position: relative; cursor: pointer; }
.mp-mcard.is-link > .t { position: absolute; inset: 0; z-index: 0; border-radius: inherit; font-size: 0; color: transparent; }
.mp-mcard.is-link :is(a:not(.t), button, details, .mp-mcontact) { position: relative; z-index: 1; }
.mp-mshare { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--sc-ink, var(--c)); cursor: pointer; }
.mp-mshare .mp-i { width: 15px; height: 15px; }
/* Thẻ kèo: hai ô Giờ chơi / Ngày chơi, chip chi phí, nút Xem thêm của ghi chú (SF-MATCHUP-003 mục 7). */
.mp-mwhen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-mbox { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; }
.mp-mbox .mp-i { width: 19px; height: 19px; color: var(--sc, var(--c)); }
.mp-mbox > span { display: grid; min-width: 0; line-height: 1.25; }
.mp-mbox small { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.mp-mbox b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.3; }
.mp-tag.is-cost { background: var(--sc, var(--c)); color: #fff; font-weight: 800; }
.mp-tag.is-cost .mp-i, .mp-mcard .mp-tag.is-cost .mp-i { color: #fff; }
.mp-mmore { align-self: flex-start; margin-top: -6px; font-size: 13px; font-weight: 800; color: var(--sc-ink, var(--c)); text-decoration: none; }
.mp-mmore[hidden] { display: none; }
.mp-mcard .note.open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.mp-mfoot-end { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.mp-match-title { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 0; text-wrap: balance; }
/* [SF-MATCHUP-008] Khối bình luận — một vùng riêng có nền và khung, tách hẳn khỏi thẻ kèo phía trên. */
.mp-comments { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--ground) 70%, var(--card)); }
.mp-comments > .mp-h2 { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mp-comments-empty { margin: 12px 0 0; }
/* Mỗi bình luận là một dòng phẳng: ảnh tròn bên trái, tên + giờ + ⋯ trên một dòng, nội dung ngay dưới. */
.mp-comment-list { list-style: none; margin: 0; padding: 0; }
.mp-comment { position: relative; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mp-comment .body { min-width: 0; }
.mp-comment header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.mp-comment header .when { font-size: 12px; color: var(--text-dim); }
.mp-comment header .mp-mreport { margin-left: auto; }
.mp-comment .text { margin: 3px 0 0 42px; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.mp-comment .mp-avatar, .mp-comment-form .mp-avatar { width: 32px; height: 32px; font-size: 13px; }
.mp-avatar .mp-i { width: 16px; height: 16px; }
.mp-comment-owner { font-size: 11px; font-weight: 900; color: var(--c); background: var(--c-soft); padding: 2px 8px; border-radius: 999px; }
/* Ô viết: cùng nhịp với một dòng bình luận — ảnh tròn + một khung gộp tên (khách), nội dung, nút Gửi nhỏ ở góc. */
.mp-comment-form { display: grid; grid-template-columns: 32px 1fr; gap: 10px; margin-top: 14px; }
.mp-comment-form .box { display: grid; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.mp-comment-form .box:focus-within { border-color: var(--c); }
.mp-comment-form .who { font-size: 13px; font-weight: 800; }
.mp-comment-form input, .mp-comment-form textarea { width: 100%; box-sizing: border-box; border: 0; padding: 0; background: transparent; font: inherit; font-size: 14px; line-height: 1.5; color: var(--text); outline: none; resize: none; }
.mp-comment-form input { font-size: 13px; font-weight: 800; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
/* Ô tự giãn theo nội dung (marketplace.js — data-mp-autogrow): 3 dòng lúc đầu, quá 8 dòng mới cuộn. */
.mp-comment-form textarea { min-height: 4.5em; max-height: 12em; overflow-y: auto; }
.mp-comment-form .foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.mp-comment-form .foot .validation-message { margin: 0 auto 0 0; }
.mp-comment-form .foot .mp-btn { min-height: 36px; padding: 0 16px; font-size: 13px; border-radius: 999px; }
.mp-comment-form .foot .mp-btn .mp-i { width: 14px; height: 14px; }
.mp-mreport > summary { list-style: none; cursor: pointer; padding: 0 8px; font-size: 18px; color: var(--text-dim); }
.mp-mreport > summary::-webkit-details-marker { display: none; }
.mp-mreport[open] { flex-basis: 100%; }
.mp-mreport[open] > summary { text-align: right; }
.mp-mreport form { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.mp-match-detail { display: grid; gap: 12px; max-width: 760px; }

/* ---- tìm kèo trên trang sân (SF-MATCHUP-004) ---- */
.mp-venue-matchup .mp-match-list { margin: 10px 0; }
.mp-venue-matchup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mp-match-today { position: relative; z-index: 2; display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--green-dim); text-decoration: none; }
.mp-match-clear { font-weight: 800; }

/* ---- Biểu tượng trên mọi thứ bấm được (luật chung 1-platform/implementation-guide.md) ---- */
/* Nút: biểu tượng ăn màu chữ của nút — nút chính chữ trắng thì biểu tượng trắng, kể cả trong thẻ kèo. */
.mp-btn { gap: 7px; }
.mp-btn .mp-i, .mp-mcard .mp-btn .mp-i, .mp-searchbar button .mp-i { width: 17px; height: 17px; color: currentColor; vertical-align: 0; }
.mp-searchbar button { display: inline-flex; align-items: center; gap: 6px; }
/* Menu tài khoản + chuông */
.mp-player-menu-box a, .mp-player-menu-box button { display: flex; align-items: center; gap: 10px; }
.mp-player-menu-box .mp-i { width: 17px; height: 17px; color: var(--c); }
.mp-bell-box a .mp-i { display: none; }
.mp-bell-box .mp-bell-all { justify-content: center; }
.mp-bell-box .mp-bell-all .mp-i { display: inline-block; width: 15px; height: 15px; }
.mp-bell > summary .mp-i { width: 21px; height: 21px; color: var(--text); vertical-align: 0; }
/* Liên kết đứng riêng: biểu tượng nhỏ cùng dòng chữ */
.mp-go, .mp-map, .see-all, .mp-match-clear, .mp-match-today, .mp-chip-btn, .mp-news-cat, .mp-eyebrow a, .mp-sub a, .mp-hint a, .mp-mshare, .mp-mcard .meta a {
    display: inline-flex; align-items: center; gap: 5px; }
.mp-go .mp-i, .mp-map .mp-i, .mp-chip-btn .mp-i, .mp-news-cat .mp-i { width: 14px; height: 14px; color: currentColor; vertical-align: 0; }
.mp-chip-btn.on .mp-i, .mp-go .mp-i { color: currentColor; }
.mp-eyebrow a { text-decoration: none; }
.mp-eyebrow a .mp-i { width: 14px; height: 14px; color: currentColor; }
.mp-crumb .mp-i { width: 13px; height: 13px; color: var(--text-dim); vertical-align: -2px; }
.mp-crumb a .mp-i { color: var(--c); }
.mp-verified { display: inline-flex; align-items: center; gap: 4px; }
.mp-verified .mp-i { width: 13px; height: 13px; color: currentColor; }
.mp-footer a { display: inline-flex; align-items: center; gap: 5px; }
.mp-footer a .mp-i { width: 14px; height: 14px; color: currentColor; }
.mp-place .go .mp-i { width: 20px; height: 20px; color: var(--c); vertical-align: 0; }
.mp-mreport > summary { display: inline-flex; align-items: center; }
.mp-mreport > summary .mp-i { width: 20px; height: 20px; color: var(--text-dim); }
/* Tìm kèo: tiêu đề nhóm và ô chọn mang biểu tượng môn / khu vực, tô màu môn */
.mp-h2-icon { display: flex; align-items: center; gap: 8px; }
.mp-h2-icon .mp-i { width: 22px; height: 22px; color: var(--sc, var(--c)); }
.mp-match-tile b { display: flex; align-items: center; gap: 7px; }
.mp-match-tile b .mp-i { width: 19px; height: 19px; color: var(--sc, var(--c)); }
.mp-match-tile:hover { border-color: var(--sc, var(--c)); }

/* ---- Khung chọn chung Sân | Kèo (SF-MATCHUP-003 mục 7 · SF-MARKETPLACE-012 mục 7) ---- */
/* Đầu trang: tiêu đề bên trái, hai tab bên phải; danh sách bên trái, cột chọn môn / tỉnh / xã bên phải. Hẹp hơn 860px
   thì cột chọn lên trên danh sách thành các hàng chip cuộn ngang. */
.mp-pick-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; margin-bottom: 14px; }
.mp-pick-head .mp-h1 { margin: 0; }
.mp-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.mp-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; font-weight: 800; font-size: 14px; color: var(--text-dim); text-decoration: none; }
.mp-tab .mp-i { width: 17px; height: 17px; color: currentColor; vertical-align: 0; }
.mp-tab .count { font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--ground); color: var(--text-dim); }
.mp-tab.on { background: var(--c); color: #fff; }
.mp-tab.on .count { background: rgba(255, 255, 255, 0.22); color: #fff; }
.mp-pick { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
.mp-pick-main { min-width: 0; }
.mp-pick-count { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--text-dim); }
.mp-pick-count b { color: var(--text); }
.mp-picker { position: sticky; top: 16px; display: grid; gap: 18px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.mp-picker h3 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--text-dim); }
.mp-picker-sports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mp-picker-sport { position: relative; display: grid; justify-items: center; gap: 5px; padding: 12px 6px 10px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); text-decoration: none; text-align: center; color: var(--text); font-weight: 700; font-size: 12.5px; --sc-x: var(--sc, var(--c)); }
.mp-picker-sport .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--sc-x) 12%, #fff); color: var(--sc-x); }
.mp-picker-sport .ic .mp-i { width: 22px; height: 22px; color: currentColor; vertical-align: 0; }
.mp-picker-sport .n { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.mp-picker-sport:hover { border-color: color-mix(in srgb, var(--sc-x) 45%, var(--line)); }
.mp-picker-sport.on { border-color: var(--sc-x); background: color-mix(in srgb, var(--sc-x) 7%, #fff); }
.mp-picker-sport.on::after { content: ""; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--sc-x) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.mp-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-picker-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-weight: 700; font-size: 13px; color: var(--text); text-decoration: none; white-space: nowrap; }
.mp-picker-chip .mp-i { width: 14px; height: 14px; color: var(--c); vertical-align: 0; }
.mp-picker-chip small { font-size: 11px; font-weight: 800; color: var(--text-dim); }
.mp-picker-chip:hover { border-color: var(--c); }
.mp-picker-chip.on { background: var(--c); border-color: var(--c); color: #fff; }
.mp-picker-chip.on .mp-i, .mp-picker-chip.on small { color: #fff; }
/* [SF-MARKETPLACE-010 FR-7 · FR-8] Nhớ môn + khu vực — dòng cuối khung chọn. */
.mp-picker-memo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; font-weight: 700; color: var(--text-dim); }
.mp-picker-memo .mp-i { width: 14px; height: 14px; vertical-align: -2px; color: var(--c); }
.mp-picker-memo.is-on { color: var(--text); }
.mp-picker-memo-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: inherit; font-weight: 700; color: var(--text); cursor: pointer; }
.mp-picker-memo-btn:hover { border-color: var(--c); }
.mp-picker-memo-btn:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
@media (max-width: 860px) {
    .mp-pick { grid-template-columns: minmax(0, 1fr); }
    .mp-picker { position: static; order: -1; padding: 12px; gap: 10px; }
    .mp-picker h3 { margin-bottom: 6px; }
    .mp-picker-sports, .mp-picker-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; padding-bottom: 2px; }
    .mp-picker-sport { flex: 0 0 auto; grid-auto-flow: column; align-items: center; padding: 6px 12px 6px 6px; border-radius: 999px; gap: 6px; }
    .mp-picker-sport .ic { width: 26px; height: 26px; border-radius: 50%; }
    .mp-picker-sport .ic .mp-i { width: 16px; height: 16px; }
    .mp-picker-sport .n { display: none; }
    .mp-picker-sport.on::after { display: none; }
}

/* [SF-MATCHUP-001 FR-19] Nút Đăng nhập Zalo trên thanh đầu trang khi chưa đăng nhập. */
.mp-hchip-login { text-decoration: none; color: #fff; background: var(--c); border-color: var(--c); }
.mp-hchip-login .mp-i { color: #fff; }
@media (max-width: 640px) { .mp-hchip-login .zalo { display: none; } }

/* [SF-MATCHUP-008 FR-17] Tài khoản: ảnh màu môn + dấu ✓ · Ẩn danh: ảnh xám + nhãn "Ẩn danh". */
.mp-avatar.is-guest { background: color-mix(in srgb, var(--text-dim) 16%, var(--card)); color: var(--text-dim); }
.mp-avatar.is-guest .mp-i { color: currentColor; }
.mp-member { display: inline-grid; place-items: center; color: var(--c); }
.mp-member .mp-i { width: 14px; height: 14px; color: currentColor; }
.mp-guest-tag { font-size: 11px; font-weight: 800; color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, var(--card)); padding: 2px 8px; border-radius: 999px; }
.mp-comment.is-guest > .body > header > b { color: var(--text-dim); }

/* [SF-MATCHUP-003 FR-26] Hồ sơ nhanh: bấm ảnh / tên → ô bật ngay dưới, nổi trên các thẻ khác. */
.mp-pcard { position: relative; flex: 1 1 0; min-width: 0; }
.mp-pcard[open] { z-index: 3; }
.mp-comment header .mp-pcard { flex: none; }
.mp-pcard > summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; border-radius: 10px; }
.mp-pcard > summary::-webkit-details-marker { display: none; }
.mp-pcard > summary:hover b { text-decoration: underline; }
.mp-pcard > summary:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.mp-mcard, .mp-comment { position: relative; }
.mp-mcard:has(.mp-pcard[open]), .mp-comment:has(.mp-pcard[open]) { z-index: 5; }
.mp-pcard-box { position: absolute; left: 0; top: calc(100% + 8px); z-index: 6; display: flex; gap: 12px; align-items: center; width: max-content; max-width: min(320px, 80vw);
    padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 28px rgba(28, 43, 33, 0.16); }
.mp-pcard-info { display: grid; gap: 3px; min-width: 0; font-size: 13px; color: var(--text-dim); font-weight: 600; }
.mp-pcard-info b { font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.mp-pcard-info span { display: inline-flex; align-items: center; gap: 6px; }
.mp-pcard-info .mp-i { width: 14px; height: 14px; color: var(--c); }