/* Giải đấu Pickleball — giao diện nền tím (theo tông giaphangandoi.vn), chữ to, luôn đọc được */
:root {
  --bg0: #17102e; --bg1: #2B184E; --bg2: #3a2470;
  --card: #26184a; --card2: #2f1f59; --card3: #3a2870;
  --ink: #F5F3FF; --ink2: #E7E1FF; --muted: #C4B5FD; --dim: #9C8FCF;
  --line: rgba(196,181,253,.22); --line-s: rgba(196,181,253,.38);
  --brand: #8B5CF6; --brand-h: #7C4DEF; --brand-deep: #6E3CF3; --brand-ink: #ffffff; --brand-soft: rgba(139,92,246,.26); --brand-text: #D6C8FF;
  --accent: #F59E0B; --accent-soft: rgba(245,158,11,.22); --accent-text: #FFD27A;
  --danger: #F87171; --danger-soft: rgba(239,68,68,.22); --ok: #34D399; --ok-soft: rgba(52,211,153,.2); --live: #FB923C; --live-soft: rgba(251,146,60,.22);
  --radius: 14px; --shadow: 0 2px 6px rgba(0,0,0,.25), 0 12px 30px rgba(0,0,0,.25);
  --fs: 17px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg1) radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0) 0 0/22px 22px; background-attachment: fixed; color: var(--ink); font: var(--fs)/1.5 "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; }
body:before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(160deg, #1a1136 0%, #2B184E 45%, #4527a0 100%); }
a { color: var(--brand-text); text-decoration: none; }
a:hover { text-decoration: underline; color: #fff; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; color: #fff; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.45rem; } h3 { font-size: 1.2rem; } h4 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
.loading { padding: 3rem; text-align: center; color: var(--muted); }
code { background: rgba(0,0,0,.25); padding: 1px 6px; border-radius: 6px; color: var(--ink2); }
hr { border: 0; border-top: 1px solid var(--line); }

/* Bố cục */
.topbar { background: rgba(15,10,30,.92); color: #fff; padding: 0 16px; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 12px rgba(0,0,0,.35); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar .in { max-width: 1300px; margin: 0 auto; display: flex; align-items: center; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.topbar .brand { font-weight: 800; font-size: 1.2rem; color: #fff; display: flex; align-items: center; gap: 10px; }
.topbar .brand .ball { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff59b, #f2c400 60%, #d9a400); box-shadow: 0 0 0 3px rgba(139,92,246,.5); position: relative; }
.topbar .brand .ball:after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,.2) 1.2px, transparent 1.6px) 0 0/6px 6px; }
.topbar .spacer { flex: 1; }
.topbar a { color: #fff; opacity: .92; font-weight: 600; }
.topbar .status-pill { background: var(--brand); padding: 4px 12px; border-radius: 99px; font-size: .85rem; font-weight: 700; }
.wrap { max-width: 1300px; margin: 0 auto; padding: 20px 16px 70px; }
.wrap.narrow { max-width: 680px; }
.wrap.wide { max-width: 1600px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-bottom: 18px; }
.card.tight { padding: 10px 12px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.right { text-align: right; }
.mt { margin-top: 14px; } .mb0 { margin-bottom: 0; }
.footer { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 30px; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 12px 16px; cursor: pointer; color: var(--muted); font-weight: 700; font-size: 1.02rem; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tabs button.active { color: #fff; border-bottom-color: var(--brand); }
.tabs button:hover { color: #fff; }

/* Nút */
.btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #6E3CF3, #4F46E5); color: #fff; border: 0; border-radius: 11px; padding: 11px 18px; font-weight: 700; cursor: pointer; text-decoration: none; box-shadow: 0 3px 12px rgba(139,92,246,.3); }
.btn:hover { filter: brightness(1.12); text-decoration: none; color: #fff; }
.btn.sec { background: var(--brand-soft); color: #fff; box-shadow: none; border: 1px solid var(--line-s); }
.btn.ghost { background: rgba(255,255,255,.06); color: var(--ink2); border: 1px solid var(--line-s); box-shadow: none; }
.btn.warn { background: linear-gradient(135deg, #F59E0B, #F97316); color: #1f1200; }
.btn.danger { background: var(--danger-soft); color: #FFB4B4; box-shadow: none; border: 1px solid rgba(248,113,113,.4); }
.btn.sm { padding: 6px 12px; font-size: .92rem; border-radius: 8px; }
.btn.big { padding: 16px 22px; font-size: 1.15rem; width: 100%; justify-content: center; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Form */
label.f { display: block; margin-bottom: 14px; }
label.f span { display: block; font-size: .92rem; color: var(--muted); margin-bottom: 5px; font-weight: 700; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=week], input[type=tel], input[type=email], input[type=url], input[type=search], select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line-s); border-radius: 10px; background: #1b1238; color: #fff; }
input::placeholder, textarea::placeholder { color: var(--dim); }
select option { background: #1b1238; color: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=week] { color-scheme: dark; }
/* nút lịch/đồng hồ trong ô ngày giờ: đảo màu cho nổi trên nền tối */
input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .85; cursor: pointer; }
input[type=time]::-webkit-datetime-edit, input[type=date]::-webkit-datetime-edit, input[type=datetime-local]::-webkit-datetime-edit { color: inherit; }
textarea { min-height: 90px; resize: vertical; }
.check { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); }
.help { font-size: .9rem; color: var(--muted); margin-top: 4px; }
details summary { color: var(--muted); }

/* Bảng */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; }
td.num, th.num { text-align: center; font-variant-numeric: tabular-nums; }
tr.top td { background: var(--brand-soft); }
.tbl-wrap { overflow-x: auto; }

/* Badge, chip */
.badge { display: inline-block; padding: 3px 11px; border-radius: 99px; font-size: .82rem; font-weight: 800; background: rgba(255,255,255,.1); color: var(--ink2); }
.badge.ok { background: var(--ok-soft); color: #A7F3D0; }
.badge.warn { background: var(--accent-soft); color: var(--accent-text); }
.badge.live { background: var(--live-soft); color: #FFC49A; }
.badge.danger { background: var(--danger-soft); color: #FFB4B4; }
.chip { display: inline-block; background: var(--brand-soft); color: #fff; border-radius: 99px; padding: 2px 10px; font-size: .88rem; margin: 1px 0; }
.chip.on { background: var(--ok-soft); color: #A7F3D0; }
.chip.on:before { content: "✓ "; }

/* Trận đấu */
.match { border: 1px solid var(--line-s); border-radius: 12px; background: var(--card2); overflow: hidden; min-width: 200px; }
.match .hd { display: flex; justify-content: space-between; align-items: center; padding: 5px 12px; background: rgba(0,0,0,.22); font-size: .82rem; color: var(--muted); border-bottom: 1px solid var(--line); gap: 8px; }
.match .hd b { color: #fff; font-size: .95rem; }
.match .side { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; gap: 8px; font-size: 1.05rem; }
.match .side + .side { border-top: 1px dashed var(--line); }
.match .side .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.match .side.win .nm { font-weight: 800; color: #A7F3D0; }
.match .side.tbd .nm { color: var(--dim); font-style: italic; }
.match .side .sc { font-variant-numeric: tabular-nums; font-weight: 800; display: flex; gap: 8px; font-size: 1.1rem; }
.match .side .sc span { min-width: 22px; text-align: center; }
.match .side.win .sc span { color: #A7F3D0; }
.match .side .pl { font-size: .82rem; color: var(--muted); font-weight: 400; white-space: normal; }
.match .tour { padding: 3px 12px; font-size: .82rem; color: var(--brand-text); background: var(--brand-soft); }
.match.live { border-color: var(--live); box-shadow: 0 0 0 3px var(--live-soft); }
.match.clickable { cursor: pointer; }
.match.clickable:hover { border-color: #fff; }
.match-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.eta { color: var(--accent-text); font-size: .82rem; font-weight: 700; }
.wo-badge { font-size: .78rem; color: #FFB4B4; font-weight: 800; }
.warn-line { padding: 6px 12px; background: var(--danger-soft); color: #FFB4B4; font-size: .88rem; font-weight: 700; }
.rest-line { padding: 6px 12px; background: var(--accent-soft); color: var(--accent-text); font-size: .88rem; font-weight: 700; }
.q-actions { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); background: rgba(0,0,0,.18); flex-wrap: wrap; align-items: center; }
.q-actions select { width: auto; padding: 6px 10px; font-size: .92rem; }

/* Sơ đồ nhánh cũ (dự phòng) */
.bracket-scroll { overflow-x: auto; padding-bottom: 8px; }
.bracket { display: flex; gap: 28px; align-items: stretch; min-width: max-content; }
.bracket .col { display: flex; flex-direction: column; min-width: 230px; }
.bracket .col h4 { text-align: center; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.bracket .col .cells { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.bracket-section { margin-bottom: 22px; }

/* Bảng điểm trọng tài */
.scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scoreboard .team { background: var(--card3); border-radius: 14px; padding: 14px; text-align: center; border: 1px solid var(--line); }
.scoreboard .team .nm { font-weight: 800; margin-bottom: 8px; min-height: 2.6em; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; }
.scoreboard .team .pts { font-size: 3.6rem; font-weight: 900; line-height: 1; color: #fff; margin: 6px 0; font-variant-numeric: tabular-nums; }
.scoreboard .team .ctl { display: flex; gap: 10px; justify-content: center; }
.scoreboard .team .ctl button { width: 64px; height: 54px; font-size: 1.7rem; border-radius: 12px; border: 1px solid var(--line-s); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.scoreboard .team .ctl button.plus { background: linear-gradient(135deg, #6E3CF3, #4F46E5); border: 0; }
.games-list { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.games-list .g { border: 1px solid var(--line-s); border-radius: 8px; padding: 5px 12px; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--ink2); }
.games-list .g.active { border-color: var(--brand); background: var(--brand-soft); font-weight: 800; color: #fff; }

/* Thông báo, hộp thoại, menu */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #fff; color: #17102e; padding: 12px 20px; border-radius: 12px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 100; max-width: 90vw; font-weight: 700; box-shadow: var(--shadow); }
#toast.show { opacity: 1; }
#toast.err { background: #F87171; color: #fff; }
.modal-bg { position: fixed; inset: 0; background: rgba(10,6,25,.7); display: flex; align-items: flex-start; justify-content: center; z-index: 50; padding: 30px 12px; overflow-y: auto; backdrop-filter: blur(3px); }
.modal { background: var(--card); border: 1px solid var(--line-s); border-radius: 16px; width: 100%; max-width: 600px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.modal h2 { margin-bottom: 14px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.sd-menu { position: fixed; background: var(--card); color: #fff; border: 1px solid var(--line-s); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: 6px; z-index: 60; min-width: 240px; }
.sd-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 8px; cursor: pointer; color: #fff; font-size: 1rem; }
.sd-menu button:hover { background: var(--brand-soft); }
.sd-menu .hd { padding: 6px 12px; font-size: .85rem; color: var(--muted); }
.swap-bar { background: var(--brand-soft); border: 1px solid var(--brand); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: #fff; }
.conf { background: var(--danger-soft); color: #FFB4B4; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }

/* Trang giải, bục, link */
.hero { background: linear-gradient(135deg, #6E3CF3, #4F46E5 60%, #7C3AED); color: #fff; border-radius: 18px; padding: 26px; margin-bottom: 20px; box-shadow: var(--shadow); }
.hero h1 { color: #fff; margin-bottom: 6px; font-size: 2.1rem; }
.hero .meta { opacity: .95; display: flex; gap: 18px; flex-wrap: wrap; font-size: 1rem; }
.hero .btn.warn { color: #1f1200; }
.podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.podium .p { background: var(--accent-soft); border: 1px solid rgba(245,158,11,.4); border-radius: 14px; padding: 16px; text-align: center; }
.podium .p .medal { font-size: 2rem; }
.podium .p .nm { font-weight: 800; color: #fff; font-size: 1.1rem; }
.link-box { display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,.2); border: 1px dashed var(--line-s); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; flex-wrap: wrap; }
.link-box code { flex: 1; word-break: break-all; font-size: .88rem; background: none; padding: 0; }
/* danh sách đường dẫn chia sẻ: nhãn cố định, link 1 dòng (cắt "…" nếu dài, rê chuột xem đủ), nút thẳng hàng */
.link-box.lk-row { flex-wrap: nowrap; }
.link-box.lk-row .lk-lbl { flex: 0 0 185px; line-height: 1.3; }
.link-box.lk-row .lk-url { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; font-size: .84rem; }
.link-box.lk-row .btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .link-box.lk-row { flex-wrap: wrap; }
  .link-box.lk-row .lk-lbl { flex: 1 0 100%; }
}
.stat { display: flex; flex-direction: column; }
.stat b { font-size: 1.8rem; color: #fff; }
.t-card { display: block; color: inherit; }
.t-card:hover { text-decoration: none; border-color: var(--brand); color: inherit; }

/* Bàn điều phối */
.desk { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-top: 12px; }
.desk-courts, .desk-queue { min-width: 0; }
.court { border: 2px solid var(--line-s); border-radius: 14px; padding: 12px; margin-bottom: 12px; background: var(--card); }
.court.busy { border-color: var(--live); }
.court.free { border-style: dashed; }
.court-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 1.15rem; }
.q-list { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 900px) { .desk { grid-template-columns: 1fr; } }

/* Dải sân */
.court-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin: 0 0 16px; }
.cs { border: 2px solid var(--line-s); border-radius: 14px; padding: 12px 14px; background: var(--card); }
.cs.busy { border-color: var(--live); box-shadow: 0 0 0 3px var(--live-soft); }
.cs .cs-hd { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 1.1rem; color: #fff; }
.cs .cs-hd .ico { display: inline-block; width: 28px; height: 17px; border: 2px solid currentColor; border-radius: 3px; position: relative; margin-right: 8px; vertical-align: -3px; }
.cs .cs-hd .ico:after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid currentColor; }
.cs .cs-body { font-size: 1rem; margin-top: 6px; }
.cs .cs-body b { color: #A7F3D0; }
.cs .cs-sug { margin-top: 8px; font-size: .95rem; background: var(--accent-soft); border: 1px solid rgba(245,158,11,.35); color: #fff; border-radius: 10px; padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cs .cs-sug b { color: var(--accent-text); }
.cs .cs-empty { color: var(--muted); }

/* Điểm danh, QR */
.ci-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.ci-row.on { background: var(--ok-soft); }
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.qr { text-align: center; background: #fff; color: #17102e; border-radius: 12px; padding: 10px; }
.qr b, .qr a { color: #17102e; }
.qr-img { background: #fff; display: inline-block; padding: 8px; border-radius: 10px; }
.qr-img svg { width: 140px; height: 140px; display: block; }
.qr-img.big svg { width: 260px; height: 260px; }

/* Màn hình chiếu */
.screen { min-height: 100vh; padding: 18px 24px; display: flex; flex-direction: column; gap: 18px; font-size: 1.2rem; }
.s-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--line-s); padding-bottom: 8px; }
.s-title { font-size: 2.2rem; font-weight: 900; }
.s-clock { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand-text); }
.s-courts { display: grid; gap: 18px; }
.s-court { background: var(--card); border: 2px solid var(--line-s); border-radius: 18px; padding: 16px 20px; min-height: 280px; }
.s-court.busy { border-color: var(--live); box-shadow: 0 0 0 4px var(--live-soft); }
.s-court-hd { display: flex; justify-content: space-between; font-weight: 900; font-size: 1.4rem; color: var(--brand-text); margin-bottom: 6px; }
.s-live { color: var(--live); font-size: 1.05rem; }
.s-meta { color: var(--muted); font-size: 1rem; margin-bottom: 8px; }
.s-side { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 8px 0; }
.s-side.win .s-name { color: #A7F3D0; }
.s-name { grid-column: 1; font-size: 1.8rem; font-weight: 900; line-height: 1.15; color: #fff; }
.s-pl { grid-column: 1; color: var(--muted); font-size: 1rem; }
.s-score { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 10px; font-size: 3rem; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; }
.s-score span { min-width: 1.4em; text-align: center; background: rgba(0,0,0,.35); border-radius: 10px; padding: 0 8px; }
.s-vs { text-align: center; color: var(--dim); font-weight: 800; font-size: .9rem; }
.s-empty { color: var(--dim); font-size: 1.4rem; text-align: center; padding: 60px 0; }
.s-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.s-bottom h3 { color: var(--brand-text); font-size: 1rem; letter-spacing: .1em; margin-bottom: 8px; }
.s-row { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 1.15rem; }
.s-row .win { color: #A7F3D0; font-weight: 800; }
.dim { color: var(--dim); }
@media (max-width: 900px) { .s-courts { grid-template-columns: 1fr !important; } .s-bottom { grid-template-columns: 1fr; } .screen { padding: 12px; } }

/* Trang sơ đồ realtime */
.sd-bar { display: flex; gap: 12px; align-items: center; padding: 12px 18px; background: rgba(15,10,30,.92); border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px); }
.sd-bar select { width: auto; }
.sd-bar .ttl { font-weight: 900; font-size: 1.3rem; margin-right: auto; color: #fff; }
.sd-body { padding: 18px; }
.sd-body h2 { margin: 8px 0 10px; }
.sd-fit svg.sodo { width: 100%; height: auto; }
.sodo-wrap { overflow: auto; padding-bottom: 6px; }

/* Sơ đồ SVG — nền tím */
svg.sodo { font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; max-width: none; display: block; }
svg.sodo .box, svg.sodo .gbox { fill: #2a1c52; stroke: #6b55b8; stroke-width: 1.2; }
svg.sodo .shadow { fill: rgba(0,0,0,.28); }
svg.sodo .scbg { fill: rgba(255,255,255,.1); }
svg.sodo .side.win .scbg { fill: rgba(52,211,153,.35); }
svg.sodo .winbar { fill: #34D399; }
svg.sodo .dot { fill: #b7a9f0; } svg.sodo .dot.soft { fill: #7f6fc4; }
svg.sodo .rtbg { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.14); }
svg.sodo .rankbg { fill: rgba(255,255,255,.12); } svg.sodo .side.grp.top .rankbg { fill: #8B5CF6; }
svg.sodo .rankt { font-size: 11px; font-weight: 800; fill: #fff; }
svg.sodo .gw { font-weight: 800; fill: #fff; }
svg.sodo .hd { fill: #1b1240; }
svg.sodo .mb.done .box { fill: #261a4d; }
svg.sodo .mb.ready .hd { fill: #4a3a12; }
svg.sodo .hdt { font-size: 12px; fill: #C4B5FD; font-weight: 600; }
svg.sodo .hdt .code { font-weight: 800; fill: #fff; }
svg.sodo .livet { fill: #FB923C; font-weight: 800; }
svg.sodo .sep { stroke: rgba(255,255,255,.12); }
svg.sodo .sidebg { fill: transparent; }
svg.sodo .tn { font-size: 15px; fill: #fff; font-weight: 600; }
svg.sodo .tn.two, svg.sodo .gn.two { font-size: 13px; }
svg.sodo .tp { font-size: 11.5px; fill: #B4A6E8; }
svg.sodo .tn.tbd { fill: #9C8FCF; font-style: italic; }
svg.sodo .ts { font-size: 14px; fill: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
svg.sodo .side.win .sidebg { fill: rgba(52,211,153,.14); }
svg.sodo .side.win .tn, svg.sodo .side.win .ts { fill: #A7F3D0; font-weight: 800; }
svg.sodo .side.lose .tn { fill: #9C8FCF; font-weight: 500; } svg.sodo .side.lose .ts { fill: #B4A6E8; }
svg.sodo .side.elim .tn, svg.sodo .side.elim .gn { fill: #8f83c2; font-weight: 500; } svg.sodo .side.grp.elim .rankbg { fill: rgba(255,255,255,.06); }
svg.sodo .side.hit .sidebg, svg.sodo .side.hit .grow { fill: #7a5a0a !important; }
svg.sodo .side.hit .tn, svg.sodo .side.hit .gn { fill: #FFE08A; font-weight: 800; }
svg.sodo .side.sel .sidebg, svg.sodo .side.sel .grow { fill: #1d4ed8 !important; stroke: #93c5fd; stroke-width: 1.5; }
svg.sodo .ln { fill: none; stroke: #a396e0; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
svg.sodo .ln.soft { stroke: #7f6fc4; stroke-width: 1.8; opacity: .8; }
svg.sodo .rt { font-size: 11.5px; font-weight: 800; fill: #C4B5FD; letter-spacing: .08em; text-transform: uppercase; }
svg.sodo .sect { font-size: 13.5px; font-weight: 900; fill: #D6C8FF; letter-spacing: .1em; }
svg.sodo .mb.live .box { stroke: #FB923C; stroke-width: 2.4; filter: drop-shadow(0 0 6px rgba(251,146,60,.55)); }
svg.sodo .mb.live .hd { fill: #4a2a14; }
svg.sodo .ghd { fill: #6E3CF3; }
svg.sodo .ght { font-size: 13px; font-weight: 800; fill: #fff; letter-spacing: .02em; } svg.sodo .ght.r { font-size: 11px; font-weight: 600; opacity: .85; }
svg.sodo .grow { fill: transparent; }
svg.sodo .side.grp.top .grow { fill: rgba(139,92,246,.22); }
svg.sodo .gn { font-size: 14px; fill: #fff; font-weight: 600; }
svg.sodo .side.grp.top .gn { font-weight: 800; fill: #E9D5FF; }
svg.sodo .gs { font-size: 12px; fill: #C4B5FD; font-variant-numeric: tabular-nums; }
svg.sodo .gl { font-size: 12px; fill: #fff; }
svg.sodo .cbox { fill: #4a3a12; stroke: #F59E0B; stroke-width: 2; }
svg.sodo .ct { font-size: 16px; font-weight: 900; fill: #FFD27A; }
svg.sodo.interactive .side { cursor: pointer; }
svg.sodo.interactive .side:hover .sidebg, svg.sodo.interactive .side:hover .grow { fill: rgba(255,255,255,.08); }
@keyframes sodoPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
svg.sodo .livet { animation: sodoPulse 1.4s infinite; }

/* In ấn: nền trắng, chữ đen */
.print-bar { display: flex; gap: 10px; align-items: center; padding: 10px 16px; background: rgba(15,10,30,.92); border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; }
.print-bar select { width: auto; }
.print-page { max-width: 1100px; margin: 16px auto; padding: 22px 20px; background: #fff; color: #111; border-radius: 12px; }
.print-page h1 { color: #4C1D95; }
.print-page h2, .print-page h3, .print-page h4 { color: #5B21B6; }
.print-page hr { border: 0; border-top: 2px solid #8B5CF6; }
.print-page .muted { color: #555; }
.print-page .card { background: #fff; color: #111; border: 1px solid #bbb; box-shadow: none; }
.print-page th, .print-page td { border-color: #ccc; }
.print-page th { color: #444; }
.print-page tr.top td { background: #eee8ff; }
.print-page .match { background: #fff; border-color: #bbb; }
.print-page .match .hd { background: #f3f0fa; color: #444; }
.print-page .match .hd b, .print-page .match .side .nm { color: #111; }
.print-page .match .side.win .nm, .print-page .match .side.win .sc span { color: #14532d; }
.print-page .match .side .sc { color: #111; }
.print-page .chip { color: #111; }
.print-page .badge { color: #333; background: #eee; }
.print-page svg.sodo .box, .print-page svg.sodo .gbox { fill: #fff; stroke: #999; }
.print-page svg.sodo .hd { fill: #f0edf8; }
.print-page svg.sodo .mb.done .box { fill: #fafafa; }
.print-page svg.sodo .mb.ready .hd { fill: #fff6df; }
.print-page svg.sodo .hdt, .print-page svg.sodo .rt, .print-page svg.sodo .gs, .print-page svg.sodo .tp { fill: #555; }
.print-page svg.sodo .hdt .code, .print-page svg.sodo .tn, .print-page svg.sodo .ts, .print-page svg.sodo .gn, .print-page svg.sodo .gl { fill: #111; }
.print-page svg.sodo .side.win .tn, .print-page svg.sodo .side.win .ts, .print-page svg.sodo .side.grp.top .gn, .print-page svg.sodo .sect { fill: #14532d; }
.print-page svg.sodo .side.win .sidebg { fill: #e6f6ee; }
.print-page svg.sodo .side.lose .tn, .print-page svg.sodo .side.lose .ts, .print-page svg.sodo .side.elim .tn, .print-page svg.sodo .side.elim .gn { fill: #888; }
.print-page svg.sodo .ln { stroke: #888; } .print-page svg.sodo .ln.soft { stroke: #bbb; } .print-page svg.sodo .sep { stroke: #ddd; }
.print-page svg.sodo .ghd { fill: #4C1D95; } .print-page svg.sodo .side.grp.top .grow { fill: #eee8ff; }
.print-page svg.sodo .cbox { fill: #fff3d9; } .print-page svg.sodo .ct { fill: #7a4b00; }
.ptable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ptable th, .ptable td { border: 1px solid #c9c2e0; padding: 6px 8px; color: #111; }
.ptable thead th { background: #F3EEFF; color: #4C1D95; }
.ptable td.b { font-weight: 800; }
.sheets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sheet { border: 1.5px solid #333; border-radius: 6px; padding: 10px; break-inside: avoid; page-break-inside: avoid; color: #111; }
.sh-hd { font-size: .95rem; margin-bottom: 8px; }
.sh-t { width: 100%; border-collapse: collapse; }
.sh-t th, .sh-t td { border: 1px solid #333; padding: 8px 6px; font-size: .95rem; height: 44px; color: #111; }
.sh-ft { margin-top: 8px; font-size: .85rem; color: #444; }
@media print {
  body { background: #fff !important; color: #111; }
  body:before { display: none; }
  .no-print, .topbar, .tabs, .btn { display: none !important; }
  .print-page { padding: 0; max-width: none; margin: 0; border-radius: 0; }
  .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; background: #fff; color: #111; }
  .bracket-scroll, .sodo-wrap { overflow: visible; }
  @page { margin: 12mm; }
}

@media (max-width: 600px) {
  :root { --fs: 16px; }
  .wrap { padding: 12px 12px 60px; }
  h1 { font-size: 1.5rem; }
  .hero h1 { font-size: 1.6rem; }
  .scoreboard .team .pts { font-size: 2.8rem; }
}

/* Bàn điểm tổng */
.sc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.sc-grid { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 10px 12px; align-items: center; }
.sc-names { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 150px; }
.sc-games { flex: 0 1 auto; margin-left: auto; max-width: 100%; }
.sc-nm { font-weight: 800; font-size: 1.1rem; color: #fff; line-height: 1.2; }
.sc-nm.win { color: #A7F3D0; }
.sc-nm .pl { font-size: .82rem; color: var(--muted); font-weight: 400; overflow-wrap: anywhere; }
.sc-games { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.sc-game { display: grid; grid-template-rows: auto auto auto auto; gap: 6px; justify-items: center; flex: 0 0 auto; }
.sc-gl { font-size: .78rem; color: var(--muted); font-weight: 700; }
.sc-row { display: flex; align-items: center; gap: 4px; }
.sc-row input[type=number] { width: 50px; text-align: center; padding: 8px 2px; font-size: 1.2rem; font-weight: 800; -moz-appearance: textfield; }
.sc-row input::-webkit-outer-spin-button, .sc-row input::-webkit-inner-spin-button { -webkit-appearance: none; }
.sc-row button { width: 34px; height: 38px; border-radius: 9px; border: 1px solid var(--line-s); background: rgba(255,255,255,.08); color: #fff; font-size: 1.3rem; cursor: pointer; }
.sc-row button.plus { background: linear-gradient(135deg, #6E3CF3, #4F46E5); border: 0; }
@media (max-width: 600px) { .sc-list { grid-template-columns: 1fr; } .sc-names { flex-basis: 100%; } }
.remain { background: var(--accent-soft); border: 1px solid rgba(245,158,11,.4); color: #fff; border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; font-size: 1.05rem; }
.remain b { color: var(--accent-text); }
.s-remain { font-size: 1.05rem; font-weight: 500; color: var(--muted); margin-top: 2px; }
.s-remain b { color: var(--accent-text); }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
.dot.big { width: 16px; height: 16px; margin-right: 8px; }
.match .tour .dot { width: 10px; height: 10px; }
svg.sodo .tc { fill: var(--tc, transparent); }
svg.sodo .ghd { fill: var(--tc, #6E3CF3); }

/* Vòng đang diễn ra (chữ nháy) */
.stage-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.stage { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.28); border: 1px solid var(--tc, var(--line-s)); border-radius: 99px; padding: 6px 14px; font-size: 1rem; color: #fff; }
.stage .sn { color: var(--muted); }
.stage b { color: #fff; }
.stage.live b { color: #FFC49A; }
.stage.next b { color: #FFD27A; }
.stage.done b { color: #A7F3D0; }
.stage.done .blink, .stage.setup .blink { animation: none; }
.stage-bar.big .stage { font-size: 1.15rem; padding: 8px 18px; }
@keyframes stageBlink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
.blink { animation: stageBlink 1.2s ease-in-out infinite; }
.s-top .stage-bar { margin: 0 16px; }
.hero .stage { background: rgba(0,0,0,.25); }

/* Thanh điều hướng đủ trang */
.nav { display: flex; gap: 4px; flex-wrap: wrap; max-width: 1300px; margin: 0 auto; padding: 4px 0 8px; }
.nav a { color: var(--ink2); background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-size: .92rem; font-weight: 600; opacity: 1; white-space: nowrap; }
.nav a:hover { background: var(--brand-soft); text-decoration: none; color: #fff; }
.nav a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.sd-bar + .nav, .print-page ~ .nav { padding-left: 18px; }
.no-print > .nav { padding: 10px 16px 4px; }
.s-nav { margin-top: auto; opacity: .55; }
.s-nav:hover { opacity: 1; }
.s-nav .nav { padding: 0; }
.wrap.wide .nav { max-width: 1600px; }

/* Màu theo vòng đấu */
.rn { font-weight: 800; }
.r-group { color: #C4B5FD; }      /* vòng bảng / vòng tròn: lavender */
.r-r16 { color: #7DD3FC; }        /* vòng 1/8, 1/16: xanh da trời */
.r-qf { color: #5EEAD4; }         /* tứ kết: xanh ngọc */
.r-sf { color: #FDBA74; }         /* bán kết: cam */
.r-final { color: #FDE047; text-shadow: 0 0 8px rgba(253,224,71,.45); }  /* chung kết: vàng */
.r-third { color: #D6B48C; }      /* tranh hạng 3: đồng */
.r-losers { color: #A5B4FC; }     /* nhánh thua: xanh tím nhạt */
.stage b.rn.r-final, .stage.live b.rn.r-final { color: #FDE047; }
.stage.live b.rn:not(.r-final) { filter: brightness(1.15); }
svg.sodo .r-group { fill: #C4B5FD; } svg.sodo .r-r16 { fill: #7DD3FC; } svg.sodo .r-qf { fill: #5EEAD4; } svg.sodo .r-sf { fill: #FDBA74; }
svg.sodo .r-final { fill: #FDE047; } svg.sodo .r-third { fill: #D6B48C; } svg.sodo .r-losers { fill: #A5B4FC; }
.print-page .r-group { color: #555; } .print-page .r-r16 { color: #0369a1; } .print-page .r-qf { color: #0f766e; } .print-page .r-sf { color: #c2410c; } .print-page .r-final { color: #a16207; text-shadow: none; } .print-page .r-third { color: #7c5a2a; } .print-page .r-losers { color: #4338ca; }
.print-page svg.sodo .r-group { fill: #555; } .print-page svg.sodo .r-r16 { fill: #0369a1; } .print-page svg.sodo .r-qf { fill: #0f766e; } .print-page svg.sodo .r-sf { fill: #c2410c; } .print-page svg.sodo .r-final { fill: #a16207; } .print-page svg.sodo .r-third { fill: #7c5a2a; } .print-page svg.sodo .r-losers { fill: #4338ca; }

/* cảnh báo tỉ số sai thể lệ */
.rule-warn{margin-top:10px;padding:10px 14px;border-radius:10px;background:#FEF3C7;border:1px solid #F59E0B;color:#7C2D12;font-size:.95em;font-weight:600}
.rule-warn ul,.rule-list{margin:6px 0 0 18px;padding:0}
.rule-warn li,.rule-list li{margin:3px 0;font-weight:500}
.rule-list{font-size:1.05em;color:#B91C1C}
.sc-warn:empty{display:none}

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; margin-top: 6px; }
.cat-grid .check { margin: 0; }
.at-table select { width: 100%; padding: 6px 8px; }
.at-table td { vertical-align: middle; }
.row.wrap { flex-wrap: wrap; align-items: flex-end; }
.absent-bar:empty { display: none; }
.absent-bar { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.5); }
.warn-line .btn.sm { padding: 2px 8px; font-size: .8rem; margin-left: 2px; }

/* ================= Điện thoại & máy tính bảng ================= */
/* thanh điều hướng: trên màn hẹp cuộn ngang một hàng, không chiếm chỗ */
@media (max-width: 760px) {
  .topbar { padding: 0 10px; }
  .topbar .in { gap: 8px 10px; min-height: 50px; }
  .topbar .in > .muted { font-size: .92rem; line-height: 1.25; flex: 1 1 60%; min-width: 0; }
  .topbar .brand { font-size: 1.05rem; }
  .topbar .spacer { display: none; }
  .nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 10px 8px; margin: 0 -10px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; flex: 0 0 auto; padding: 7px 12px; font-size: .95rem; }
  .sd-bar + .nav, .print-page ~ .nav { padding-left: 10px; }
  /* chip vòng đấu */
  .stage-bar { gap: 6px; }
  .stage-bar .stage, .stage-bar.big .stage { font-size: .92rem; padding: 5px 10px; white-space: nowrap; }
  .stage-bar .stage .sn { white-space: nowrap; }
  .stage-bar.big { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .stage-bar.big::-webkit-scrollbar { display: none; }
  /* thẻ, nút, bảng */
  .card { padding: 14px; }
  .btn { padding: 10px 14px; }
  .btn.sm { padding: 7px 10px; min-height: 36px; }
  .btn.big { width: 100%; justify-content: center; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
  .row.between > h1, .row.between > h2 { flex-basis: 100%; }
  .row.between select, .row.between input[type=text] { flex: 1 1 140px; min-width: 0; width: auto !important; }
  .grid2 { grid-template-columns: 1fr; gap: 10px; }
  .tabs { scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { padding: 10px 12px; white-space: nowrap; }
  th, td { padding: 6px 8px; font-size: .92rem; }
  .hero { padding: 18px 16px; }
  .hero h1 { font-size: 1.45rem; }
  .hero .meta { gap: 8px 14px; font-size: .92rem; }
  .podium { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .podium .p { padding: 10px 6px; }
  .podium .p .nm { font-size: .95rem; }
  .podium .p .medal { font-size: 1.5rem; }
  .match-list { grid-template-columns: 1fr; }
  .match { min-width: 0; }
  .court-strip { grid-template-columns: 1fr; gap: 8px; }
  .q-actions { gap: 6px; padding: 8px 10px; }
  .q-actions select { max-width: 100%; }
  .remain { font-size: .95rem; padding: 8px 12px; }
  .swap-bar { font-size: .95rem; }
  /* hộp thoại: sát mép, cuộn được, nút bấm to */
  .modal-bg { padding: 8px 6px; align-items: flex-start; }
  .modal { padding: 16px 14px; border-radius: 14px; max-width: 100%; }
  .modal h2 { font-size: 1.25rem; }
  .scoreboard { gap: 8px; }
  .scoreboard .team { padding: 10px 6px; }
  .scoreboard .team .nm { font-size: .95rem; min-height: 2.4em; }
  .scoreboard .team .pts { font-size: 2.6rem; }
  .scoreboard .team .ctl button { width: 52px; height: 48px; font-size: 1.5rem; }
  .games-list .g { padding: 6px 10px; min-height: 36px; display: inline-flex; align-items: center; }
  /* sơ đồ */
  .sd-bar { padding: 8px 10px; gap: 6px 10px; }
  .sd-bar .ttl { font-size: 1.05rem; flex-basis: 100%; margin: 0; }
  .sd-bar select { flex: 1 1 140px; min-width: 0; }
  .sd-bar .check { margin: 0; font-size: .92rem; }
  .sd-body { padding: 10px; }
  .sodo-wrap { -webkit-overflow-scrolling: touch; }
  /* màn hình sân trên điện thoại */
  .screen { padding: 10px 12px; gap: 12px; font-size: 1rem; }
  .s-top { flex-wrap: wrap; gap: 6px 10px; }
  .s-title { font-size: 1.3rem; flex: 1 1 60%; }
  .s-clock { font-size: 1.3rem; }
  .s-top .stage-bar { margin: 0; flex-basis: 100%; order: 3; }
  .s-court { padding: 12px 14px; min-height: 0; }
  .s-court-hd { font-size: 1.1rem; }
  .s-name { font-size: 1.3rem; }
  .s-score { font-size: 2rem; gap: 6px; }
  .s-empty { padding: 24px 0; font-size: 1.1rem; }
  /* bàn điểm tổng */
  .sc-list { grid-template-columns: 1fr; }
  .sc-row input[type=number] { width: 46px; }
  /* điểm danh */
  .ci-row { flex-wrap: wrap; }
  .ci-row > .row { flex: 1 1 100%; justify-content: flex-end; }
  /* in ấn */
  .print-page { padding: 14px 10px; margin: 8px; }
  .print-bar { padding: 8px 10px; gap: 6px; }
  .print-bar select { flex: 1 1 120px; min-width: 0; }
  /* ghép đội tự động */
  .at-table select { min-width: 120px; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .cat-grid { grid-template-columns: 1fr; }
  .scoreboard .team .ctl button { width: 46px; height: 44px; }
  .podium { grid-template-columns: 1fr; }
}
/* máy tính bảng */
@media (min-width: 761px) and (max-width: 1100px) {
  .desk { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sc-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .s-courts { grid-template-columns: repeat(2, 1fr) !important; }
}
/* chạm: mọi nút bấm đủ lớn */
@media (pointer: coarse) {
  .btn, .tabs button, .games-list .g, .nav a, select, input[type=text], input[type=number], input[type=password], input[type=date] { min-height: 40px; }
  .btn.sm { min-height: 36px; }
  .sc-row button, .scoreboard .team .ctl button { touch-action: manipulation; }
  button, a { -webkit-tap-highlight-color: rgba(139,92,246,.3); }
}
@media (max-width: 760px) {
  .tbl-wrap table th, .tbl-wrap table td { white-space: nowrap; }
  .tbl-wrap table td .pl { white-space: normal; max-width: 220px; }
  .tbl-wrap table td.small { white-space: normal; min-width: 160px; }
  .chip { white-space: nowrap; }
}
@media (max-width: 1100px) {
  .s-top { flex-wrap: wrap; gap: 6px 12px; }
  .s-title { font-size: 1.6rem; flex: 1 1 60%; }
  .s-clock { font-size: 1.6rem; }
  .s-top .stage-bar { margin: 0; flex-basis: 100%; order: 3; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .s-top .stage-bar .stage { white-space: nowrap; font-size: 1rem; }
  .chip { white-space: nowrap; }
}

/* rê chuột lên VĐV: sáng đường đi, mờ phần còn lại */
svg.sodo .side[data-pl] { cursor: pointer; }
svg.sodo.hovering .side:not(.hov) .sidebg, svg.sodo.hovering .side:not(.hov) .grow { opacity: .55; }
svg.sodo.hovering .side:not(.hov) .tn, svg.sodo.hovering .side:not(.hov) .tp, svg.sodo.hovering .side:not(.hov) .gn, svg.sodo.hovering .side:not(.hov) .ts { opacity: .45; }
svg.sodo.hovering path.ln:not(.hovln) { opacity: .25; }
svg.sodo .side.hov .sidebg, svg.sodo .side.hov .grow { fill: #b45309 !important; opacity: 1; }
svg.sodo .side.hov .tn, svg.sodo .side.hov .gn, svg.sodo .side.hov .tp, svg.sodo .side.hov .ts { fill: #FFF3C4 !important; opacity: 1; font-weight: 800; }
svg.sodo path.ln.hovln { stroke: #FBBF24 !important; stroke-width: 3.5 !important; opacity: 1 !important; filter: drop-shadow(0 0 4px rgba(251,191,36,.9)); }
.print-page svg.sodo .side.hov .sidebg { fill: #ffe8b3 !important; } .print-page svg.sodo .side.hov .tn { fill: #7a4b00 !important; }

/* thẻ VĐV & sáng theo VĐV trên trang */
.pn { cursor: help; border-bottom: 1px dotted transparent; }
.pn:hover, .pn.pl-hov, .chip.pl-hov { color: #FFE08A; border-bottom-color: #FBBF24; }
.pl-hit { outline: 2px solid #FBBF24; outline-offset: -2px; box-shadow: 0 0 0 4px rgba(251,191,36,.25); }
tr.pl-hit td { background: rgba(251,191,36,.12); }
.pl-tip { position: fixed; z-index: 90; max-width: 340px; background: #1b1238; color: #fff; border: 1px solid #FBBF24; border-radius: 12px; padding: 10px 12px; box-shadow: 0 12px 40px rgba(0,0,0,.6); font-size: .92rem; pointer-events: none; line-height: 1.4; }
.pl-tip .th { font-size: 1.02rem; margin-bottom: 2px; }
.pl-tip .sec { margin-top: 8px; font-weight: 700; color: var(--brand-text); font-size: .85rem; letter-spacing: .03em; }
.pl-tip .sec.live { color: var(--live); }
.pl-tip .tl { padding: 2px 0; }
.pl-tip .tl .dot { width: 8px; height: 8px; margin-right: 4px; }
.pl-tip .w { color: #A7F3D0; font-weight: 700; } .pl-tip .l { color: #FCA5A5; }
.pl-tip .badge.warn { font-size: .75rem; padding: 1px 6px; }
@media (max-width: 760px) { .pl-tip { max-width: calc(100vw - 16px); } }

.reg-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.reg-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(255,255,255,.03); }
.reg-item .partner { margin: 8px 0 0 26px; }
.partner-more { margin-top: 6px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.partner-more .grid2 { gap: 8px; }
.reg-warn:empty { display: none; }
.reg-warn .rule-warn { margin-top: 6px; }

.survey { margin: 8px 0 14px; }
.sv-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sv-row b { color: #FDE68A; font-size: 1.1rem; }
.sv-bar { grid-column: 1 / -1; height: 6px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.sv-bar div { height: 100%; background: linear-gradient(90deg, #6E3CF3, #FBBF24); border-radius: 4px; }

/* ---- thông báo chốt ngày, trang VĐV cá nhân, sao lưu ---- */
.notice { background: #FDE68A; color: #1f1200; border-radius: 12px; padding: 10px 14px; font-weight: 600; white-space: pre-wrap; }
.hero .notice { margin-top: 12px; }
.pp-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pp-head .big-code { font-size: 1.6rem; font-weight: 800; color: var(--brand); }
.pp-match { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 8px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; border-left: 6px solid var(--tc, var(--brand)); }
.pp-match.live { background: var(--live-soft, rgba(239,68,68,.12)); }
.pp-match.next { background: var(--brand-soft); }
.pp-match .when { text-align: right; font-weight: 700; white-space: nowrap; }
.pp-match .vs { font-size: 1.05rem; }
.pp-match .res { grid-column: 1 / -1; font-size: .92rem; }
.lang-btn { font-size: .8rem; padding: 3px 10px; border-radius: 8px; border: 1px solid var(--brand); background: var(--brand-soft); color: var(--brand-text); font-weight: 700; cursor: pointer; margin-left: 8px; }
.lang-btn:hover { background: var(--brand); color: #fff; }
.print-bar .lang-btn { font-size: .9rem; padding: 7px 14px; }
.bk-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
@media (max-width: 560px) { .bk-row { grid-template-columns: 1fr; } .pp-match { grid-template-columns: 1fr; } .pp-match .when { text-align: left; } }
.chip.off { background: var(--danger-soft); color: #FFB4B4; text-decoration: line-through; }
.pp-head .qr-img { flex: 0 0 auto; }
.pp-head .qr-img svg { width: 96px; height: 96px; }

.rules-box { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 10px 0 14px; }
.rules-box summary { cursor: pointer; font-weight: 700; color: var(--brand-text); }
.rules-box .rules-text { white-space: pre-wrap; max-height: 260px; overflow: auto; margin-top: 8px; font-size: .92rem; line-height: 1.5; }

.fee-box { background: rgba(253,230,138,.12); border: 1px solid rgba(253,230,138,.4); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.call-bar { background: var(--live); color: #1f1200; border-radius: 12px; padding: 12px 14px; margin-top: 10px; font-size: 1.05rem; animation: pulse 1.2s infinite; }
.call-bar.soft { background: #FDE68A; animation: none; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251,146,60,.7); } 50% { box-shadow: 0 0 0 10px rgba(251,146,60,0); } }
@media print { body.page-admin .modal-bg { position: static; background: #fff; } body.page-admin .modal-bg .modal.print-only { box-shadow: none; max-width: none; color: #000; background: #fff; } body.page-admin .modal-bg .modal.print-only .qr-img.big svg { width: 480px; height: 480px; } body.page-admin #app > * { display: none; } }
.pp-head > div:last-child { flex: 1 1 220px; min-width: 0; }

/* chấm điểm trực tiếp */
.ls { max-width: 900px; margin: 0 auto; padding: 10px 14px 30px; }
.ls-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.ls-back { color: var(--brand-text); font-weight: 700; }
.ls-title { flex: 1; font-size: 1rem; }
.ls-rule { color: var(--muted); font-size: .85rem; }
.ls-games { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; font-weight: 700; }
.ls-games span { background: rgba(255,255,255,.08); border-radius: 8px; padding: 2px 10px; }
.ls-games span.on { outline: 2px solid var(--brand); }
.ls-games span.w1, .ls-games span.w2 { background: var(--ok-soft); }
.ls-board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ls-side { background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 14px 10px 10px; text-align: center; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ls-side.serving { border-color: var(--live); box-shadow: 0 0 0 4px rgba(251,146,60,.25); }
.ls-name { font-weight: 800; font-size: 1.15rem; min-height: 2.4em; }
.ls-pl { color: var(--muted); font-size: .85rem; min-height: 1.2em; }
.ls-pts { font-size: 6rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ls-serve { color: var(--live); font-weight: 800; letter-spacing: .05em; min-height: 1.3em; }
.ls-adj { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.ls-first button.sx-nam { color: #4dd2ff; } .ls-first button.sx-nu { color: #ff8fa3; }
.ls-pick-btns .btn.ghost.sx-nam { color: #4dd2ff; } .ls-pick-btns .btn.ghost.sx-nu { color: #ff8fa3; }
.ls-adj button { background: rgba(255,255,255,.1); color: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 18px; font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.ls-call { text-align: center; font-size: 1.25rem; margin: 12px 0 8px; }
.ls-call b { font-size: 1.8rem; color: #FDE68A; }
.ls-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.ls-actions.small-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ls-point { background: var(--ok); color: #052e16; font-size: 1.2rem; padding: 18px 10px; }
.ls-fault { font-size: 1.1rem; padding: 18px 10px; }
@media (max-width: 480px) { .ls-pts { font-size: 4.5rem; } .ls-actions { grid-template-columns: 1fr; } .ls-name { font-size: 1rem; } }
.serve-dot { color: var(--live); animation: pulse 1.2s infinite; border-radius: 50%; }
.serve-no { font-size: .7em; color: var(--live); font-weight: 700; }
.s-side.serving .s-name { color: #FDBA74; }
/* overlay OBS: nền trong suốt */
body.overlay-body { background: transparent !important; margin: 0; }
body.overlay-body #app { padding: 0; }
.ov { display: inline-block; min-width: 420px; font-family: 'Be Vietnam Pro', system-ui, sans-serif; color: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.5); background: rgba(17,12,32,.92); margin: 12px; border-left: 8px solid var(--tc); }
.ov-hd { display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: var(--tc); font-weight: 800; font-size: .9rem; }
.ov-hd img { height: 26px; width: auto; }
.ov-meta { margin-left: auto; font-weight: 500; opacity: .9; font-size: .8rem; }
.ov-row { display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center; gap: 10px; padding: 6px 14px; font-size: 1.35rem; font-weight: 700; border-top: 1px solid rgba(255,255,255,.08); }
.ov-row.win .ov-name { color: #A7F3D0; }
.ov-serve { color: #FB923C; font-size: .9rem; }
.ov-gw { background: rgba(255,255,255,.15); border-radius: 6px; padding: 0 8px; font-size: 1rem; }
.ov-pts { min-width: 2.2em; text-align: center; background: #FDE68A; color: #1f1200; border-radius: 8px; padding: 0 8px; font-variant-numeric: tabular-nums; }

/* ảnh bìa / logo / nhà tài trợ */
.hero.has-cover { background-size: cover; background-position: center; }
.hero-logo { height: 64px; width: auto; margin-bottom: 8px; background: #fff; border-radius: 10px; padding: 4px; }
.sponsors { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; margin: 18px 0 6px; }
.sponsors img { height: 44px; width: auto; background: #fff; border-radius: 8px; padding: 4px; }
.img-prev { max-width: 100%; max-height: 140px; border-radius: 10px; display: block; margin-bottom: 6px; }
.img-prev.sm { max-height: 70px; background: #fff; padding: 4px; }
.sp-item { display: inline-flex; align-items: center; gap: 4px; background: #fff; border-radius: 8px; padding: 3px 4px; }
.sp-item img { height: 36px; width: auto; }
/* hồ sơ / xếp hạng */
.rt-badge { text-align: center; background: var(--brand-soft); border-radius: 14px; padding: 8px 16px; }
.rt-num { font-size: 2.2rem; font-weight: 900; color: #FDE68A; line-height: 1.1; }
.rt-chart { width: 100%; height: auto; margin-top: 10px; background: rgba(0,0,0,.2); border-radius: 12px; }
.pp-match .when.up { color: var(--ok); } .pp-match .when.down { color: var(--danger); }
/* giấy chứng nhận */
body.cert-body { background: #f3f0ff; }
.cert { max-width: 1000px; margin: 20px auto; background: #fff; color: #1f1235; padding: 18px; }
.cert-in { border: 10px double #6E3CF3; padding: 40px 50px; text-align: center; min-height: 600px; position: relative; }
.cert-logo { height: 80px; width: auto; margin-bottom: 8px; }
.cert-t1 { font-size: 2.4rem; font-weight: 900; letter-spacing: .12em; color: #4F46E5; }
.cert-t2 { letter-spacing: .3em; color: #777; font-size: .85rem; margin-bottom: 30px; }
.cert-name { font-size: 2.6rem; font-weight: 800; margin: 10px 0 4px; color: #1f1235; }
.cert-club { color: #666; margin-bottom: 14px; }
.cert-line { font-size: 1.3rem; font-weight: 700; color: #b45309; margin: 14px 0; }
.cert-giai { font-size: 1.4rem; font-weight: 800; margin-top: 10px; }
.cert-meta { color: #666; }
.cert-sign { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 50px; padding: 0 30px; font-weight: 600; }
.cert-sig-line { width: 200px; border-top: 1px solid #333; margin-bottom: 6px; }
.cert-qr svg { width: 70px; height: 70px; }
.cert-sponsors { display: flex; gap: 14px; justify-content: center; margin-top: 24px; }
.cert-sponsors img { height: 40px; width: auto; }
.cert-tools { text-align: center; margin: 14px; color: #333; }
@media print { body.cert-body { background: #fff; } .cert { margin: 0; padding: 0; } .cert-tools, .topbar, #toast { display: none !important; } @page { size: A4 landscape; margin: 10mm; } }
/* bảng vàng — poster vẽ bằng canvas, nhìn trên màn hình đúng như ảnh tải về */
.hn-poster { border-radius: 20px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.45); background: #190d3a; min-height: 260px; max-width: 540px; margin-left: auto; margin-right: auto; }
.hn-canvas { display: block; width: 100%; height: auto; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
.hn-tip { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--line-s); color: var(--ink2); font-size: .92rem; line-height: 1.5; }
.hn-load { padding: 90px 20px; text-align: center; color: var(--muted); }
@media print {
  .hn-poster { box-shadow: none; border-radius: 0; }
  .hn-canvas { width: 100%; max-height: 96vh; object-fit: contain; }
  .wrap.narrow { padding: 0; max-width: none; }
  @page { margin: 8mm; }
}
.honor { background: linear-gradient(160deg, #2a1a5e, #6E3CF3); border-radius: 18px; padding: 24px; color: #fff; position: relative; overflow: hidden; }
.honor-cover { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; }
.honor-hd { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.honor-hd img { height: 60px; width: auto; background: #fff; border-radius: 10px; padding: 4px; }
.honor-t { font-size: 1.6rem; font-weight: 900; color: #FDE68A; letter-spacing: .06em; }
.honor-g { font-size: 1.2rem; font-weight: 800; }
.honor-row { background: rgba(0,0,0,.25); border-radius: 12px; padding: 10px 14px; margin-top: 10px; }
.honor-tour { font-weight: 800; border-left: 5px solid; padding-left: 8px; margin-bottom: 6px; }
.honor-m { display: flex; gap: 10px; align-items: center; padding: 4px 0; }
.honor-m .ic { font-size: 1.5rem; }
.honor-sp { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.honor-sp img { height: 36px; width: auto; background: #fff; border-radius: 6px; padding: 3px; }
.honor-ft { text-align: center; margin-top: 12px; color: #D6C8FF; font-size: .85rem; }

/* báo cáo tổng kết */
.report { max-width: 1000px; margin: 16px auto; padding: 0 16px; }
.rp-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.rp-head img { height: 70px; width: auto; background: #fff; border-radius: 10px; padding: 4px; }
.rp-t { letter-spacing: .2em; color: #FDE68A; font-weight: 800; font-size: .85rem; }
.rp-cover { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; margin: 8px 0 14px; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 10px 0 18px; }
.rp-grid .stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.rp-grid .stat b { display: block; font-size: 1.5rem; }
.rp-grid .stat span { color: var(--muted); font-size: .8rem; }
.rp-tour { background: var(--card); border: 1px solid var(--line); border-left: 6px solid; border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.rp-medals { display: grid; gap: 4px; margin-top: 6px; }
.rp-tools { text-align: center; margin: 16px; }
@media print { body.report-body { background: #fff; color: #000; } body.report-body .card, body.report-body .rp-tour, body.report-body .rp-grid .stat { background: #fff; color: #000; border-color: #ccc; break-inside: avoid; } body.report-body .rp-t { color: #b45309; } body.report-body h1, body.report-body h2, body.report-body h3, body.report-body b { color: #000; } body.report-body .muted, body.report-body .help { color: #444; } .rp-tools, #toast { display: none !important; } body.report-body .sv-bar div { background: #6E3CF3; } }

.note-line { padding: 2px 10px 0; }
.note-badge { display: inline-block; background: #FDE68A; color: #1f1200; border-radius: 8px; padding: 1px 8px; font-size: .78rem; font-weight: 700; }
.note-badge.blink { animation: blinkNote 1.2s steps(2, start) infinite; }
@keyframes blinkNote { to { visibility: hidden; } }

svg.sodo .notebg { fill: #FDE68A; animation: blinkNote 1.2s steps(2, start) infinite; }
svg.sodo .notet { font-size: 9px; font-weight: 800; fill: #1f1200; animation: blinkNote 1.2s steps(2, start) infinite; }

.pn-admin { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.pn-admin:hover { color: #FDE68A; }

/* Lịch dạng bảng giờ × sân */
.sched-toggle{display:flex;gap:6px;margin:0 0 10px;flex-wrap:wrap}
.tt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tt{border-collapse:separate;border-spacing:0;width:100%;min-width:100%}
table.tt th,table.tt td{vertical-align:top;padding:6px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;min-width:190px}
table.tt th{position:sticky;top:0;background:rgba(60,35,120,.95);z-index:1;font-size:.9rem;white-space:nowrap}
table.tt th.tt-time,table.tt td.tt-time{min-width:60px;width:64px;position:sticky;left:0;background:rgba(40,22,85,.97);z-index:2;white-space:nowrap}
table.tt tr.live td.tt-time{box-shadow:inset 4px 0 0 #ff5b8a}
table.tt tr.done{opacity:.6}
.tt-m{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:6px 8px;margin-bottom:6px;font-size:.92rem}
.tt-m.live{background:rgba(255,91,138,.15);border-color:#ff5b8a}
.tt-m.done{opacity:.85}
.tt-hd{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:.82rem;margin-bottom:4px}
.tt-tour{font-size:.78rem;font-weight:600;margin-bottom:3px}
.tt-side{display:flex;justify-content:space-between;gap:6px;padding:2px 0;border-top:1px dashed rgba(255,255,255,.08)}
.tt-side:first-of-type{border-top:0}
.tt-side.win .nm{font-weight:700;color:#7dffb3}
.tt-side.tbd .nm{font-style:italic;opacity:.65}
.tt-side .sc{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.tt-m .note-line{margin:2px 0 4px}
@media (max-width:640px){table.tt th,table.tt td{min-width:160px;padding:4px}.tt-m{font-size:.86rem}}
@media print{.tt-wrap{overflow:visible}table.tt th{position:static}.sched-toggle{display:none}}
.gtag{font-size:.75rem;padding:1px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08)}
.tt-m.conflict{outline:2px solid #ff5b5b;box-shadow:0 0 0 3px rgba(255,91,91,.2)}

/* Trang chấm điểm: vừa khít một màn hình điện thoại, không phải cuộn */
.ls { min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; padding: 8px 12px 10px; gap: 6px; }
.ls-top { margin-bottom: 0; gap: 8px; row-gap: 2px; }
.ls-title { font-size: clamp(.8rem, 2.2vh, 1rem); line-height: 1.3; }
.ls-rule { font-size: clamp(.7rem, 1.9vh, .85rem); }
.ls-games { margin: 0; font-size: clamp(.8rem, 2vh, 1rem); }
.ls-board { flex: 1; min-height: 0; gap: 10px; }
.ls-side { display: flex; flex-direction: column; justify-content: center; padding: clamp(6px, 1.5vh, 14px) 8px; }
.ls-name { font-size: clamp(.95rem, 2.6vh, 1.2rem); min-height: 0; line-height: 1.25; }
.ls-pl { font-size: clamp(.7rem, 1.8vh, .85rem); min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-pts { font-size: clamp(3rem, 22vh, 7rem); line-height: 1; margin: .05em 0; }
.ls-serve { font-size: clamp(.8rem, 2.2vh, 1rem); min-height: 1.3em; }
.ls-adj button { padding: clamp(3px, 1vh, 6px) clamp(12px, 4vw, 18px); font-size: clamp(.95rem, 2.4vh, 1.1rem); }
.ls-call { margin: 0; font-size: clamp(.95rem, 2.6vh, 1.25rem); }
.ls-call b { font-size: clamp(1.3rem, 4vh, 1.8rem); }
.ls-actions { margin-top: 0; gap: 8px; }
.ls-point, .ls-fault { padding: clamp(10px, 2.4vh, 18px) 8px; font-size: clamp(.95rem, 2.6vh, 1.2rem); }
.ls-actions.small-row .btn { padding: clamp(6px, 1.6vh, 10px) 6px; font-size: clamp(.8rem, 2.1vh, .95rem); white-space: nowrap; }
.ls-help { margin: 0; font-size: clamp(.68rem, 1.7vh, .8rem); }
@media (max-width: 480px) {
  .ls-actions { grid-template-columns: 1fr 1fr; }
  .ls-actions.small-row { grid-template-columns: repeat(3, 1fr); }
  .ls-pts { font-size: clamp(2.6rem, 24vh, 7rem); }
  .ls-board { gap: 8px; }
}
@media (max-width: 380px) { .ls-point, .ls-fault { padding: 8px 6px; font-size: .9rem; } }
@media (max-height: 600px) { .ls-help, .ls-pl { display: none; } }
.ls-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ls-side { min-width: 0; }
.ls-actions .btn { min-width: 0; }
.ls-actions.small-row .btn { white-space: normal; line-height: 1.2; }
@media (max-height: 450px) { .ls { gap: 3px; padding: 4px 10px 6px; } .ls-games { display: none; } .ls-pts { font-size: clamp(2rem, 20vh, 4rem); } .ls-point, .ls-fault { padding: 6px 8px; } .ls-side { padding: 4px 8px; } .ls-serve { min-height: 0; } .ls-adj { margin-top: 2px; } }
@media (max-height: 600px) and (max-width: 480px) { .ls-pts { font-size: clamp(2rem, 14vh, 4rem); } .ls-games { font-size: .75rem; } .ls-side { padding: 4px 6px; } .ls-serve { min-height: 0; } .ls-point, .ls-fault { padding: 8px 6px; } }

/* Điện thoại xoay ngang: 2 ô đội hai bên, các nút ở giữa — luôn vừa một màn hình */
@media (orientation: landscape) and (max-height: 520px) {
  .ls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 36%) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; grid-template-areas: "top top top" "games games games" "s1 call s2" "s1 act s2" "s1 small s2"; gap: 4px 8px; height: 100dvh; padding: 4px 8px 6px; overflow: hidden; }
  .ls-top { grid-area: top; margin: 0; }
  .ls-games { grid-area: games; margin: 0; font-size: clamp(.7rem, 3vh, .9rem); }
  .ls-board { display: contents; }
  .ls-side:nth-child(1) { grid-area: s1; } .ls-side:nth-child(2) { grid-area: s2; }
  .ls-side { padding: 4px 6px; min-height: 0; }
  .ls-name { font-size: clamp(.8rem, 4vh, 1.1rem); }
  .ls-pl { font-size: clamp(.6rem, 3vh, .8rem); }
  .ls-pts { font-size: clamp(2.2rem, 38vh, 7rem); line-height: 1; margin: 0; }
  .ls-serve { font-size: clamp(.7rem, 3.5vh, .95rem); min-height: 0; }
  .ls-adj { margin-top: 2px; } .ls-adj button { padding: 2px 14px; font-size: clamp(.85rem, 4vh, 1rem); }
  .ls-call { grid-area: call; align-self: end; font-size: clamp(.85rem, 4vh, 1.1rem); }
  .ls-call b { font-size: clamp(1.1rem, 6vh, 1.6rem); }
  .ls-actions { grid-area: act; grid-template-columns: 1fr; gap: 5px; margin: 0; }
  .ls-point, .ls-fault { padding: clamp(5px, 2.5vh, 12px) 6px; font-size: clamp(.8rem, 4vh, 1rem); line-height: 1.2; }
  .ls-actions.small-row { grid-area: small; grid-template-columns: 1fr 1fr; gap: 4px; }
  .ls-actions.small-row .btn { padding: 4px 4px; font-size: clamp(.7rem, 3.3vh, .85rem); }
  .ls-help { display: none; }
}
@media (orientation: landscape) and (max-height: 330px) { .ls-games, .ls-pl, .ls-rule { display: none; } .ls-pts { font-size: clamp(1.8rem, 28vh, 4rem); } .ls-top { font-size: .75rem; } }
.ls-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ls-top { flex-wrap: nowrap; } .ls-rule { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.ls-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ls-side { overflow: hidden; }
@media (max-width: 480px) and (orientation: portrait) { .ls-pts { font-size: clamp(2.4rem, 19vh, 6rem); } }
@media (max-height: 700px) and (orientation: portrait) { .ls-pts { font-size: clamp(2.2rem, 15vh, 4.5rem); } .ls-name { font-size: .95rem; } }

.print-page svg.sodo .shadow { fill: none; } .print-page svg.sodo .scbg { fill: #eee; } .print-page svg.sodo .side.win .scbg { fill: #cdeedd; } .print-page svg.sodo .rtbg { fill: #f0edf8; stroke: #ddd; } .print-page svg.sodo .rankbg { fill: #e5e0f5; } .print-page svg.sodo .rankt { fill: #222; } .print-page svg.sodo .dot { fill: #888; } .print-page svg.sodo .gw { fill: #111; } .print-page svg.sodo .winbar { fill: #16a34a; }

/* Sơ đồ đối xứng kiểu World Cup: nền xanh navy, thẻ trắng, nhấn vàng */
svg.sodo.wc .box { fill: #fff; stroke: #cfd8ee; stroke-width: 1; }
svg.sodo.wc .shadow { fill: rgba(0,0,0,.35); }
svg.sodo.wc .hd { fill: #eef2fb; }
svg.sodo.wc .mb.ready .hd { fill: #fff6dc; }
svg.sodo.wc .mb.done .box { fill: #fbfcff; }
svg.sodo.wc .mb.live .box { stroke: #FB923C; stroke-width: 2.4; }
svg.sodo.wc .mb.live .hd { fill: #ffe7d1; }
svg.sodo.wc .hdt { fill: #33406b; }
svg.sodo.wc .hdt .code { fill: #b7791f; }
svg.sodo.wc .livet { fill: #ea580c; }
svg.sodo.wc .sep { stroke: #e3e8f4; }
svg.sodo.wc .tn { fill: #0f1f4d; }
svg.sodo.wc .tn.tbd { fill: #8a94b5; }
svg.sodo.wc .tp { fill: #5b6b99; }
svg.sodo.wc .ts { fill: #0f1f4d; }
svg.sodo.wc .scbg { fill: #e9edf7; }
svg.sodo.wc .side.win .sidebg { fill: #e6f6ee; }
svg.sodo.wc .side.win .scbg { fill: #bfead3; }
svg.sodo.wc .side.win .tn, svg.sodo.wc .side.win .ts { fill: #14532d; }
svg.sodo.wc .winbar { fill: #16a34a; }
svg.sodo.wc .side.lose .tn, svg.sodo.wc .side.lose .ts, svg.sodo.wc .side.elim .tn, svg.sodo.wc .side.elim .gn { fill: #8a94b5; }
svg.sodo.wc .side.hit .sidebg, svg.sodo.wc .side.hit .grow { fill: #fde68a !important; } svg.sodo.wc .side.hit .tn, svg.sodo.wc .side.hit .gn { fill: #7a4b00; }
svg.sodo.wc .side.sel .sidebg, svg.sodo.wc .side.sel .grow { fill: #bfdbfe !important; }
svg.sodo.wc .ln { stroke: rgba(255,255,255,.75); stroke-width: 2.4; }
svg.sodo.wc .ln.soft { stroke: rgba(255,255,255,.45); }
svg.sodo.wc .dot { fill: #fff; } svg.sodo.wc .dot.soft { fill: rgba(255,255,255,.6); }
svg.sodo.wc .rtbg { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.25); }
svg.sodo.wc .rt, svg.sodo.wc .r-group, svg.sodo.wc .r-r16, svg.sodo.wc .r-qf, svg.sodo.wc .r-sf, svg.sodo.wc .r-final, svg.sodo.wc .r-third { fill: #F5C542; }
svg.sodo.wc .hdt .r-group, svg.sodo.wc .hdt .r-r16, svg.sodo.wc .hdt .r-qf, svg.sodo.wc .hdt .r-sf, svg.sodo.wc .hdt .r-final { fill: #33406b; }
svg.sodo.wc .gbox { fill: #fff; stroke: #cfd8ee; }
svg.sodo.wc .ghd { fill: #F5C542; }
svg.sodo.wc .ght { fill: #0f1f4d; }
svg.sodo.wc .grow { fill: transparent; }
svg.sodo.wc .side.grp.top .grow { fill: #fff4d6; }
svg.sodo.wc .gn { fill: #0f1f4d; } svg.sodo.wc .side.grp.top .gn { fill: #0f1f4d; }
svg.sodo.wc .gs, svg.sodo.wc .gl { fill: #5b6b99; } svg.sodo.wc .gw { fill: #0f1f4d; }
svg.sodo.wc .rankbg { fill: #e9edf7; } svg.sodo.wc .rankt { fill: #0f1f4d; } svg.sodo.wc .side.grp.top .rankbg { fill: #F5C542; }
svg.sodo.wc .finbg { fill: rgba(245,197,66,.14); stroke: #F5C542; stroke-width: 2; }
svg.sodo.wc .finlbl { font-size: 13px; font-weight: 900; fill: #F5C542; letter-spacing: .12em; }
svg.sodo.wc .thirdbg { fill: rgba(205,127,50,.14); stroke: #d9975a; stroke-width: 2; }
svg.sodo.wc .thirdlbl { font-size: 12.5px; font-weight: 900; fill: #e9b07a; letter-spacing: .12em; }
svg.sodo.wc .bigtitle { font-size: 30px; font-weight: 900; fill: #fff; letter-spacing: .04em; }
svg.sodo.wc .subtitle { font-size: 15px; font-weight: 800; fill: #F5C542; letter-spacing: .12em; text-transform: uppercase; }
svg.sodo.wc .stars { font-size: 11px; fill: #F5C542; letter-spacing: .3em; }
svg.sodo.wc .trophy { font-size: 78px; }
svg.sodo.wc .cbox { fill: #F5C542; stroke: #fff3c4; } svg.sodo.wc .ct { fill: #0f1f4d; }
svg.sodo.wc .notebg { fill: #fde68a; } svg.sodo.wc .notet { fill: #7a4b00; }
.print-page svg.sodo.wc .sdbg { fill: #fff; }
.print-page svg.sodo.wc .shadow { fill: none; }
.print-page svg.sodo.wc .ln { stroke: #777; } .print-page svg.sodo.wc .ln.soft { stroke: #aaa; } .print-page svg.sodo.wc .dot { fill: #777; }
.print-page svg.sodo.wc .rt, .print-page svg.sodo.wc .r-group, .print-page svg.sodo.wc .r-sf, .print-page svg.sodo.wc .r-final, .print-page svg.sodo.wc .r-qf, .print-page svg.sodo.wc .r-r16 { fill: #7a4b00; }
.print-page svg.sodo.wc .rtbg { fill: #fff6dc; stroke: #e5c46a; }
.print-page svg.sodo.wc .bigtitle { fill: #0f1f4d; } .print-page svg.sodo.wc .finlbl { fill: #7a4b00; } .print-page svg.sodo.wc .thirdlbl { fill: #8a5a2b; }
.print-page svg.sodo.wc .box, .print-page svg.sodo.wc .gbox { stroke: #999; }

/* Hình sân pickleball */
svg.court { width: 100%; height: auto; display: block; font-family: "Be Vietnam Pro", system-ui, sans-serif; }
svg.court .ct-ground { fill: #2f7d4f; }
svg.court .ct-surface { fill: #1f5fc2; }
svg.court .ct-kitchen { fill: #2a6fd9; }
svg.court .ct-lines rect, svg.court .ct-lines line { fill: none; stroke: #fff; stroke-width: 3; }
svg.court .ct-net { fill: #10203f; } svg.court .ct-post { fill: #e5e7eb; }
svg.court .ct-title { font-size: 15px; font-weight: 900; fill: #fff; letter-spacing: .08em; }
svg.court .ct-live { font-size: 13px; font-weight: 800; fill: #FDBA74; }
svg.court .ct-free { font-size: 13px; font-weight: 800; fill: #bbf7d0; }
svg.court .ct-name { font-size: 17px; font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 3px; }
svg.court .ct-pl { font-size: 11.5px; fill: #dbeafe; paint-order: stroke; stroke: rgba(0,0,0,.3); stroke-width: 2px; }
svg.court .ct-score { font-size: 52px; font-weight: 900; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 4px; font-variant-numeric: tabular-nums; }
svg.court .ct-gw { font-size: 12px; fill: #dbeafe; font-weight: 700; }
svg.court .ct-serve { font-size: 12.5px; font-weight: 900; fill: #FDBA74; letter-spacing: .06em; }
svg.court .ct-half.serving .ct-name { fill: #FDE68A; }
svg.court .ct-empty { font-size: 20px; font-weight: 900; fill: rgba(255,255,255,.7); letter-spacing: .2em; }
svg.court .ct-next { font-size: 15px; font-weight: 700; fill: #fff; }
svg.court .ct-meta { font-size: 12.5px; fill: #fff; opacity: .9; }
svg.court.free .ct-surface { fill: #235aa8; opacity: .85; }
.s-court svg.court { border-radius: 14px; margin: 4px 0 8px; }
.cs svg.court.compact { border-radius: 10px; margin: 6px 0 4px; }
svg.court .ct-pill { fill: rgba(10,20,50,.75); }
.sodo-wrap svg.sodo { max-width: 100%; height: auto; }
.ls-pos { font-size: clamp(.6rem, 1.6vh, .72rem); font-weight: 800; letter-spacing: .12em; color: var(--muted); opacity: .8; }
svg.court .ct-head { fill: #fff; stroke: rgba(0,0,0,.35); stroke-width: 1.5; }
svg.court .ct-body { fill: #fff; stroke: rgba(0,0,0,.35); stroke-width: 1.5; }
svg.court .ct-p.t1 .ct-head, svg.court .ct-p.t1 .ct-body { fill: #FDE68A; }
svg.court .ct-p.t2 .ct-head, svg.court .ct-p.t2 .ct-body { fill: #93C5FD; }
svg.court .ct-ring { fill: rgba(251,146,60,.25); stroke: #FB923C; stroke-width: 2; }
svg.court .ct-ball { fill: #C6F135; stroke: #365314; stroke-width: 1; }
svg.court .ct-lbl { font-size: 10.5px; font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.5); stroke-width: 2.5px; }
svg.court .ct-lbl.gn-nam { fill: #7fe3ff; } svg.court .ct-lbl.gn-nu { fill: #ffb3c1; }
svg.court .ct-legend { font-size: 10.5px; fill: rgba(255,255,255,.8); }
svg.court .ct-name { font-size: 14px; }
svg.court .ct-score { font-size: 40px; }
.ls-first { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: clamp(.72rem, 1.9vh, .85rem); color: var(--muted); }
.ls-first button { background: rgba(255,255,255,.08); color: #fff; border: 1px solid var(--line); border-radius: 999px; padding: clamp(4px, 1vh, 8px) clamp(12px, 3vw, 18px); font-size: inherit; cursor: pointer; min-height: 32px; }
.ls-first button.on { background: var(--brand); border-color: var(--brand); font-weight: 800; }

svg.court .ct-name { font-size: 12.5px; } svg.court .ct-name.srv { fill: #FDE68A; }
svg.court .ct-score { font-size: 34px; }
svg.court .ct-p.server image { animation: ctServe 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
svg.court .ct-p.server .ct-ring { animation: ctRing 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ctServe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ctRing { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.12); } }
svg.court .ct-lbl { font-size: 10px; }

/* Sân thu nhỏ trên máy trọng tài: nhìn giống màn chiếu, chạm vào hình VĐV để chọn người giao đầu */
.ls-court { flex: 0 0 auto; display: flex; justify-content: center; }
.ls-court svg.court { width: min(100%, calc(24vh * 1.875)); height: auto; border-radius: 12px; }
.ls-court .ct-p { cursor: pointer; }
.ls-pick { margin: 10px 0; } .ls-pick-hd { font-weight: 800; margin-bottom: 6px; } .ls-pick-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ls-pick-btns .btn { padding: 14px 8px; font-size: 1.05rem; }
@media (max-width: 480px) and (orientation: portrait) { .ls-court svg.court { width: min(100%, calc(23vh * 1.875)); } .ls-pts { font-size: clamp(2rem, 10vh, 4.5rem); } .ls-side { padding: 4px 6px; } .ls-pl { display: none; } .ls-name { font-size: clamp(.85rem, 2.2vh, 1.05rem); } .ls-serve { font-size: clamp(.72rem, 1.9vh, .9rem); } .ls-first { display: none; } .ls-adj { margin-top: 3px; } .ls-point, .ls-fault { padding: clamp(8px, 1.8vh, 14px) 6px; } .ls-court-hint { display: block; } }
@media (max-height: 700px) and (orientation: portrait) { .ls-court svg.court { width: min(100%, calc(20vh * 1.875)); } .ls-first { font-size: .68rem; } .ls-first button { min-height: 24px; padding: 1px 9px; } .ls-pts { font-size: clamp(1.8rem, 9vh, 3.6rem); } .ls-pl { display: none; } .ls-games { display: none; } .ls-point, .ls-fault { padding: 7px 6px; } .ls-help { display: none; } }
@media (orientation: landscape) and (max-height: 520px) {
  .ls { grid-template-columns: minmax(0, 1fr) minmax(240px, 42%) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto auto; align-content: start; grid-template-areas: "top top top" "games games games" "s1 court s2" "s1 call s2" "s1 act s2" "s1 small s2"; }
  .ls-court { grid-area: court; min-height: 0; align-self: start; }
  .ls-court svg.court { width: min(100%, calc(28vh * 1.875)); height: auto; }
  .ls-court-hint { display: none; }
  .ls-side { align-self: stretch; }
  .ls-call { align-self: end; }
  .ls-first { font-size: .68rem; gap: 4px; } .ls-first button { min-height: 22px; padding: 1px 8px; }
}
@media (orientation: landscape) and (max-height: 400px) { .ls-court svg.court { width: min(100%, calc(26vh * 1.875)); } .ls-first { display: none; } .ls-call { font-size: .85rem; } .ls-call b { font-size: 1.1rem; } .ls-point, .ls-fault { padding: 4px 6px; font-size: .85rem; } .ls-actions.small-row .btn { padding: 2px 4px; font-size: .68rem; } }
@media (orientation: landscape) and (max-height: 300px) { .ls-court { display: none; } }

.ls-back { white-space: nowrap; }
.ls-court-hint { display: none; text-align: center; font-size: .68rem; color: var(--muted); margin: -2px 0 0; }

@media (max-width: 480px) and (orientation: portrait) {
  .ls-actions.small-row { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .ls-actions.small-row .btn { font-size: .7rem; padding: 6px 2px; line-height: 1.15; }
  .ls-court svg.court { width: min(100%, calc(20vh * 1.875)); }
  .ls-pts { font-size: clamp(1.8rem, 8.5vh, 4rem); }
  .ls-games { font-size: .75rem; }
  .ls-side { padding: 3px 6px; }
  .ls-serve { min-height: 0; }
}
@media (max-height: 600px) and (orientation: portrait) { .ls-court svg.court { width: min(100%, calc(15vh * 1.875)); } .ls-games { display: none; } .ls { gap: 4px; padding: 6px 10px 6px; } .ls-pts { font-size: clamp(1.6rem, 7vh, 3rem); } .ls-court-hint { display: none; } .ls-call { font-size: .9rem; } .ls-call b { font-size: 1.2rem; } .ls-point, .ls-fault { padding: 6px 4px; font-size: .85rem; } }

/* Chế độ "xem sân" của trọng tài */
.ls-vm { margin-left: auto; white-space: nowrap; }
.ls.lsc { display: flex; flex-direction: column; gap: 6px; }
.lsc-court { flex: 1 1 auto; min-height: 150px; display: flex; justify-content: center; align-items: center; }
.lsc-court svg.court { width: 100%; height: auto; max-height: 100%; aspect-ratio: 480 / 270; border-radius: 14px; }
.lsc-court .ct-p { cursor: pointer; }
svg.court .ct-tap { fill: transparent; cursor: pointer; } svg.court .ct-tap:active { fill: rgba(255,255,255,.15); }
.lsc-actions { display: grid; grid-template-columns: 2fr 2fr 1fr 1fr 1fr 1.2fr; gap: 6px; }
.lsc-actions .btn { padding: clamp(6px, 1.8vh, 14px) 6px; font-size: clamp(.75rem, 2.4vh, 1rem); white-space: nowrap; line-height: 1.2; }
.lsc-actions .ls-point, .lsc-actions .ls-fault { font-size: clamp(.8rem, 2.6vh, 1.05rem); }
@media (orientation: landscape) and (max-height: 520px) {
  .ls.lsc { display: flex; grid-template-areas: none; height: 100dvh; padding: 4px 10px 6px; }
  .ls.lsc .ls-top { margin: 0; } .ls.lsc .ls-call { font-size: clamp(.8rem, 3.5vh, 1rem); } .ls.lsc .ls-call b { font-size: clamp(1rem, 5vh, 1.4rem); }
  .ls.lsc .ls-help { display: none; }
}
@media (max-width: 640px) and (orientation: portrait) { .lsc-actions { grid-template-columns: 1fr 1fr; } .lsc-actions .ls-point, .lsc-actions .ls-fault { grid-column: span 1; } }
.ls.lsc .ls-call { text-align: center; }
.ls.lsc .lsc-court svg.court { border-radius: 10px; }

/* Lịch theo VĐV */
.ptt-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 10px;padding:0}
.ptt-bar select.ptt-sort{width:auto;flex:0 0 auto}
.ptt-find{flex:1;min-width:160px;max-width:320px;padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:inherit}
.ptt-sort{padding:7px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(40,22,85,.9);color:inherit}
table.ptt th,table.ptt td{min-width:150px;font-size:.88rem}
table.ptt th.tt-time,table.ptt td.tt-time{min-width:130px;width:auto;max-width:190px;white-space:normal}
table.ptt th.num,table.ptt td.num{min-width:0;width:44px;text-align:center}
table.ptt td.ptt-empty{background:rgba(255,255,255,.015)}
table.ptt td.ptt-conf{box-shadow:inset 0 0 0 2px #ff5b8a}
.ptt-m{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:5px 7px;margin-bottom:4px;line-height:1.3}
.ptt-m.live{border-color:#ff5b8a;background:rgba(255,91,138,.15)}
.ptt-m.win{border-color:rgba(125,255,179,.6)}
.ptt-m.done{opacity:.8}
.ptt-m .sc{font-weight:800;margin-left:4px;white-space:nowrap}
.ptt-m .sc.win{color:#7dffb3}
.ptt-vs{margin-top:2px}
@media (max-width:640px){table.ptt th,table.ptt td{min-width:130px}table.ptt th.tt-time,table.ptt td.tt-time{min-width:110px;max-width:140px}}

/* Thống kê VĐV theo giới */
.pstats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.pst{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);min-width:110px}
.pst b{grid-row:1/3;font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.pst span{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}
.pst small{color:var(--muted,#b9b3d6);font-size:.75rem}
.pst.nam{border-color:rgba(77,210,255,.5);background:rgba(77,210,255,.1)}.pst.nam b{color:#4dd2ff}
.pst.nu{border-color:rgba(255,143,163,.5);background:rgba(255,143,163,.1)}.pst.nu b{color:#ff8fa3}
.sx-nam{color:#4dd2ff;white-space:nowrap}.sx-nu{color:#ff8fa3;white-space:nowrap}
/* Màu theo giới tính dùng chung: nam xanh, nữ hồng */
b.sx-nam,b.sx-nu,h1.sx-nam,h1.sx-nu{white-space:normal}
.chip.sx-nam{background:rgba(77,210,255,.18);color:#9fe8ff}
.chip.sx-nu{background:rgba(255,143,163,.18);color:#ffc2cd}
.chip.sx-nam.on,.chip.sx-nu.on{background:var(--ok-soft);color:#A7F3D0}
.chip.sx-nam.off,.chip.sx-nu.off{background:var(--danger-soft);color:#FFB4B4}
select.sx-nam{color:#4dd2ff}select.sx-nu{color:#ff8fa3}
option.sx-nam{color:#0b6ea8}option.sx-nu{color:#c2185b}
text.gn-nam{fill:#4dd2ff}text.gn-nu{fill:#ff8fa3}
.sx-legend{display:flex;gap:14px;align-items:center;font-size:.85rem;opacity:.9;margin:4px 0}
.sx-legend i{font-style:normal}

/* Nút xoay ngang màn hình (điện thoại) */
.ls-rot { display: none; }
@media (max-width: 900px) and (orientation: portrait) { .ls-rot { display: inline-block; } }
.ls-rot.on { color: var(--live); }

/* Băng thông báo giải đã hoãn / đã hủy */
.g-state{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;border-radius:14px;padding:12px 16px;margin:10px 0;font-size:1rem;border:2px solid}
.g-state b{font-size:1.15rem;letter-spacing:.03em}
.g-state span{opacity:.92}
.g-state.hoan{background:rgba(251,146,60,.16);border-color:#fb923c;color:#ffd7ae}
.g-state.huy{background:rgba(239,68,68,.16);border-color:#ef4444;color:#ffc2c2}

/* Màu nam/nữ trong ô bảng đấu trên sơ đồ (ăn cả nền tối lẫn nền sáng) */
svg.sodo .side.grp .gn.gn-nam, svg.sodo .side.grp.top .gn.gn-nam { fill: #7fd8ff; }
svg.sodo .side.grp .gn.gn-nu, svg.sodo .side.grp.top .gn.gn-nu { fill: #ffb3c1; }
svg.sodo.wc .side.grp .gn.gn-nam, svg.sodo.wc .side.grp.top .gn.gn-nam { fill: #0b5f9e; }
svg.sodo.wc .side.grp .gn.gn-nu, svg.sodo.wc .side.grp.top .gn.gn-nu { fill: #b01e52; }
.print-page svg.sodo .side.grp .gn.gn-nam { fill: #0b5f9e; }
.print-page svg.sodo .side.grp .gn.gn-nu { fill: #b01e52; }

/* Khung "dùng chung cho cả giải" trong Cài đặt nội dung */
.shared-box{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:12px;padding:10px 12px;margin:0 0 12px}
.f small.muted{display:block;margin-top:4px;font-size:.8rem;line-height:1.4}
.f span.badge,.f button.badge{display:inline-block;width:auto;margin-left:6px;vertical-align:middle}
button.badge.go-redraw{border:1px solid var(--accent);cursor:pointer;font-family:inherit;line-height:1.3}
button.badge.go-redraw[hidden],.f button.badge[hidden]{display:none!important}
button.badge.go-redraw:hover{filter:brightness(1.25)}
button.badge.go-redraw:disabled{opacity:.6;cursor:default}
.check button.badge.go-redraw{margin-left:8px}

/* Màn hình Cài đặt gộp: biểu mẫu vẽ thẳng trong trang */
.setup-host{margin-top:12px}
.setup-host .modal.inline{background:transparent;border:0;box-shadow:none;padding:0;max-width:none;width:100%;max-height:none;overflow:visible}
.setup-host .modal.inline h2{margin-top:0}
.setup-host .modal.inline .actions{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--card) 40%);padding-top:12px}

/* Bảng khai giờ từng sân */
.ch-box{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.ch-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.ch-row b{min-width:96px}
.ch-row label{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--muted)}
.ch-row input[type=time]{width:auto;min-width:130px}
/* Ô giờ: chữ trong ô (kể cả khi trống) phải đọc được trên nền tối */
input[type=time]::-webkit-datetime-edit, input[type=time]::-webkit-datetime-edit-hour-field,
input[type=time]::-webkit-datetime-edit-minute-field, input[type=time]::-webkit-datetime-edit-ampm-field,
input[type=time]::-webkit-datetime-edit-text, input[type=datetime-local]::-webkit-datetime-edit,
input[type=date]::-webkit-datetime-edit { color: #fff; opacity: 1; }


.ch-row select{width:auto;min-width:120px;padding:6px 10px}

/* Bản in "Thể thức & thể lệ" */
.p-h2{margin:18px 0 8px;font-size:1.15rem}
.p-rules{white-space:pre-wrap;line-height:1.55;font-size:.95rem}
@media print{.p-rules{font-size:11pt;line-height:1.45}.p-h2{page-break-after:avoid}}
.p-h3{margin:14px 0 6px;font-size:1rem;color:#6D28D9}
.p-sec{margin-top:10px}
@media print{.p-break{page-break-before:always}.p-h3{page-break-after:avoid}}

/* Trang In / PDF đọc trên điện thoại: bảng nhiều cột xếp thành thẻ, chữ to dễ đọc */
@media screen and (max-width: 700px) {
  .print-page { margin: 8px; padding: 16px 12px; border-radius: 10px; }
  .print-page h1 { font-size: 1.35rem; }
  .print-page .p-h2 { font-size: 1.1rem; }
  .print-page table { font-size: 1rem; }
  .ptable { font-size: 1rem; }
  .ptable, .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable thead { display: none; }
  .ptable tr { border: 1px solid #C9BCF2; border-radius: 10px; margin: 0 0 10px; background: #fff; overflow: hidden; }
  .ptable td { border: 0; border-bottom: 1px solid #ececec; padding: 7px 11px; display: flex; gap: 10px; align-items: baseline; min-height: 0; line-height: 1.35; }
  .ptable tr > td:first-child { background: #F3EEFF; color: #4C1D95; font-weight: 800; }
  .ptable.kv tr > td:first-child { background: transparent; }
  .ptable td:last-child { border-bottom: 0; }
  .ptable td:before { content: attr(data-l); color: #6D28D9; font-weight: 700; flex: 0 0 32%; font-size: .88rem; }
  .ptable td:empty, .ptable td.sign { display: none; }
  .ptable.kv td:before { display: none; }
  .ptable.kv td.k { width: auto; }
  .print-bar { position: static; }
  .ptable.kv td { display: block; }
  .ptable.kv td:first-child { padding-bottom: 2px; border-bottom: 0; color: #555; }
  .print-page .card table { font-size: .95rem; }
  .print-page .card th, .print-page .card td { padding: 7px 6px; }
  .sheets { grid-template-columns: 1fr; }
  .print-bar { gap: 8px; }
  .print-bar select, .print-bar .btn { flex: 1 1 140px; }
  .print-bar .muted.small { flex: 1 1 100%; }
}
.ptable.kv td.k { width: 30%; }

/* Giải mẫu (dữ liệu minh họa để dùng thử) */
.demo-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin: 12px 0 4px; padding: 9px 14px; border: 1px dashed var(--brand); border-radius: 12px; background: var(--brand-soft); color: var(--ink2); font-size: .92rem; }
.card.t-card.is-demo { border-left: 4px dashed var(--brand); opacity: .93; }
.badge.demo-tag { background: var(--brand-soft); color: var(--brand-text); font-weight: 700; }

/* Tab hướng dẫn */
.gd-wrap { max-width: 900px; }
.gd-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.gd-toc a { padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line); background: var(--brand-soft); color: var(--brand-text); font-size: .9rem; font-weight: 600; }
.gd-toc a:hover { background: var(--brand); color: #fff; }
.gd-sec { scroll-margin-top: 12px; }
.gd-sec h2 { margin-top: 0; font-size: 1.25rem; }
.gd-sec h3 { margin: 18px 0 6px; font-size: 1.05rem; color: var(--brand-text); }
.gd-sec p, .gd-sec li { line-height: 1.65; }
.gd-sec ol, .gd-sec ul { padding-left: 20px; }
.gd-sec li { margin-bottom: 6px; }
.gd-steps li { margin-bottom: 10px; }
.gd-warn { border-left: 4px solid var(--accent); background: var(--accent-soft); color: var(--accent-text); padding: 10px 14px; border-radius: 0 10px 10px 0; margin: 12px 0; line-height: 1.6; }
.gd-note { border-left: 4px solid var(--brand); background: var(--brand-soft); padding: 10px 14px; border-radius: 0 10px 10px 0; margin: 12px 0; }
.gd-tbl { width: 100%; border-collapse: collapse; font-size: .93rem; }
.gd-tbl th, .gd-tbl td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
.gd-tbl thead th { background: var(--brand-soft); color: var(--brand-text); }
@media (max-width: 600px) { .gd-toc a { font-size: .85rem; padding: 6px 11px; } .gd-sec h2 { font-size: 1.1rem; } }

/* Trợ lý AI */
.rule-ok { border-left: 4px solid var(--ok); background: var(--ok-soft); color: #A7F3D0; padding: 9px 13px; border-radius: 0 10px 10px 0; margin: 10px 0; }
.ai-host { position: fixed; right: 16px; bottom: 16px; z-index: 900; }
.ai-fab { display: flex; align-items: center; gap: 8px; padding: 11px 17px; border: 0; border-radius: 99px; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 8px 26px rgba(110,60,243,.45); font-size: 1.05rem; }
.ai-fab:hover { filter: brightness(1.1); }
.ai-fab span { font-size: .92rem; }
.ai-panel { position: absolute; right: 0; bottom: 60px; width: min(420px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--brand); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden; }
.ai-panel[hidden] { display: none; }
.ai-hd { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; background: var(--brand-soft); border-bottom: 1px solid var(--line); }
.ai-x { cursor: pointer; opacity: .75; padding: 0 4px; }
.ai-x:hover { opacity: 1; }
.ai-body { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { border-radius: 14px; padding: 9px 13px; line-height: 1.6; font-size: .94rem; max-width: 92%; }
.ai-msg p { margin: 0 0 8px; } .ai-msg p:last-child { margin-bottom: 0; }
.ai-msg ul { margin: 6px 0; padding-left: 18px; }
.ai-msg.bot { background: rgba(255,255,255,.06); align-self: flex-start; }
.ai-msg.me { background: var(--brand-soft); color: #fff; align-self: flex-end; }
.ai-err { color: #FFB4B4; margin: 0; }
.ai-pre { background: rgba(0,0,0,.35); padding: 8px 10px; border-radius: 8px; overflow-x: auto; font-size: .82rem; }
.ai-plan { border: 1px dashed var(--brand); border-radius: 12px; padding: 10px 12px; margin: 8px 0; background: var(--brand-soft); }
.ai-plan .btn { margin-top: 8px; }
.ai-chips { display: flex; flex-direction: column; gap: 6px; }
.ai-chip { text-align: left; border: 1px solid var(--line); background: transparent; color: var(--brand-text); border-radius: 12px; padding: 8px 12px; font: inherit; font-size: .88rem; cursor: pointer; }
.ai-chip:hover { background: var(--brand-soft); }
.ai-in { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.ai-in input { flex: 1; }
@media print { .ai-host { display: none !important; } }
@media (max-width: 520px) { .ai-fab span { display: none; } .ai-panel { bottom: 58px; } }
.ai-prov { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.ai-prov-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ai-prov-row.on { border-color: var(--brand); background: rgba(139,92,246,.06); }
.ai-prov-row .f span { font-size: .82rem; }
.ai-prov-row .check.mb0 { margin: 0; }

/* ---------- Trang giới thiệu ---------- */
.intro { max-width: 1060px; margin: 0 auto; padding: 0 18px 60px; }
.in-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; flex-wrap: wrap; }
.in-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.15rem; }
.in-brand .logo-dot { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #FDE68A, #F59E0B 70%); display: inline-block; }
.in-hero { padding: 40px 0 34px; border-bottom: 1px solid var(--line); }
.in-kick { display: inline-block; padding: 5px 14px; border-radius: 99px; background: var(--brand-soft); color: var(--brand-text); font-size: .85rem; font-weight: 700; letter-spacing: .02em; }
.in-hero h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.15; margin: 16px 0 12px; text-wrap: balance; max-width: 19ch; }
.in-lead { font-size: 1.1rem; line-height: 1.7; color: var(--ink2); max-width: 62ch; margin: 0 0 22px; }
.in-cta { gap: 12px; flex-wrap: wrap; }
.in-cta .btn.big { flex: 0 0 auto; width: auto; }
@media (max-width: 560px) { .in-cta .btn.big { width: 100%; } }
.btn.big { padding: 13px 26px; font-size: 1.02rem; }
.in-sec { padding: 42px 0; }
.in-sec h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin: 0 0 10px; text-wrap: balance; }
.in-sub { color: var(--ink2); line-height: 1.7; max-width: 66ch; margin: 0 0 22px; }
.in-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.in-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.in-grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.in-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.in-card h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--brand-text); }
.in-card p { margin: 0; line-height: 1.65; color: var(--ink2); font-size: .95rem; }
.in-ic { font-size: 1.5rem; margin-bottom: 4px; }
.in-steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.in-steps li { counter-increment: s; position: relative; padding-left: 46px; line-height: 1.65; color: var(--ink2); }
.in-steps li:before { content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); font-weight: 800; display: grid; place-items: center; }
.in-note { border-left: 4px solid var(--accent); background: var(--accent-soft); color: var(--accent-text); padding: 12px 16px; border-radius: 0 12px 12px 0; line-height: 1.65; margin: 16px 0 0; }
.in-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 26px; }
.in-stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 12px; text-align: center; }
.in-stat b { display: block; font-size: 1.7rem; color: var(--brand-text); font-variant-numeric: tabular-nums; }
.in-stat span { color: var(--muted); font-size: .86rem; }
.in-h3 { font-size: 1.05rem; margin: 0 0 8px; }
.in-list { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.in-list li { line-height: 1.65; color: var(--ink2); }
.in-team { border-top: 1px solid var(--line); }
.in-team p { line-height: 1.75; max-width: 70ch; color: var(--ink2); }
.in-meta { color: var(--brand-text) !important; font-weight: 600; }
.in-end { text-align: center; border-top: 1px solid var(--line); }
.in-end .in-sub { margin-left: auto; margin-right: auto; }
.in-end .in-cta { justify-content: center; }
@media (max-width: 640px) { .in-sec { padding: 32px 0; } .in-hero { padding: 26px 0 24px; } .in-lead { font-size: 1rem; } }
.in-shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.in-shot { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.in-shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); background: #1a1030; }
.in-shot figcaption { padding: 13px 16px; }
.in-shot figcaption b { display: block; color: var(--brand-text); margin-bottom: 4px; }
.in-shot figcaption span { color: var(--ink2); font-size: .92rem; line-height: 1.6; }

/* --- Chia nhóm danh sách giải theo thể thức --- */
.fmt-head { margin: 28px 0 2px; padding: 12px 16px; border-left: 4px solid var(--brand); background: linear-gradient(90deg, rgba(139,92,246,.18), rgba(139,92,246,0)); border-radius: 0 var(--radius) var(--radius) 0; }
.fmt-head.first { margin-top: 10px; }
.fmt-head h2 { margin: 0; font-size: 1.12rem; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fmt-head .fmt-n { font-size: .82rem; font-weight: 600; color: var(--brand-text); background: var(--brand-soft); border-radius: 99px; padding: 2px 10px; }
.fmt-head p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.chip.fmt { background: rgba(245,158,11,.18); color: var(--accent-text); font-weight: 600; margin-right: 4px; }
@media (max-width: 640px) { .fmt-head { margin-top: 20px; padding: 10px 12px; } .fmt-head h2 { font-size: 1.02rem; } }

/* ===== Nháy làm nổi những ai ĐANG thi đấu ===== */
@keyframes pbNowGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(251,146,60,.55), 0 0 0 rgba(251,146,60,0); } 50% { box-shadow: 0 0 0 4px rgba(251,146,60,.22), 0 0 22px rgba(251,146,60,.55); } }
@keyframes pbNowText { 0%,100% { color: var(--live); text-shadow: 0 0 10px rgba(251,146,60,.65); } 50% { color: #FFD9B0; text-shadow: 0 0 18px rgba(251,146,60,.95); } }
@keyframes pbNowRow  { 0%,100% { background: rgba(251,146,60,.10); } 50% { background: rgba(251,146,60,.26); } }
@keyframes pbNowSvg  { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* thẻ trận / ô lịch đang đấu */
.match.now, .tt-m.now, .ptt-m.now, .q-card.now { animation: pbNowGlow 1.25s ease-in-out infinite; border-color: var(--live) !important; }
/* tên VĐV đang thi đấu */
.pn.now { animation: pbNowText 1.25s ease-in-out infinite; font-weight: 800; }
.pn.now:after { content: " ●"; font-size: .7em; vertical-align: .15em; }
/* hàng bảng xếp hạng / danh sách đội của đội đang thi đấu */
tr[data-team].now > td { animation: pbNowRow 1.25s ease-in-out infinite; }
tr[data-team].now > td:first-child { box-shadow: inset 4px 0 0 var(--live); }
/* sân đang có trận */
.cs.busy, .court.busy, .s-court.busy { animation: pbNowGlow 1.6s ease-in-out infinite; }
/* sơ đồ: ô trận và đội đang thi đấu */
/* sơ đồ chạy được cả nền sáng lẫn nền tối -> chỉ tô viền và nền, KHÔNG đổi màu chữ */
svg.sodo .mb.now .box { stroke: #FB923C; stroke-width: 3; }
svg.sodo .side.now .sidebg, svg.sodo .side.now .grow { fill: rgba(251,146,60,.26); }
svg.sodo .side.now .tn, svg.sodo .side.grp.now .gn { font-weight: 800; }
svg.sodo .mb.now .livet { animation: pbNowSvg 1.1s ease-in-out infinite; }

/* dải "Chuẩn bị tới vòng…" */
.stage-next { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 3px 12px; border-radius: 99px; font-weight: 800;
  background: linear-gradient(90deg, rgba(245,158,11,.30), rgba(245,158,11,.12)); border: 1px solid rgba(245,158,11,.65); color: #FFD27A; white-space: nowrap; }
.stage-next .sl { font-weight: 600; opacity: .85; font-size: .88em; }
/* nhấp nháy bằng viền sáng chứ không mờ chữ đi — trên màn hình sân vẫn đọc rõ */
.stage-next.blink { animation: pbNextPulse 1.4s ease-in-out infinite; }
@keyframes pbNextPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.0); border-color: rgba(245,158,11,.55); } 50% { box-shadow: 0 0 0 5px rgba(245,158,11,.18), 0 0 20px rgba(245,158,11,.5); border-color: #FBBF24; } }
.stage-bar.big .stage-next { font-size: 1.05rem; padding: 5px 16px; }

@media (prefers-reduced-motion: reduce) {
  .match.now, .tt-m.now, .ptt-m.now, .q-card.now, .cs.busy, .court.busy, .s-court.busy { animation: none; box-shadow: 0 0 0 3px rgba(251,146,60,.35); }
  .pn.now { animation: none; color: var(--live); }
  tr[data-team].now > td { animation: none; background: rgba(251,146,60,.18); }
  .blink, .stage-next { animation: none; }
}
/* trận đã đấu xong thì thôi nháy tên — chỉ những chỗ liên quan tới trận đang diễn ra mới sáng */
.done .pn.now, .tt-m.done .pn.now, .ptt-m.done .pn.now { animation: none; color: inherit; text-shadow: none; font-weight: inherit; }
.done .pn.now:after, .tt-m.done .pn.now:after, .ptt-m.done .pn.now:after { content: none; }
svg.sodo .mb.done .side.now .sidebg { fill: transparent; }
svg.sodo .mb.done .side.now .tn { fill: inherit; }
/* tiêu đề mục trong tab Thành tích */
.sec-h { font-size: 1.15rem; margin: 6px 0 12px; padding-left: 12px; border-left: 4px solid var(--brand); }
.sec-h.mt { margin-top: 28px; }

/* ===== 🔁 Đổi người ===== */
.pt-res { display: grid; gap: 8px; margin-top: 10px; max-height: 52vh; overflow-y: auto; }
.pt-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 10px 14px; border-radius: 12px;
  background: var(--card2); border: 1px solid var(--line); color: var(--ink); cursor: pointer; font: inherit; }
.pt-item:hover, .pt-item:focus-visible { border-color: var(--brand); background: var(--card3); outline: none; }
.pt-item.pt-new { border-style: dashed; color: var(--accent-text); }
.pt-live { color: var(--live); font-weight: 700; }
.pt-back { margin-bottom: 10px; }
.pt-head { padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); margin-bottom: 12px; }
.pt-head > b { font-size: 1.2rem; }
.pt-acts { display: grid; gap: 10px; }
.pt-act { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 12px 14px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line-s); color: var(--ink); cursor: pointer; font: inherit; }
.pt-act .i { grid-row: 1 / span 2; font-size: 1.6rem; text-align: center; }
.pt-act b { font-size: 1.02rem; }
.pt-act small { color: var(--muted); font-size: .86rem; line-height: 1.35; }
.pt-act:hover:not([disabled]), .pt-act:focus-visible { border-color: var(--brand); background: var(--card3); outline: none; }
.pt-act[disabled] { opacity: .45; cursor: not-allowed; }
.pt-team .row { gap: 8px; flex-wrap: wrap; }
.pt-note { padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--line-s); color: var(--ink2); font-size: .92rem; line-height: 1.5; }
.pt-note a { color: #FDE68A; font-weight: 700; text-decoration: underline; }

/* trang giới thiệu: thương hiệu, dùng thử, giá & liên hệ */
.in-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.in-brand small { font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.in-demo-note { margin: 12px 0 0; max-width: 62ch; color: var(--accent-text); font-size: .95rem; }
.in-contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; align-items: start; border-top: 1px solid var(--line); }
.in-price { padding: 22px; border-radius: 18px; background: var(--brand-soft); border: 1px solid var(--line-s); }
.in-price h2, .in-card-c h2 { margin-top: 0; }
.in-price p { margin: 0; color: var(--ink2); font-size: 1.02rem; line-height: 1.6; }
.in-card-c { padding: 22px; border-radius: 18px; background: var(--card); border: 1px solid rgba(253,224,71,.45); }
.in-who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.in-who b { font-size: 1.25rem; } .in-who span { color: var(--muted); }
.in-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-top: 8px;
  border-radius: 12px; background: var(--card2); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.in-line:hover, .in-line:focus-visible { border-color: #FBBF24; outline: none; }
.in-line span { color: var(--muted); } .in-line b { color: #FDE68A; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .in-contact { grid-template-columns: 1fr; } }
/* tài khoản dùng thử */
.demo-try { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(245,158,11,.20), rgba(245,158,11,.06)); border: 1px solid rgba(245,158,11,.55); color: var(--ink2); line-height: 1.5; }
.demo-try .row { gap: 8px; flex-wrap: wrap; }
.demo-login { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-s); display: grid; gap: 10px; }
/* chế độ điểm danh */
.ci-mode { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; margin: 10px 0; }
.ci-mode .ci-l { font-weight: 700; font-size: .92rem; }
.ci-mode .ci-h { grid-column: 1 / -1; line-height: 1.45; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-s); border-radius: 10px; overflow: hidden; width: max-content; max-width: 100%; }
.seg button { background: transparent; color: var(--ink2); border: 0; border-right: 1px solid var(--line); padding: 6px 12px; font: inherit; font-size: .9rem; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--brand); color: #fff; font-weight: 700; }
.seg button:hover:not(.on), .seg button:focus-visible { background: var(--brand-soft); outline: none; }
.ready-line { font-size: .88rem; padding: 6px 10px; border-radius: 8px; background: rgba(52,211,153,.10); margin-top: 6px; }
.ok-t { color: var(--ok); }
.big-ready { font-size: 1.05rem; padding: 12px 18px; }
@media (max-width: 520px) { .ci-mode { grid-template-columns: 1fr; } }
/* Chuẩn bị tới…: trên điện thoại cho xuống dòng, không tràn khung */
@media (max-width: 640px) { .stage-next { white-space: normal; flex-wrap: wrap; max-width: 100%; margin-left: 0; } }
/* Bàn điểm: thẻ đang sửa chưa lưu */
.sc-card.sc-dirty { box-shadow: 0 0 0 2px #F59E0B inset; }
.sc-unsaved { background: #F59E0B; color: #1b1300; font-weight: 800; font-size: .8rem; padding: 2px 10px; border-radius: 8px 8px 0 0; }
/* Băng báo mất kết nối */
#net-warn { position: fixed; left: 0; right: 0; top: 0; z-index: 9999; background: #B91C1C; color: #fff; font-weight: 700; text-align: center; padding: 8px 14px; font-size: .95rem; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
/* Hộp nổi rung nhẹ khi bấm ra ngoài lúc còn nội dung chưa lưu */
@keyframes pbShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.modal.shake { animation: pbShake .25s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .modal.shake { animation: none; } }
/* Nút +/− ở Bàn điểm đủ lớn để chạm trên điện thoại */
@media (pointer: coarse) { .sc-row button { width: 44px; height: 44px; } }
/* --- Đăng ký: ba ô tài khoản, QR chuyển khoản, người chờ bạn cặp --- */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .grid3 { grid-template-columns: 1fr; } }
.vqr { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.06); text-align: left; }
.vqr img { width: 180px; height: auto; max-width: 100%; border-radius: 10px; background: #fff; }
.vqr .small { flex: 1 1 180px; line-height: 1.5; }
.seek { margin-top: 6px; }
.seek-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
button.chip { border: 0; cursor: pointer; min-height: 32px; font: inherit; font-size: .88rem; }
button.chip:hover, button.chip:focus-visible { background: var(--brand); outline: none; }
/* Thanh điều hướng cho khách: ẩn mục chỉ dành cho BTC, có nút mở thêm */
.nav.guest .nav-staff { display: none; }
.nav .nav-more { opacity: .75; }
/* Trang VĐV: đếm ngược + đường đi nếu thắng/thua */
.eta-cd { font-weight: 800; color: var(--accent-text, #FFD27A); font-size: .95rem; }
.pp-path { margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.05); line-height: 1.6; }
/* Hồ sơ: chuỗi phong độ */
.form-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.form-strip .fs { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; font-weight: 800; cursor: help; }
.form-strip .fs.w { background: var(--ok-soft, rgba(16,185,129,.25)); color: #A7F3D0; }
.form-strip .fs.l { background: var(--danger-soft, rgba(239,68,68,.25)); color: #FFB4B4; }
/* Chấm điểm trực tiếp: ô trạng thái đồng bộ */
.ls-sync { position: fixed; left: 10px; bottom: 10px; z-index: 900; padding: 6px 12px; border-radius: 99px; font-weight: 800; font-size: .85rem; box-shadow: 0 2px 10px rgba(0,0,0,.35); pointer-events: none; }
.ls-sync.ok { background: rgba(16,185,129,.9); color: #fff; }
.ls-sync.saving { background: rgba(245,158,11,.95); color: #1b1300; }
.ls-sync.err { background: #B91C1C; color: #fff; }
/* Bàn điều phối: hoàn tác, nút sân */
.undo-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; padding: 8px 12px; border-radius: 12px; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.5); }
.court-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* Kiểm tra trước khi bốc thăm */
.dc-list { display: grid; gap: 6px; margin: 8px 0 12px; }
.dc { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); line-height: 1.45; }
.dc.err { background: rgba(239,68,68,.18); } .dc.warn { background: rgba(245,158,11,.16); } .dc.ok { background: rgba(16,185,129,.18); }
.hl-grid { display: grid; gap: 4px; line-height: 1.5; }
/* Khán giả xem tỉ số một sân trên điện thoại (?overlay=…&kieu=xem) */
body.watch-body { background: #140d2e; padding: 12px; }
.watch-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
.watch-tabs a { flex: 0 0 auto; padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; font-weight: 700; }
.watch-tabs a.on { background: var(--brand, #7C3AED); }
.watch-hd { margin: 4px 0 10px; font-size: .9rem; } .watch-hd a { color: #C4B5FD; }
.ov.xem { display: block; min-width: 0; width: 100%; }
.ov.xem .ov-row { font-size: clamp(1.1rem, 5vw, 1.8rem); padding: 12px 14px; }
.cs-watch { float: right; margin-left: 8px; }
body.watch-body #app { padding: 0; max-width: 720px; margin: 0 auto; }
.ov.xem { margin: 0; box-sizing: border-box; }
/* Email: xem trước thư, chọn cách gửi */
.mail-pv { width: 100%; height: 460px; border: 1px solid var(--line-s, #444); border-radius: 12px; background: #fff; margin-top: 10px; }
.mail-seg { margin-top: 4px; }
.modal.wide { max-width: 760px; width: 100%; }
/* Hộp thư đi khi mất mạng */
#ob-badge { position: fixed; right: 10px; bottom: 76px; z-index: 950; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 99px; font: inherit; font-weight: 800; font-size: .88rem; background: #F59E0B; color: #1b1300; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
#ob-badge.err { background: #B91C1C; color: #fff; }
.ob-list { display: grid; gap: 4px; max-height: 320px; overflow: auto; font-size: .92rem; }
/* Mạng tại sân */
.lan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 10px 0; }
.lan-q { text-align: center; background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px; }
.lan-q .qr-img { background: #fff; border-radius: 8px; padding: 6px; display: inline-block; }
.lan-q .small { word-break: break-all; }

/* ---------- 📢 Loa sân ---------- */
.loa .loa-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.loa-head-l { display: flex; flex-direction: column; gap: 6px; }
.loa-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.loa-st { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; padding: 4px 12px; border-radius: 99px; width: fit-content; font-size: .95rem; }
.loa-st.off { background: rgba(255,255,255,.08); color: var(--dim); }
.loa-st.on { background: var(--ok-soft); color: var(--ok); }
.loa-st.talk { background: var(--live-soft); color: var(--live); animation: loaPulse 1.2s ease-in-out infinite; }
.loa-st.pause { background: var(--accent-soft); color: var(--accent-text); }
@keyframes loaPulse { 50% { box-shadow: 0 0 0 6px rgba(251,146,60,.15); } }
@media (prefers-reduced-motion: reduce) { .loa-st.talk { animation: none; } }
.loa-now { min-height: 120px; display: flex; flex-direction: column; justify-content: center; gap: 10px; border: 1px solid var(--line-s); }
.loa-now-t { font-size: clamp(1.25rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.35; color: #fff; text-wrap: pretty; }
.loa-now-idle { color: var(--muted); font-size: 1.05rem; }
.loa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.loa-grid .card { margin: 0; }
@media (max-width: 820px) { .loa-grid { grid-template-columns: 1fr; } }
.loa textarea, #lq textarea { width: 100%; background: rgba(0,0,0,.25); border: 1px solid var(--line-s); border-radius: 10px; padding: 10px; color: var(--ink); }
.loa-tpl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.loa-tpl .chip { border: 0; cursor: pointer; padding: 5px 12px; }
.loa-tpl .chip:hover { background: var(--brand); }
.loa-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow: auto; }
.loa-item { background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font-size: .92rem; line-height: 1.4; }
.loa-item .btn { float: right; padding: 0 8px; }
.loa-k { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .02em; padding: 1px 8px; border-radius: 99px; background: var(--brand-soft); color: var(--brand-text); margin-right: 4px; white-space: nowrap; }
.loa-k.k-call, .loa-k.k-last { background: var(--live-soft); color: var(--live); }
.loa-k.k-champ, .loa-k.k-end { background: var(--accent-soft); color: var(--accent-text); }
.loa-k.k-manual { background: var(--ok-soft); color: var(--ok); }
.loa-voice { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 16px; align-items: end; }
.loa-voice select, .loa-voice input[type=range] { width: 100%; }
.loa-ck { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.15); cursor: pointer; }
.loa-ck input[type=checkbox] { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.loa-ck span { display: flex; flex-direction: column; gap: 2px; }
.loa-ck small { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.loa-cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.loa-cfg h4 { margin-top: 12px; }
.loa-num { width: 64px; padding: 2px 6px; }
.loa-cfg select, .loa-num { background: rgba(0,0,0,.3); border: 1px solid var(--line-s); border-radius: 6px; color: var(--ink); }
.loa-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.loa-row input:not(.loa-num):not([type=time]) { flex: 1; min-width: 200px; }
.s-loa { margin: 0 0 14px; padding: 14px 20px; border-radius: 14px; background: linear-gradient(90deg, rgba(251,146,60,.28), rgba(245,158,11,.14)); border: 1px solid rgba(251,146,60,.5); color: #fff; font-size: clamp(1.1rem, 1.9vw, 1.6rem); font-weight: 700; line-height: 1.35; }
.loa-cfg .loa-num, .loa-row .loa-num { width: 70px !important; min-width: 0 !important; display: inline-block !important; padding: 2px 6px !important; margin: 0 3px; height: auto; }
.loa input:not([type=checkbox]):not([type=range]), .loa select { background: rgba(0,0,0,.3); border: 1px solid var(--line-s); border-radius: 8px; color: var(--ink); padding: 7px 10px; }
.loa-voice .loa-ck { grid-column: span 2; }
@media (max-width: 560px) { .loa-voice .loa-ck { grid-column: auto; } }

/* ---------- Chọn ngôn ngữ lần đầu ---------- */
#pb-langpick { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; background: rgba(12,8,28,.82); backdrop-filter: blur(6px); }
#pb-langpick .lp-box { width: min(560px, 100%); background: var(--card); border: 1px solid var(--line-s); border-radius: 18px; padding: 28px 24px; text-align: center; box-shadow: var(--shadow); }
#pb-langpick .lp-ball { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff59b, #f2c400 60%, #d9a400); box-shadow: 0 0 0 4px rgba(139,92,246,.45); }
#pb-langpick h2 { font-size: 1.3rem; margin-bottom: 6px; text-wrap: balance; }
#pb-langpick p { color: var(--muted); font-size: .92rem; }
#pb-langpick .lp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
#pb-langpick button { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 18px 12px; border-radius: 14px; border: 1px solid var(--line-s); background: var(--card2); color: var(--ink); cursor: pointer; }
#pb-langpick button b { font-size: 1.2rem; }
#pb-langpick button span { font-size: .82rem; color: var(--muted); }
#pb-langpick button:hover, #pb-langpick button:focus-visible { border-color: var(--brand); background: var(--brand-soft); outline: none; }
@media (max-width: 460px) { #pb-langpick .lp-btns { grid-template-columns: 1fr; } }

/* ===== v107: đồng đội · nhóm trình · giải thưởng · giới hạn trình · poster ===== */
.tier { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; background: var(--tc); color: #fff; font-weight: 800; font-size: .78rem; line-height: 1; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.sq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.sq-card { border-top: 4px solid var(--sc); margin-bottom: 0; }
.sq-card h3 { display: flex; align-items: center; gap: 8px; }
.sq-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--sc); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 30%, transparent); }
.sq-mem { display: flex; flex-wrap: wrap; gap: 6px; }
.sq-m { display: inline-flex; align-items: center; gap: 5px; background: var(--card2); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px 2px 3px; font-size: .92rem; }
.sq-m .lv { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sq-m .cap { background: var(--accent); color: #1b1030; font-weight: 800; border-radius: 50%; width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: .7rem; }
.sq-m select.mv, .sq-mem select.mv { width: auto; padding: 0 2px; font-size: .8rem; background: transparent; border: 0; color: var(--muted); }
.sq-pairs { display: grid; gap: 6px; }
.sq-pair, .sq-pair-ed { display: grid; grid-template-columns: 64px 1fr auto; gap: 6px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--line); }
.sq-pair span:nth-child(2) { display: flex; flex-wrap: wrap; gap: 4px; }
.sq-pair-ed { grid-template-columns: 50px 1fr 1fr; } .sq-pair-ed [data-sum] { grid-column: 2 / -1; font-size: .8rem; margin-top: -4px; }
.sq-pair-ed select { padding: 5px 6px; font-size: .9rem; }
.tier-sum { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.tier-sum span { display: inline-flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; padding: 3px 10px; border-radius: 99px; background: var(--card2); }
.tier-sum .ok { outline: 1px solid var(--ok); } .tier-sum .warn { outline: 1px solid var(--accent); }
.tie-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.tie { margin-bottom: 0; }
.tie.fin { border-color: var(--line-s); }
.tie-hd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; }
.tie-hd .tn.r { text-align: right; } .tie-hd .tn.win { color: var(--accent-text); }
.tie-hd .ts { font-size: 1.5rem; font-variant-numeric: tabular-nums; background: var(--card3); padding: 2px 14px; border-radius: 10px; }
.tie-st { text-align: center; margin: 2px 0 8px; }
.rubs { display: grid; gap: 4px; }
.rub { display: grid; grid-template-columns: 70px 1fr 74px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--card2); font-size: .9rem; }
.rub.live { outline: 2px solid var(--live); }
.rub .rb { font-weight: 700; color: var(--muted); white-space: nowrap; }
.rub .rp.r { text-align: right; } .rub .rp.win { font-weight: 800; color: #fff; } .rub .rp:not(.win) { color: var(--ink2); }
.rub .rsc { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.rub .btn.sm.ghost { padding: 0 6px; }
.xtab th, .xtab td { text-align: center; }
.xtab td.x-self { background: repeating-linear-gradient(45deg, transparent 0 6px, var(--line) 6px 7px); }
.xtab td.x-w { background: var(--ok-soft); } .xtab td.x-l { background: var(--danger-soft); } .xtab td.x-d { background: var(--accent-soft); } .xtab td.x-p { background: var(--live-soft); }
.team-sodo { display: grid; gap: 12px; padding: 8px; }
.lvcap { display: inline-block; margin: 4px 0; padding: 3px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: .9rem; }
.prizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 4px; }
.pz { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); }
.pz .cash { font-size: 1.15rem; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.pz0 { border-color: #f5c542; background: linear-gradient(160deg, rgba(245,197,66,.18), var(--card2)); }
.pz1 { border-color: #cfd6e4; } .pz2 { border-color: #d49a6a; }
.pz-mini { margin-top: 4px; font-size: .85rem; color: var(--accent-text); }
.pz-ed { display: grid; gap: 6px; }
.pz-row { display: grid; grid-template-columns: 1.1fr .9fr 1.6fr 64px auto; gap: 6px; }
.pz-row input, .pz-row select { padding: 7px 8px; }
fieldset.fs { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; margin: 10px 0; }
fieldset.fs legend { padding: 0 6px; font-weight: 700; color: var(--ink2); }
.pick-list { max-height: 50vh; overflow: auto; display: grid; gap: 2px; margin: 8px 0; }
.reveal .rv-now { font-size: 1.4rem; text-align: center; margin: 10px 0 14px; min-height: 2.2em; }
.rv-grid { display: grid; gap: 10px; }
.rv-col { border: 1px solid var(--line); border-top: 4px solid var(--sc); border-radius: 12px; padding: 8px; background: var(--card2); min-height: 200px; }
.rv-col h3 { text-align: center; font-size: 1.05rem; }
.rv-item { display: flex; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 8px; animation: rvIn .5s ease-out both; }
.rv-pairs { display: grid; gap: 6px; }
@keyframes rvIn { from { opacity: 0; transform: translateY(-8px) scale(.96); background: var(--accent-soft); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rv-item { animation: none; } }
.ginfo { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.ginfo div { display: block; } .ginfo b { color: var(--ink2); margin-right: 4px; }
.gala { padding: 8px 12px; border-radius: 10px; background: linear-gradient(90deg, var(--brand-soft), transparent); }
@media (max-width: 640px) {
  .tie-list { grid-template-columns: 1fr; }
  .rub { grid-template-columns: 52px 1fr 56px 1fr; } .rub > .btn { grid-column: 1 / -1; }
  .pz-row { grid-template-columns: 1fr 1fr; } .pz-row input[data-pz$=":items"] { grid-column: 1 / -1; }
  .sq-pair-ed { grid-template-columns: 50px 1fr 1fr; } .sq-pair-ed [data-sum] { grid-column: 1 / -1; }
}
.pst-prev { display: grid; place-items: center; background: repeating-conic-gradient(var(--card2) 0 25%, var(--card) 0 50%) 0 0/24px 24px; border-radius: 12px; padding: 12px; min-height: 240px; }
.pst-canvas { max-width: 100%; max-height: 70vh; height: auto; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.slogan { font-style: italic; color: var(--accent-text); }
.pz-det { margin: 6px 0 12px; } .pz-det summary { cursor: pointer; font-weight: 700; color: var(--accent-text); }
.reg-meta { margin: 4px 0 2px 30px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.modal.xwide { max-width: 1180px; } .modal.xwide .rv-now { font-size: 1.8rem; } .modal.xwide .rv-item { font-size: 1.1rem; }
/* v108 */
tr.top2 td { background: rgba(56,189,248,.14); } .sr-a { color: var(--ok); } .sr-b { color: #38BDF8; }
.series-lbl { font-weight: 800; font-size: 1.15rem; margin: 10px 0 4px; color: var(--accent-text); } .series-lbl.b { color: #7DD3FC; margin-top: 22px; }
.pz-row { grid-template-columns: 1.1fr .8fr .8fr 1.4fr 64px auto; } .pz-hd { font-weight: 700; } .pz-hd span { padding-left: 4px; }
.gnotes { display: flex; flex-wrap: wrap; gap: 6px 14px; } .gnotes span { color: var(--accent-text); font-weight: 600; }
.media-logos { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .media-logos img { height: 40px; background: #fff; border-radius: 8px; padding: 4px; }
@media (max-width: 640px) { .pz-hd { display: none; } .pz-row { grid-template-columns: 1fr 1fr; } }
.side-aw { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--line); }
.side-aw select { padding: 6px; }
.side-won, .side-pz { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 10px; color: var(--accent-text); }
.sp-row { grid-template-columns: 1.4fr 1.4fr .9fr auto; }
@media (max-width: 640px) { .side-aw { grid-template-columns: 1fr; } .sp-row { grid-template-columns: 1fr 1fr; } }
.vqr-code { background: #fff; border-radius: 12px; padding: 10px; width: 230px; max-width: 100%; margin: 0 auto 6px; text-align: center; }
.vqr-code svg { width: 100%; height: auto; display: block; }
.vqr-amt { color: #111; font-weight: 800; font-size: 1.05rem; }
.partner-hd { font-weight: 700; color: var(--ink2); margin: 6px 0 4px; }

/* trang danh sách giải: tìm nhanh + tab theo thể thức */
.home-find { margin: 6px 0 10px; }
.home-find input { width: 100%; max-width: 460px; }
#home-body .tabs .fmt-n { margin-left: 4px; font-size: .78rem; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.08); }
#home-body .home-note { margin: -8px 0 12px; }
@media (min-width: 700px) { #home-body .tabs { flex-wrap: wrap; overflow-x: visible; } }

/* Loa gọn trên bàn điều phối (1 cú bấm) */
.loa-on-here { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--ok-soft); border: 1px solid var(--ok); margin-bottom: 4px; }
.loa-on-here .btn { justify-self: start; }
#loa-mini { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 14px; border-radius: 99px; font-weight: 700; font-size: .95rem; box-shadow: 0 8px 24px rgba(0,0,0,.35); background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); backdrop-filter: blur(8px); }
#loa-mini.talk { background: var(--live-soft); color: var(--live); border-color: var(--live); }
#loa-mini.pause { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-text); }
#loa-mini .lm-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#loa-mini small { font-weight: 600; opacity: .85; }
#loa-mini button { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1rem; background: rgba(255,255,255,.14); color: inherit; }
#loa-mini button:hover { background: rgba(255,255,255,.24); }
#loa-mini button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }