/* Layout: sidebar app shell; the day schedule is a court-by-time grid, peak hours banded in amber like a scoreboard */
:root{
  --bg:#F2F5F3; --surface:#FFFFFF; --surface-2:#E8EEEB; --line:#D4DDD9; --line-strong:#B7C5BF;
  --fg:#15211D; --muted:#5D6F68;
  --primary:#0E6B57; --primary-ink:#FFFFFF; --primary-soft:#D5EAE3;
  --peak:#B97614; --peak-soft:#F8EBD4;
  --danger:#B23F2E; --danger-soft:#F6DED9;
  --ok:#2F7A3B; --ok-soft:#DCEFDD;
  --info:#2D5C9B; --info-soft:#DCE6F4;
  --shadow:0 10px 30px rgba(15,40,32,.14);
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1613; --surface:#15201C; --surface-2:#1C2924; --line:#2A3A34; --line-strong:#3B4F47;
  --fg:#E3ECE8; --muted:#94A69E;
  --primary:#3DB592; --primary-ink:#04241B; --primary-soft:#163A30;
  --peak:#E2A24A; --peak-soft:#33280F;
  --danger:#E26D59; --danger-soft:#3E1D17;
  --ok:#6CC27A; --ok-soft:#173220;
  --info:#7FA8E6; --info-soft:#1A2A42;
  --shadow:0 10px 30px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1613; --surface:#15201C; --surface-2:#1C2924; --line:#2A3A34; --line-strong:#3B4F47;
  --fg:#E3ECE8; --muted:#94A69E;
  --primary:#3DB592; --primary-ink:#04241B; --primary-soft:#163A30;
  --peak:#E2A24A; --peak-soft:#33280F;
  --danger:#E26D59; --danger-soft:#3E1D17;
  --ok:#6CC27A; --ok-soft:#173220;
  --info:#7FA8E6; --info-soft:#1A2A42;
  --shadow:0 10px 30px rgba(0,0,0,.5); color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
[hidden]{display:none!important}
img{max-width:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

.app{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100%}
.side{background:var(--surface);border-right:1px solid var(--line);padding:20px 12px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh}
.brand{display:flex;flex-direction:column;gap:2px;padding:0 8px}
.brand b{font-family:var(--f-display);font-size:28px;font-weight:700;letter-spacing:.01em;line-height:1;color:var(--primary)}
.brand span{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:9px 10px;border-radius:8px;text-align:left;color:var(--muted);font-weight:500}
.nav button:hover{background:var(--surface-2);color:var(--fg)}
.nav button[aria-current="page"]{background:var(--primary-soft);color:var(--primary);font-weight:600}
.nav svg{width:18px;height:18px;flex:none}
.side .mode{margin-top:auto;font-size:12px;color:var(--muted);padding:0 8px}

main{min-width:0;padding-block:20px 40px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px}
.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.topbar h1{font-family:var(--f-display);font-size:30px;font-weight:600;margin:0;line-height:1.1;text-wrap:balance;margin-right:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line-strong);background:var(--surface);padding:7px 12px;border-radius:8px;font-weight:500;white-space:nowrap}
.btn:hover{border-color:var(--primary)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn.danger.armed{background:var(--danger);color:var(--surface)}
.btn.ghost{border-color:transparent;background:none}
.btn.sm{padding:4px 9px;font-size:13px}
.btn.icon{padding:6px 8px}
.btn svg{width:16px;height:16px}

.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:12px;color:var(--muted);font-weight:500}
.input{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:7px 10px;width:100%;min-width:0}
.input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-soft)}
textarea.input{resize:vertical;min-height:56px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.panel-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h h2{font-size:15px;margin:0;font-weight:600;margin-right:auto}
.panel-b{padding:16px}

/* summary strip */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.stat .v{font-family:var(--f-display);font-size:28px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .s{font-size:12px;color:var(--muted)}
.meter{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:4px}
.meter i{display:block;height:100%;background:var(--primary)}

/* date strip */
.days{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.day{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;min-width:58px;gap:0}
.day .dw{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.04em}
.day .dd{font-family:var(--f-display);font-size:20px;font-weight:600;line-height:1.1}
.day .dc{font-size:11px;color:var(--muted)}
.day.today .dw{color:var(--primary)}
.day[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.day[aria-pressed="true"] .dw,.day[aria-pressed="true"] .dc{color:var(--primary-ink);opacity:.85}

/* schedule grid */
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:5px}
.grid-wrap{overflow-x:auto;border-top:1px solid var(--line);-webkit-overflow-scrolling:touch}
.grid{--w:48px;display:grid;grid-template-columns:164px max-content;min-width:max-content;user-select:none}
.g-corner,.g-name{position:sticky;left:0;z-index:3;background:var(--surface);border-right:1px solid var(--line-strong)}
.g-corner{border-bottom:1px solid var(--line);font-size:11px;color:var(--muted);padding:8px 12px;display:flex;align-items:flex-end;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.g-times{position:relative;height:38px;border-bottom:1px solid var(--line)}
.g-times .t{position:absolute;bottom:6px;transform:translateX(4px);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:500}
.g-times .pk{position:absolute;top:0;height:5px;background:var(--peak);border-radius:0 0 3px 3px}
.g-times .pkl{position:absolute;top:6px;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--peak);text-transform:uppercase;transform:translateX(4px)}
.g-name{padding:8px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:68px}
.g-name b{font-weight:600;font-size:14px}
.g-name small{font-size:11px;color:var(--muted)}
.g-track{position:relative;height:68px;border-bottom:1px solid var(--line);display:grid;grid-auto-flow:column;grid-auto-columns:var(--w)}
.cell{border:0;border-left:1px solid var(--line);background:transparent;padding:0;margin:0;position:relative;cursor:pointer;min-width:0;border-radius:0}
.cell.hr{border-left-color:var(--line-strong)}
.cell:disabled{cursor:default}
.cell::after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;pointer-events:none}
.cell:not(:disabled):hover{background:var(--primary-soft)}
.cell:not(:disabled):hover::after{content:"+";color:var(--primary)}
.cell.on,.cell.on:not(:disabled):hover{background:var(--primary);border-left-color:var(--primary)}
.cell.on::after,.cell.on:not(:disabled):hover::after{content:"✓";color:var(--primary-ink)}
.cell:focus-visible{outline-offset:-2px;z-index:2}
.selbar{position:sticky;bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--primary);border-radius:12px;box-shadow:var(--shadow);padding:10px 12px}
.selinfo{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 220px}
.selinfo b{font-weight:600;font-variant-numeric:tabular-nums}
.selinfo span{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.rangelist{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:900px){.selbar{bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
.g-track .peakband{position:absolute;top:0;bottom:0;background:var(--peak-soft);opacity:.55;pointer-events:none}
.g-track .past{position:absolute;top:0;bottom:0;left:0;background:repeating-linear-gradient(135deg,transparent 0 6px,var(--surface-2) 6px 8px);opacity:.7;pointer-events:none}
.nowline{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);z-index:2;pointer-events:none}
.nowline::before{content:"";position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--danger)}
.bk{position:absolute;top:5px;bottom:5px;border-radius:7px;padding:5px 8px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;gap:1px;border:1px solid;text-align:left;font-size:12px;line-height:1.25;z-index:1}
.bk b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.bk span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85;font-variant-numeric:tabular-nums}
.bk:hover{filter:brightness(1.04);box-shadow:var(--shadow)}
.s-booked{background:var(--info-soft);border-color:var(--info);color:var(--fg)}
.s-checkin{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.s-paid{background:var(--surface-2);border-color:var(--line-strong);color:var(--muted)}
.s-cancel{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.s-pending{background:var(--peak-soft);border-color:var(--peak);border-style:dashed;color:var(--fg)}
.s-confirmed{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.bk.fixed::after{content:"↻";position:absolute;right:6px;top:4px;font-size:12px;opacity:.7}
.bk.owed{box-shadow:inset 3px 0 0 var(--danger)}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
.pill.s-booked{color:var(--info)}
.pill.s-paid{color:var(--ok);background:var(--ok-soft);border-color:var(--ok)}
.pill.s-pending{color:var(--peak);border-style:solid}
.pill.s-cancel{color:var(--danger)}
.pill.warn{color:var(--danger);background:var(--danger-soft);border-color:var(--danger)}

/* tables */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--surface-2)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
td .input{padding:5px 8px}
.empty{padding:32px 16px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--fg);font-size:15px;margin-bottom:4px}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:4px 11px;font-size:13px}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(8,20,16,.45);z-index:50;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:max(24px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.modal{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);width:100%;max-width:640px;display:flex;flex-direction:column;border:1px solid var(--line)}
.modal-h{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-h h3{margin:0;font-family:var(--f-display);font-size:24px;font-weight:600;line-height:1.1}
.modal-h p{margin:2px 0 0;color:var(--muted);font-size:13px}
.modal-h .x{margin-left:auto}
.modal-b{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.modal-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.modal-f .left{margin-right:auto;display:flex;gap:8px;flex-wrap:wrap}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fgrid .full{grid-column:1/-1}
.fgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px}
.sec-t{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin:0}
.items{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:8px}
.qty button{border:0;background:none;width:28px;height:28px}
.qty span{min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.add-item{display:flex;gap:8px}
.bill{background:var(--surface-2);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:5px;font-variant-numeric:tabular-nums}
.bill div{display:flex;justify-content:space-between;gap:12px}
.bill .due{border-top:1px dashed var(--line-strong);padding-top:7px;margin-top:3px;font-weight:700;font-size:16px}
.bill .due b{font-family:var(--f-display);font-size:24px;color:var(--primary)}
.warnbox{background:var(--danger-soft);color:var(--danger);border-radius:8px;padding:8px 12px;font-size:13px}
.notebox{background:var(--peak-soft);color:var(--fg);border-radius:8px;padding:8px 12px;font-size:13px}

/* report */
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-size:11px;font-family:var(--f-body)}
.chart .bar{fill:var(--primary)}
.chart .bar.svc{fill:var(--peak)}
.chart .grid-l{stroke:var(--line)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.hbar{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden;min-width:60px}
.hbar i{display:block;height:100%;background:var(--primary)}

.banner{background:var(--peak-soft);border:1px solid var(--peak);border-radius:10px;padding:10px 14px;font-size:13px}
.onboard{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:28px}
.onboard h2{font-family:var(--f-display);font-size:26px;margin:0;font-weight:600}
.onboard p{margin:0;color:var(--muted);max-width:60ch}

.toasts{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:80}
.toast{background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow);font-size:13.5px;max-width:340px}
.toast.err{background:var(--danger);color:#fff}

.mnav{display:none}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .mnav{display:flex;overflow-x:auto;scrollbar-width:none;position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);z-index:40;padding:4px max(4px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px))}
  .mnav button{flex:1 0 64px;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--muted);padding:6px 0}
  .mnav button[aria-current="page"]{color:var(--primary);font-weight:600}
  .mnav svg{width:20px;height:20px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two{grid-template-columns:minmax(0,1fr)}
  .toasts{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:520px){
  .grid{grid-template-columns:92px max-content}
  .g-name,.g-corner{padding-left:8px;padding-right:8px}
  .fgrid,.fgrid3{grid-template-columns:minmax(0,1fr)}
  .topbar h1{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* PHP build: account box + login page */
.who{margin-top:auto;display:flex;align-items:center;gap:8px;padding:10px 8px 0;border-top:1px solid var(--line)}
.who span{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.who b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who small{font-size:12px;color:var(--muted)}
a.btn{text-decoration:none;color:inherit}
.login-page{min-height:100%;display:flex;align-items:center;justify-content:center;padding-block:24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.login-card{width:100%;max-width:380px;padding:28px;display:flex;flex-direction:column;gap:14px}
.login-card .brand{padding:0 0 6px}
.login-card .brand b{font-size:40px}
.login-card .btn{padding-block:10px}

/* 1.2: chờ duyệt + trang khách đặt */
.nav button .badge,.mnav button .badge{background:var(--danger);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px;line-height:1.5;font-variant-numeric:tabular-nums}
.nav button .badge{margin-left:auto}
.mnav button{position:relative}
.mnav button .badge{position:absolute;top:2px;left:calc(50% + 6px);font-size:10px;padding:0 5px}
.mnav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.pendbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--peak-soft);border:1px dashed var(--peak);border-radius:12px;padding:10px 14px}
.pendbar b{font-weight:600}
.pendbar span{margin-right:auto}
.req{display:flex;flex-direction:column}
.req-h{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.req-h .who2{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:0}
.req-h .who2 b{font-size:16px;font-weight:600}
.req-h .who2 small{color:var(--muted);font-size:12.5px}
.req-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line)}
.req-f .sum{margin-right:auto;font-variant-numeric:tabular-nums}
.req-f .sum b{font-family:var(--f-display);font-size:22px;color:var(--primary)}
.req-list{display:flex;flex-direction:column;gap:14px}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:var(--surface-2);color:var(--muted)}
.tag.late{background:var(--danger-soft);color:var(--danger)}
.copyline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copyline code{background:var(--surface-2);padding:6px 10px;border-radius:8px;font-size:13px;overflow-wrap:anywhere;flex:1 1 240px;min-width:0}

.pub .pub-h{background:var(--surface);border-bottom:1px solid var(--line);padding-block:12px}
.pub .pub-in{max-width:1200px;margin:0 auto;width:100%;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.pub .pub-h .pub-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pub .pub-h .brand{margin-right:auto;padding:0}
.pub .pub-h .brand b{font-size:30px}
.pub .hotline{font-size:13px;color:var(--muted)}
.pub .hotline b{color:var(--fg);font-size:15px;user-select:all}
.pub main.pub-in{padding-block:16px 40px;display:flex;flex-direction:column;gap:16px}
.pub .pub-title h1{font-family:var(--f-display);font-size:30px;font-weight:600;margin:0;line-height:1.1}
.pub .pub-title p{margin:2px 0 0;color:var(--muted);font-size:13px}
.pub .selbar{bottom:max(12px,env(safe-area-inset-bottom,0px))}
.pub .toasts{bottom:max(16px,env(safe-area-inset-bottom,0px))}
.bk.taken{cursor:default;pointer-events:none}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--primary);border-bottom-color:var(--primary)}
.done{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px}
.done h2{font-family:var(--f-display);font-size:28px;margin:0;font-weight:600}
.done p{margin:0;max-width:65ch}
.done .code{font-family:var(--f-display);font-size:24px;letter-spacing:.08em;color:var(--primary);user-select:all}
.done-mark{width:48px;height:48px;border-radius:50%;background:var(--primary);color:var(--primary-ink);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}

/* 1.3: xé vé */
.chart .bar.tk{fill:var(--info)}
.tk-sell{display:flex;flex-direction:column;gap:16px}
.tk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
td.nw{white-space:nowrap}
.tk-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1.5px solid var(--line-strong);background:var(--surface);border-radius:12px;padding:12px 14px;min-width:0}
.tk-tile b{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.tk-tile .tk-price{font-family:var(--f-display);font-size:26px;font-weight:600;line-height:1.1;color:var(--primary)}
.tk-tile small{color:var(--muted);font-size:12px}
.tk-tile:hover:not(:disabled){border-color:var(--primary)}
.tk-tile[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft);box-shadow:inset 0 0 0 1px var(--primary)}
.tk-tile:disabled{opacity:.5;cursor:not-allowed}
.tk-form{display:grid;grid-template-columns:auto auto minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:end}
.tk-qty{height:38px}
.tk-qty button{width:38px;height:36px;font-size:18px}
.tk-qty input{width:52px;border:0;background:none;text-align:center;font-size:16px;font-weight:600;-moz-appearance:textfield}
.tk-qty input::-webkit-inner-spin-button,.tk-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.tk-pay{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;border-top:1px dashed var(--line-strong);padding-top:14px}
.tk-pay span{color:var(--muted)}
.tk-go{font-size:16px;padding:11px 20px;font-weight:600}
tr.tk-void td{color:var(--muted)}
tr.tk-void td b{text-decoration:line-through}
#printArea{display:none}
@media (max-width:900px){.tk-form{grid-template-columns:auto minmax(0,1fr)}}
@media (max-width:520px){.tk-form{grid-template-columns:minmax(0,1fr)}.tk-go{width:100%}.tk-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tk-tile{padding:10px}.tk-tile b{font-size:13px}.tk-tile .tk-price{font-size:21px}}
@media print{
  @page{size:58mm auto;margin:0}
  body>*:not(#printArea){display:none!important}
  html,body{height:auto;background:#fff!important;color:#000!important}
  #printArea{display:block}
  .tkp{width:54mm;margin:0 auto;padding:3mm 2mm 5mm;text-align:center;font-family:"Be Vietnam Pro",Arial,sans-serif;color:#000;border-bottom:1px dashed #000;break-after:page;page-break-after:always}
  .tkp-v{font-weight:700;font-size:12pt;line-height:1.2}
  .tkp-t{font-size:8pt;letter-spacing:.12em;margin-top:2mm;font-weight:700}
  .tkp-n{font-size:10pt;font-weight:600;margin-top:1mm}
  .tkp-p{font-size:16pt;font-weight:700;margin:1mm 0}
  .tkp-c{font-size:13pt;font-weight:700;letter-spacing:.06em;border:1px solid #000;display:inline-block;padding:0 2mm;margin:1mm 0}
  .tkp-s{font-size:7.5pt;margin-top:.5mm}
  .tkp-x{font-size:12pt;font-weight:700;border:2px solid #000;margin-top:2mm}
}

/* 1.4: trang khách – giá vé */
.price-cell{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.price-cell small{font-weight:400;color:var(--muted);margin-left:2px}
.price-cell.peak{color:var(--peak)}
.price-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.price-tile{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;min-width:0}
.price-tile b{font-weight:600;overflow-wrap:anywhere}
.price-tile .tk-price{font-family:var(--f-display);font-size:26px;font-weight:600;line-height:1.1;color:var(--primary)}
.price-tile .tk-price small{font-family:var(--f-body);font-size:13px;font-weight:400;color:var(--muted);margin-left:2px}
.price-tile small{color:var(--muted);font-size:12.5px}
.price-tile small.soldout{color:var(--danger);font-weight:600}

/* 1.5: tách trang khách / quản trị */
.admin-tag{font-style:normal;display:inline-block;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);background:var(--primary-soft);border-radius:6px;padding:2px 8px;align-self:flex-start}
.side .pub-link{margin-top:auto;justify-content:flex-start;font-size:12.5px;color:var(--muted)}
.side .pub-link + .who{margin-top:0}
.back-link{font-size:13px;color:var(--muted);text-decoration:none;text-align:center}
.back-link:hover{color:var(--primary);text-decoration:underline}

/* 1.6: sự kiện */
:root{--event:#6B4BB0;--event-soft:#ECE6F7}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--event:#B9A2F0;--event-soft:#2A2340}}
:root[data-theme="dark"]{--event:#B9A2F0;--event-soft:#2A2340}
.s-event{background:var(--event-soft);border-color:var(--event);color:var(--fg)}
.bk.s-event b{color:var(--event)}
.tk-kicker{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--event)}
.tk-kicker.plain{color:var(--muted)}
.tk-tile.is-event{border-color:var(--event)}
.tk-tile.is-event[aria-pressed="true"]{background:var(--event-soft);box-shadow:inset 0 0 0 1px var(--event)}
.ev-list{display:flex;flex-direction:column}
.ev-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.ev-card:last-child{border-bottom:0}
.ev-card:hover{background:var(--surface-2)}
.ev-date{display:flex;flex-direction:column;align-items:center;border:1.5px solid var(--event);border-radius:10px;padding:4px 0;line-height:1.1}
.ev-date b{font-family:var(--f-display);font-size:26px;font-weight:700;color:var(--event)}
.ev-date span{font-size:12px;font-weight:600}
.ev-date small{font-size:11px;color:var(--muted)}
.ev-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.ev-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ev-title b{font-size:15px;font-weight:600}
.ev-main small{color:var(--muted);font-size:12.5px}
.ev-nums{font-size:13px}
.ev-pend{color:var(--peak)}
.ev-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ev-sum div{background:var(--surface-2);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column}
.ev-sum span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.ev-sum b{font-family:var(--f-display);font-size:24px;font-weight:600}
.ev-court{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ev-court:has(input:checked){background:var(--event-soft);border-color:var(--event)}
td.click{cursor:pointer}
td.click:hover{background:var(--surface-2)}
@media (max-width:520px){.ev-sum{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 1.6: sự kiện trên trang khách */
.tab-count{display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:var(--event);color:var(--surface);font-size:11px;line-height:18px;text-align:center;margin-left:4px}
.pev-list{display:flex;flex-direction:column}
.pev{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);align-items:start}
.pev:last-child{border-bottom:0}
.pev-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.pev-name{font-size:16px;font-weight:600;text-wrap:balance}
.pev-main small{color:var(--muted);font-size:13px}
.pev-main p{margin:2px 0 0;font-size:13.5px;max-width:65ch}
.pev-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.pev-foot .tk-price{font-family:var(--f-display);font-size:26px;font-weight:600;color:var(--event);line-height:1.1}
.pev-foot .tk-price small{font-family:var(--f-body);font-size:13px;font-weight:400;color:var(--muted);margin-left:2px}
.pev-left{font-size:13px;font-weight:600;color:var(--muted)}
.pev-left.few{color:var(--peak)}
.pev-left.soldout{color:var(--danger)}
.pev-foot .btn{margin-left:auto}
@media (max-width:520px){.pev{grid-template-columns:52px minmax(0,1fr);gap:10px;padding:12px}.pev-foot .btn{margin-left:0;width:100%}}

/* 1.7: khung giờ sự kiện */
.slot-box{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:12px;padding:12px}
.slot-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.slot-row{display:grid;grid-template-columns:24px repeat(4,minmax(0,1fr)) 64px;gap:8px;align-items:end;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.slot-no{align-self:center;width:24px;height:24px;border-radius:50%;background:var(--event-soft);color:var(--event);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:18px}
.slot-x{display:flex;justify-content:flex-end;align-items:center;min-height:36px}
.slot-x small{color:var(--muted);font-size:11.5px;text-align:right}
.slot-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.slot-chip{display:inline-block;font-size:12px;background:var(--event-soft);color:var(--fg);border-radius:6px;padding:2px 8px;white-space:nowrap}
.slot-chip b{font-weight:600;color:var(--event)}
.tag.open{background:var(--ok-soft);color:var(--ok)}
.slot-tbl td,.slot-tbl th{padding-block:7px}
@media (max-width:640px){.slot-row{grid-template-columns:24px repeat(2,minmax(0,1fr)) 48px}.slot-row .field:nth-of-type(3){grid-column:2}.slot-row .field:nth-of-type(4){grid-column:3}.slot-x{grid-column:4;grid-row:1}}

.pev-slots{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;margin-top:6px}
.pev-slot{display:grid;grid-template-columns:110px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)}
.pev-slot:last-child{border-bottom:0}
.pev-slot.is-out{opacity:.6}
.pev-time{font-weight:700;color:var(--event)}
.pev-slot .tk-price{font-family:var(--f-display);font-size:22px;font-weight:600;line-height:1.1}
.pev-slot .tk-price small{font-family:var(--f-body);font-size:12.5px;font-weight:400;color:var(--muted);margin-left:2px}
.pev-act{display:flex;justify-content:flex-end}
.pev-soon{background:var(--event-soft);border-radius:8px;padding:8px 12px;font-size:13.5px}
@media (max-width:520px){
  .pev-slot{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"time act" "price act" "left act";row-gap:0}
  .pev-time{grid-area:time}.pev-slot .tk-price{grid-area:price}.pev-slot .pev-left{grid-area:left}.pev-act{grid-area:act}
  .pev-slot .pev-left:empty{display:none}
}

/* 1.8: tạo sự kiện xé vé từ lịch */
.ev-btn{border-color:var(--event);color:var(--event)}
.ev-btn:hover{background:var(--event-soft);border-color:var(--event)}
.evpick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--event-soft);border:1px dashed var(--event);border-radius:12px;padding:10px 14px;font-size:13.5px}
.evpick span{margin-right:auto;min-width:0}

/* 1.9: âm thanh thông báo */
.sound-box{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:0 0 4px}
.sound-box + .pub-link{margin-top:0}
.snd-tg{justify-content:flex-start;gap:8px;font-size:12.5px;white-space:normal;text-align:left}
.snd-tg svg{width:18px;height:18px;flex:none}
.snd-tg.on{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.sound-box .btn.ghost{align-self:flex-start;font-size:12.5px;padding:2px 8px}
.snd-warn{font-size:11.5px;color:var(--peak);line-height:1.35}

/* 1.9.2: chọn giọng nam / nữ */
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg-btn{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line-strong);background:var(--surface);border-radius:12px;padding:10px 14px;text-align:left;min-width:170px}
.seg-btn svg{width:22px;height:22px;flex:none;color:var(--muted)}
.seg-btn span{display:flex;flex-direction:column}
.seg-btn b{font-weight:600}
.seg-btn small{font-size:12px;color:var(--muted)}
.seg-btn[aria-checked="true"]{border-color:var(--primary);background:var(--primary-soft);box-shadow:inset 0 0 0 1px var(--primary)}
.seg-btn[aria-checked="true"] svg{color:var(--primary)}
.snd-status{font-size:13px;background:var(--surface-2);border-radius:8px;padding:8px 12px}

/* 1.9.3: tải file thông báo */
.up-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px}
.up-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line)}
.up-row:last-child{border-bottom:0}
.up-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.up-info small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.up-act{display:flex;gap:6px;flex-wrap:wrap}

/* 2.0: hình ảnh thể thao vui vẻ */
:root{--hero-ink:#16221D;--hero-title:#0E5A47}
.brand-row{display:flex;align-items:center;gap:10px}
.brand-row > div{display:flex;flex-direction:column;min-width:0}
.brand .logo{width:40px;height:40px;flex:none;border-radius:11px}
.sport-ico{width:30px;height:30px;flex:none;display:block}
.g-name.has-ico{flex-direction:row;align-items:center;justify-content:flex-start;gap:9px}
.g-name.has-ico > span{display:flex;flex-direction:column;gap:1px;min-width:0}
.court-cell{display:flex;align-items:center;gap:10px}
.court-cell .sport-ico{width:28px;height:28px}
@media (max-width:520px){.g-name.has-ico .sport-ico{width:22px;height:22px}.g-name.has-ico{gap:6px}}

/* băng rôn trang khách */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#FFE9A8,#FFD3B8);color:var(--hero-ink);min-height:220px;border:1px solid rgba(0,0,0,.06)}
.hero-txt{position:relative;z-index:1;padding:22px 26px;display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0}
.hero h1{font-family:var(--f-display);font-size:48px;font-weight:700;line-height:.95;margin:0;color:var(--hero-title);letter-spacing:.01em;text-wrap:balance}
.hero p{margin:0;font-size:15px;max-width:42ch}
.hero-sports{display:flex;flex-wrap:wrap;gap:6px}
.hk{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.75);border-radius:999px;padding:3px 10px 3px 3px;font-size:12.5px;font-weight:600}
.hk .sport-ico{width:22px;height:22px}
.hero-facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px}
.hero-facts b{font-weight:700}
.hero-art{width:100%;height:100%;max-height:270px;object-fit:cover;object-position:50% 60%;display:block;align-self:end}
.hero.has-photo{grid-template-columns:minmax(0,1fr);background-color:#0E2A22;background-size:cover;background-position:center;color:#fff;min-height:260px}
.hero.has-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,24,18,.85),rgba(6,24,18,.45) 60%,rgba(6,24,18,.15))}
.hero.has-photo h1{color:#fff}
.hero.has-photo .hk{background:rgba(255,255,255,.9);color:var(--hero-ink)}
@media (max-width:700px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-art{order:-1;max-height:150px;object-position:50% 70%}
  .hero-txt{padding:14px 16px 16px;gap:8px}
  .hero h1{font-size:36px}
  .hero.has-photo{min-height:220px}
}

/* lời chào trang quản trị */
.hello{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:stretch;border-radius:14px;overflow:hidden;
  background:linear-gradient(110deg,#FFF1C9,#FFDAC6);color:var(--hero-ink);border:1px solid rgba(0,0,0,.05)}
.hello > div{padding:14px 20px;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.hello h2{font-family:var(--f-display);font-size:28px;font-weight:700;margin:0;color:var(--hero-title);line-height:1.05}
.hello p{margin:0;font-size:13.5px}
.hello img{width:100%;height:100%;max-height:118px;object-fit:cover;object-position:50% 55%;display:block}
@media (max-width:700px){.hello{grid-template-columns:minmax(0,1fr)}.hello img{display:none}}

/* trang đăng nhập */
.login-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,380px);width:100%;max-width:860px;border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);background:var(--surface);border:1px solid var(--line)}
.login-wrap .login-card{border:0;border-radius:0;box-shadow:none;max-width:none}
.login-art{background:linear-gradient(180deg,#FFE9A8,#FFD3B8);color:var(--hero-ink);display:flex;flex-direction:column;justify-content:space-between}
.login-art img{width:100%;height:auto;display:block}
.login-art p{margin:0;padding:16px 22px 22px;display:flex;flex-direction:column;gap:4px}
.login-art b{font-family:var(--f-display);font-size:26px;color:var(--hero-title);line-height:1.05}
.login-art span{font-size:13.5px}
@media (max-width:760px){.login-wrap{grid-template-columns:minmax(0,1fr);max-width:420px}.login-art p{display:none}.login-art img{max-height:150px;object-fit:cover}}

/* ảnh bìa trong cài đặt */
.cover-box{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px;align-items:start}
.cover-prev{aspect-ratio:2/1;max-width:100%;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#FFE9A8,#FFD3B8) center/cover no-repeat;border:1px solid var(--line)}
.cover-prev.photo{background-size:cover;background-position:center}
.cover-prev img{width:100%;height:100%;object-fit:cover;display:block}
.cover-act{display:flex;flex-direction:column;gap:8px;min-width:0}
.cover-act small{color:var(--muted);font-size:12.5px}
@media (max-width:600px){.cover-box{grid-template-columns:minmax(0,1fr)}}

/* hình minh họa ở chỗ trống */
.empty::before{content:"";display:block;width:96px;height:72px;margin:0 auto 6px;background:url(img/empty.svg) center/contain no-repeat}
td .empty::before,.up-list .empty::before{display:none}

/* hoa giấy khi đặt xong */
.done{position:relative;overflow:hidden}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-16px;width:8px;height:14px;border-radius:2px;animation:sosan-fall 2.4s ease-in forwards}
@keyframes sosan-fall{to{top:110%;transform:rotate(720deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}

/* 2.1: ảnh hoạt động gần đây */
.act .panel-h{gap:8px}
.ph-strip{display:flex;gap:10px;overflow-x:auto;padding:14px 16px;scroll-snap-type:x proximity}
.ph-tile,.ph-add{flex:none;width:180px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;position:relative;border:0;padding:0;scroll-snap-align:start;background:var(--surface-2)}
.ph-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.ph-tile:hover img{transform:scale(1.04)}
.ph-cap{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font-size:12px;text-align:left;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ph-flag{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px}
.ph-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed var(--line-strong);background:var(--surface);color:var(--muted);font-size:12.5px;padding:10px;text-align:center}
.ph-add svg{width:26px;height:26px;color:var(--primary)}
.ph-add:hover{border-color:var(--primary);color:var(--primary)}
.ph-strip .ph-add:only-child{width:100%;max-width:420px;aspect-ratio:auto;min-height:120px;font-size:14px}
.ph-drop{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px dashed var(--line-strong);border-radius:12px;padding:22px 14px;cursor:pointer;text-align:center;background:var(--surface-2)}
.ph-drop svg{width:28px;height:28px;color:var(--primary)}
.ph-drop small{color:var(--muted)}
.ph-drop:hover,.ph-drop.over{border-color:var(--primary);background:var(--primary-soft)}
.up-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.up-prev{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.up-prev img{width:100%;height:100%;object-fit:cover;display:block}
.up-prev .btn{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.55);color:#fff;padding:3px}
.pm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.pm-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;padding:8px}
.pm-card.off .pm-img{opacity:.5}
.pm-img{border:0;padding:0;border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2)}
.pm-img img{width:100%;height:100%;object-fit:cover;display:block}
.pm-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.pm-row .input{flex:1;min-width:0}
.pm-row small{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* thư viện ảnh trang khách */
.gal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px}
.gal-item{position:relative;border:0;padding:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2);cursor:zoom-in}
.gal-item.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.gal-item:hover img{transform:scale(1.05)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;text-align:left;display:flex;flex-direction:column;gap:1px;font-size:12.5px;line-height:1.3}
.gal-cap b{font-weight:600}
.gal-cap small{opacity:.85;font-size:11.5px}
.gal-item:not(.big) .gal-cap b{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.hero-link{font-size:13.5px;font-weight:600;color:var(--hero-title);text-decoration:none}
.hero.has-photo .hero-link{color:#fff}
.hero-link:hover{text-decoration:underline}
@media (max-width:700px){.gal-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;gap:6px}.ph-tile,.ph-add{width:140px}}

/* xem ảnh phóng to */
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,14,12,.92);display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:min(1200px,100%);max-height:100%}
.lb-img{max-width:100%;max-height:calc(100vh - 140px);border-radius:10px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-cap{color:#fff;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:center;text-align:center;font-size:14px}
.lb-cap span{opacity:.75;font-size:13px}
.lb-count{font-variant-numeric:tabular-nums}
.lb button{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;width:44px;height:44px;border-radius:50%;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.28)}
.lb-x{top:max(14px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px))}
.lb-prev{left:max(14px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%)}
.lb-next{right:max(14px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}
@media (max-width:600px){.lb-prev,.lb-next{top:auto;bottom:max(14px,env(safe-area-inset-bottom,0px));transform:none}.lb-img{max-height:calc(100vh - 170px)}}
@media (max-width:520px){
  .grid{grid-template-columns:116px max-content}
  .g-name.has-ico small{display:none}
  .g-name.has-ico b{font-size:13px;line-height:1.25}
}

/* 2.2: nhật ký sự kiện */
.ph-flag.ev{background:var(--event);max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-diary{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ev-photos{display:flex;gap:8px;overflow-x:auto}
.ev-ph{flex:none;width:110px;aspect-ratio:4/3;border:0;padding:0;border-radius:8px;overflow:hidden;position:relative;background:var(--surface-2)}
.ev-ph img{width:100%;height:100%;object-fit:cover;display:block}
.alb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding:12px}
.alb{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:8px;text-align:left;cursor:zoom-in;transition:box-shadow .2s,transform .2s}
.alb:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.alb-cover{position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.alb-cover img{width:100%;height:100%;object-fit:cover;display:block}
.alb-count{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px}
.alb-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.alb-strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block}
.alb-info{display:flex;flex-direction:column;gap:1px;padding:0 2px 2px}
.alb-info b{font-weight:600;font-size:14.5px;text-wrap:balance}
.alb-info small{color:var(--muted);font-size:12.5px}
@media (max-width:520px){.alb-grid{grid-template-columns:minmax(0,1fr);padding:8px}}

/* Nhật ký & hình ảnh – đầu mục Đặt sân (trang khách) */
.diary .dy-sub{color:var(--muted);font-size:13px}
.dy-body{padding:4px 0 12px}
.dy-label{margin:8px 14px 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dy-row{display:flex;gap:10px;overflow-x:auto;padding:2px 14px 6px;scroll-snap-type:x proximity;scrollbar-width:thin}
.dy-alb{flex:0 0 230px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:7px;text-align:left;cursor:zoom-in;transition:box-shadow .2s,transform .2s}
.dy-alb:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.dy-cover{position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.dy-cover img{width:100%;height:100%;object-fit:cover;display:block}
.dy-ph{flex:0 0 190px;scroll-snap-align:start;position:relative;border:0;padding:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2);cursor:zoom-in}
.dy-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.dy-ph:hover img{transform:scale(1.05)}
.dy-ph .gal-cap b{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.dy-empty{display:flex;align-items:center;gap:16px;padding:14px 16px 16px}
.dy-empty img{flex:none;opacity:.9}
.dy-empty div{display:flex;flex-direction:column;gap:3px}
.dy-empty span{color:var(--muted);font-size:13.5px}
@media (max-width:520px){.dy-alb{flex-basis:200px}.dy-ph{flex-basis:150px}.dy-row{padding-inline:10px}.dy-label{margin-inline:10px}.dy-empty img{width:80px;height:60px}}

/* Cơ sở kinh doanh (quản trị) */
.vbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.vbar > svg{width:20px;height:20px;color:var(--primary);flex:none}
.vbar-l{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vbar .vsel{width:auto;min-width:200px;max-width:100%;font-weight:600}
.vbar-addr{color:var(--muted);font-size:13px;margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbar-alert{border:1px solid var(--peak);background:var(--peak-soft);color:var(--text);border-radius:999px;padding:4px 12px;font-size:13px;cursor:pointer}
.vbar-alert:hover{filter:brightness(.97)}
.vn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.vn-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.vn-card.cur{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.vn-card.off{opacity:.75}
.vn-cover{position:relative;height:120px;background:var(--primary-soft, var(--surface-2)) center/cover no-repeat;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vn-cover img{height:100%;width:auto}
.vn-tags{position:absolute;left:10px;top:10px;display:flex;gap:6px}
.vn-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.vn-body h3{margin:0;font-size:18px;font-weight:700;text-wrap:balance}
.vn-info{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.vn-info li{display:flex;gap:8px;align-items:baseline}
.vn-info li svg{width:16px;height:16px;flex:none;color:var(--muted);align-self:center}
.vn-info li b{font-weight:500;color:var(--muted);min-width:88px;font-size:12.5px}
.vn-info a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.vn-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border-top:1px solid var(--line);padding-top:10px}
.vn-stats span{display:flex;flex-direction:column;font-size:11.5px;color:var(--muted);line-height:1.25}
.vn-stats b{font-size:18px;color:var(--text);font-weight:700}
.vn-stats .warn b{color:var(--peak)}
.vn-act{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.vn-add{border:2px dashed var(--line-strong);background:transparent;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;color:var(--muted);text-align:center;cursor:pointer;min-height:220px}
.vn-add svg{width:28px;height:28px;color:var(--primary)}
.vn-add b{color:var(--text);font-size:16px}
.vn-add span{font-size:13px;max-width:260px}
.vn-add:hover{border-color:var(--primary);background:var(--surface)}
.req{color:var(--danger, #C0392B)}
.u-venues{border:0;padding:0;margin:0}
.u-venues legend{font-size:13px;font-weight:600;margin-bottom:6px;padding:0}
@media (max-width:520px){.vbar .vsel{min-width:0;flex:1 1 160px}.vbar-alert{flex:1 1 100%;text-align:left}.vbar-addr{display:none}.vn-grid{grid-template-columns:minmax(0,1fr)}}

/* Trang khách: chọn cơ sở */
.hero-venue{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;font-size:14px}
.hero-venue b{font-weight:700}
.hero-venue span{color:var(--muted)}
.hero-switch{border:1px solid currentColor;background:transparent;color:var(--primary);border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600;cursor:pointer}
.hero.has-photo .hero-venue span{color:inherit;opacity:.85}
.hero.has-photo .hero-switch{color:inherit}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.pick-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.pick-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pick-cover{position:relative;border:0;padding:0;height:160px;background:var(--primary-soft) center/cover no-repeat;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.pick-cover img{height:100%;width:auto}
.pick-ev{position:absolute;left:10px;bottom:10px;background:var(--event,#6B4BB0);color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.pick-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pick-body h2{margin:0;font-size:20px;font-weight:700;text-wrap:balance}
.pick-body .btn{margin-top:auto;align-self:flex-start}
.pick-addr,.pick-meta{margin:0;font-size:13.5px;color:var(--muted)}
.pick-addr a,.pick-meta a{color:var(--primary);font-weight:600}
.done-venue{margin:-4px 0 0;color:var(--muted)}
@media (max-width:520px){.pick-grid{grid-template-columns:minmax(0,1fr)}.pick-cover{height:130px}}
.linkbtn{border:0;background:none;padding:0;color:var(--primary);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Trang cấp phép sử dụng (nhà cung cấp) */
.okbox{background:var(--primary-soft);color:var(--primary);border-radius:8px;padding:8px 12px;font-size:13px;font-weight:500}
.login-wrap.one{grid-template-columns:minmax(0,420px);max-width:420px}
.lic-tag{background:var(--event,#6B4BB0);color:#fff}
.lic-lock h1{font-family:var(--f-display);font-size:28px;margin:0;line-height:1.15}
.lic-page{background:var(--bg)}
.lic-main{max-width:1100px;margin:0 auto;padding:20px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:16px}
.lic-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lic-head .brand{padding:0}
.lic-status{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:18px 20px;align-items:center}
.lic-status-main{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.lic-status h1{font-family:var(--f-display);font-size:32px;font-weight:600;margin:0;line-height:1.1}
.lic-status p{margin:0;color:var(--muted)}
.lic-status p b{color:var(--text)}
.lic-key b{letter-spacing:.06em}
.lic-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.lic-extend{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.lic-extend span{font-size:12.5px;color:var(--muted);margin-right:2px}
.lic-lockform{display:flex;gap:6px;width:100%;max-width:440px}
.lic-lockform .input{flex:1;min-width:0}
.stat .v small{font-size:.55em;color:var(--muted);font-weight:500}
.lic-log{list-style:none;margin:0;padding:6px 16px 14px;display:flex;flex-direction:column;max-height:360px;overflow:auto}
.lic-log li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.lic-log li:last-child{border-bottom:0}
.lic-log li span{color:var(--muted);font-size:12.5px}
.licbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--peak-soft);border:1px solid var(--peak);border-radius:12px;padding:10px 14px;font-size:14px}
@media (max-width:760px){.lic-status{grid-template-columns:minmax(0,1fr)}.lic-actions{align-items:stretch}.lic-extend{justify-content:flex-start}.lic-lockform{max-width:none}.two{grid-template-columns:minmax(0,1fr)}}

/* Danh sách cơ sở kinh doanh */
.vn-mode{display:flex;gap:6px}
.vn-mode .btn.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.vn-table td{vertical-align:top}
.vn-table tr.vn-off td{color:var(--muted)}
.vn-table tr.vn-off td b{color:var(--muted)}
.vn-table tr.vn-cur td{background:var(--primary-soft)}
.vn-table a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.vn-table tfoot td{border-top:2px solid var(--line-strong);border-bottom:0}
.chip b{font-weight:700}
.vn-table .nw{white-space:nowrap}
.vn-pills{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.vn-rowact{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.vn-table td,.vn-table th{padding-left:10px;padding-right:10px}

/* Báo cáo doanh thu ngày / tuần / tháng / năm */
.rep-top{gap:10px}
.rep-top .seg{gap:0;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;flex-wrap:nowrap}
.rep-top .seg button{border:0;background:var(--surface);padding:7px 16px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}
.rep-top .seg button+button{border-left:1px solid var(--line-strong)}
.rep-top .seg button[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink)}
.rep-nav{display:flex;align-items:center;gap:6px}
.rep-nav .input{width:auto}
.rep-tools{display:flex;gap:6px}
.rep-body.stale{opacity:.6;transition:opacity .2s}
.rep-print-h{display:none}
.rep-stats .stat{border-top:4px solid var(--line-strong)}
.rep-stats .s-fixed{border-top-color:var(--primary)}
.rep-stats .s-walk{border-top-color:var(--info)}
.rep-stats .s-svc{border-top-color:var(--peak)}
.rep-stats .s-all{border-top-color:var(--fg);background:var(--surface-2)}
.rep-table td small{color:var(--muted);font-size:12px}
.rep-table tr.grp td{background:var(--surface-2);font-weight:700;font-size:14px;padding-top:10px;padding-bottom:8px}
.rep-table tr.grp .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:0}
.rep-table tr.g-fixed .dot{background:var(--primary)}
.rep-table tr.g-walk .dot{background:var(--info)}
.rep-table tr.g-svc .dot{background:var(--peak)}
.rep-table tr.sub td:first-child{padding-left:30px}
.rep-table tr.sub2 td:first-child{padding-left:46px;color:var(--muted);font-size:13px}
.rep-table tr.sub2 td{font-size:13px;color:var(--muted)}
.rep-table tr.tot td{font-weight:600;border-top:1px solid var(--line-strong)}
.rep-table tr.tot td:first-child{padding-left:30px}
.rep-table tr.grand td{font-weight:700;font-size:16px;background:var(--primary-soft);border-top:2px solid var(--primary);color:var(--fg)}
.rep-table tr.grand td small{font-weight:500}
.rep-table tr.pay td{font-size:13px;color:var(--muted)}
.rep-table tr.zero td{color:var(--muted)}
.rep-notes{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--muted);padding-block:10px}
.rep-notes b{color:var(--fg)}
.chart .r-fixed,.legend i.r-fixed{fill:var(--primary);background:var(--primary)}
.chart .r-walk,.legend i.r-walk{fill:var(--info);background:var(--info)}
.chart .r-svc,.legend i.r-svc{fill:var(--peak);background:var(--peak)}
.pill.r-pill-fixed{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}
.pill.r-pill-walk{background:var(--info-soft);color:var(--info);border-color:var(--info)}
@media (max-width:760px){.rep-nav{width:100%}.rep-nav .input{flex:1}.rep-top .seg{width:100%}.rep-top .seg button{flex:1;padding:8px 6px}}
/* In báo cáo trên giấy A4 */
.app{page:rep}
@page rep{size:A4;margin:12mm}
@media print{
  html body.print-rep > div.app:not(#zz){display:block!important}
  body.print-rep .side,body.print-rep .mnav,body.print-rep .vbar,body.print-rep .licbar,body.print-rep .rep-top,body.print-rep .toasts{display:none!important}
  body.print-rep main{padding:0!important}
  body.print-rep .rep-print-h{display:block;font-size:12pt;margin-bottom:4mm}
  body.print-rep .panel,body.print-rep .stat{box-shadow:none!important;break-inside:avoid}
  body.print-rep .rep-body.stale{opacity:1}
}
.rep-table{min-width:620px}
.rep-table td:first-child{min-width:170px}
.rep-detail{min-width:900px}
.rep-detail td:first-child{min-width:0}
@media (max-width:520px){
  .rep-sum .rep-table{min-width:0}
  .rep-sum .rep-table th:nth-child(3),.rep-sum .rep-table td:nth-child(3),.rep-sum .rep-table th:nth-child(5),.rep-sum .rep-table td:nth-child(5){display:none}
  .rep-sum .rep-table td:first-child{min-width:0}
  .rep-sum .rep-table th,.rep-sum .rep-table td{padding-left:8px;padding-right:8px}
  .rep-table tr.sub td:first-child,.rep-table tr.tot td:first-child{padding-left:18px}
  .rep-table tr.sub2 td:first-child{padding-left:28px}
  .rep-table tr.grand td{font-size:14px}
}

/* Thanh toán chuyển khoản (VietQR) */
.paybox{width:100%;border:1.5px solid var(--primary);background:var(--surface);border-radius:14px;padding:14px;text-align:left}
.pay-title{margin:0 0 10px;font-weight:700;font-size:15px}
.pay-in{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.pay-qr{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.pay-qr svg{display:block;border-radius:10px;border:1px solid var(--line);background:#fff;max-width:100%;height:auto}
.pay-qr small{font-size:11.5px;color:var(--muted);max-width:200px;text-align:center}
.pay-info{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.pay-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:14px}
.pay-row span{color:var(--muted);font-size:13px}
.pay-row b{font-weight:700;overflow-wrap:anywhere}
.pay-row.pay-amt b{color:var(--primary);font-size:18px}
.pay-row .pay-copy{padding:2px 10px;font-size:12px}
.pay-bank{color:var(--muted);font-size:12px;margin:-4px 0 2px 118px}
.pay-note{margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}
.bank-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:900px){.bank-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.pay-in{flex-direction:column;align-items:stretch}.pay-qr{align-self:center}.pay-row{grid-template-columns:96px minmax(0,1fr) auto}.pay-bank{margin-left:104px}}
.pay-row b.num{white-space:nowrap;overflow-wrap:normal}
.pay-row.pay-info-row b{white-space:normal;overflow-wrap:anywhere}
.pay-info{min-width:260px}
.pay-row{grid-template-columns:100px minmax(0,1fr) auto}
.pay-bank{margin-left:108px}
.pay-info{gap:8px}
.pay-row{grid-template-columns:minmax(0,1fr) auto;gap:0 8px;row-gap:0}
.pay-row span{grid-column:1/-1;font-size:12px;line-height:1.2}
.pay-row b{font-size:15px}
.pay-bank{margin:-6px 0 0}
@media (max-width:520px){.pay-row{grid-template-columns:minmax(0,1fr) auto}.pay-bank{margin-left:0}}

/* Hóa đơn thanh toán */
.inv-wrap{width:100%;display:flex;flex-direction:column;gap:10px}
.inv{background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;text-align:left;position:relative;
  background-image:linear-gradient(var(--primary),var(--primary));background-size:100% 5px;background-repeat:no-repeat}
.inv-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:4px}
.inv-venue{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 200px}
.inv-venue > b{font-family:var(--f-display);font-size:24px;line-height:1.1;color:var(--primary)}
.inv-venue span{font-size:12.5px;color:var(--muted)}
.inv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12.5px;color:var(--muted);text-align:right}
.inv-meta h3{margin:0 0 2px;font-size:15px;letter-spacing:.08em;color:var(--fg)}
.inv-meta b{color:var(--fg);letter-spacing:.04em}
.inv-st{margin-top:4px;font-weight:700;font-size:12px;padding:3px 10px;border-radius:999px;border:1.5px solid currentColor}
.inv-st.st-pending{color:var(--peak)}
.inv-st.st-confirmed{color:var(--info)}
.inv-st.st-paid{color:var(--primary)}
.inv-st.st-cancel{color:var(--danger)}
.inv-cus{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:13.5px;border-top:1px dashed var(--line-strong);border-bottom:1px dashed var(--line-strong);padding:8px 0}
.inv-t{width:100%;border-collapse:collapse;font-size:13.5px}
.inv-t th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.inv-t th.r,.inv-t td.r{text-align:right}
.inv-t td{padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.inv-t td small{display:block;color:var(--muted);font-size:12px}
.inv-t .i-no{width:22px;color:var(--muted)}
.inv-t tr.i-item td{padding-top:3px;padding-bottom:3px;border-bottom:0;color:var(--muted);font-size:12.5px}
.inv-t tr.i-item td small{display:inline}
.inv-sums{display:flex;flex-direction:column;gap:4px;margin-left:auto;width:100%;max-width:320px}
.i-sum{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.i-sum span{color:var(--muted)}
.i-sum.i-total{border-top:1px solid var(--line-strong);padding-top:6px;font-size:15px}
.i-sum.i-total span{color:var(--fg);font-weight:600}
.i-sum.i-due{background:var(--primary-soft);border-radius:8px;padding:8px 10px;font-size:16px;margin-top:2px}
.i-sum.i-due span{color:var(--fg);font-weight:700}
.i-sum.i-due b{color:var(--primary);font-size:19px}
.inv .paybox{border-style:dashed}
.inv-note{margin:0;font-size:12.5px;color:var(--muted)}
.inv-f{text-align:center;font-size:12.5px;color:var(--muted);border-top:1px dashed var(--line-strong);padding-top:8px}
.inv-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inv-actions small{color:var(--muted);font-size:12.5px}
.inv-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.inv-li{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;cursor:pointer}
.inv-li:hover{border-color:var(--primary)}
.inv-li b{letter-spacing:.05em;color:var(--primary)}
.inv-li span{font-size:13.5px}
.inv-li small{font-size:12px;color:var(--muted)}
.inv-find{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.inv-find .sec-t{margin:0;font-weight:600}
.hero-inv{border:0;background:none;padding:0;cursor:pointer;font:inherit;text-align:left}
.inv-modal .modal-b{background:var(--surface-2)}
@media (max-width:520px){.inv{padding:14px 12px}.inv-meta{align-items:flex-start;text-align:left}.inv-sums{max-width:none}}
/* In hóa đơn: khổ A5, chỉ in hóa đơn */
#invPrint{display:none}
#invPrint{page:inv}
@page inv{size:A5;margin:8mm}
@media print{
  html body.print-inv > *:not(#invPrint){display:none!important}
  html body.print-inv > div#invPrint:not(#zz){display:block!important}
  body.print-inv{background:#fff!important}
  body.print-inv .inv{border:0;padding:0;background-image:none;color:#000}
  body.print-inv .inv *{color:#000!important}
  body.print-inv .pay-copy{display:none!important}
  body.print-inv .i-sum.i-due{background:none;border:1.5px solid #000}
  body.print-inv .inv .paybox{border:1px dashed #000;break-inside:avoid}
}

/* trạng thái thanh toán */
.pill.pay-unpaid{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.btn.paid-btn{background:var(--info);border-color:var(--info);color:#fff}
.req-f{flex-wrap:wrap}
.req-f .sum{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.req-tk-act{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

.inv-pay{font-weight:700;border-radius:999px;padding:1px 9px;font-size:12.5px;border:1.5px solid currentColor;white-space:nowrap}
.inv-pay.p-paid{color:var(--primary);background:var(--primary-soft)}
.inv-pay.p-part{color:var(--info)}
.inv-pay.p-unpaid{color:var(--danger);background:var(--danger-soft)}
.inv-li-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.inv-li-st{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.inv-li-st .inv-st{margin:0;font-size:11.5px;padding:1px 8px}
.inv-li-st .inv-pay{font-size:11.5px}
@media print{body.print-inv .inv-pay{background:none!important;border:1px solid #000}}

/* thông tin chủ sân & hạn sử dụng */
.lic-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:18px}
.lic-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.lic-row{display:flex;flex-direction:column;gap:1px}
.lic-row span{font-size:12px;color:var(--muted)}
.lic-row b{font-weight:600;font-size:14.5px;overflow-wrap:anywhere;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lic-row b small{color:var(--muted);font-weight:400}
.lic-exp{background:var(--primary-soft);border-radius:12px;padding:14px 16px;justify-content:center}
.lic-k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.lic-big{font-family:var(--f-display);font-size:28px;line-height:1.1;color:var(--primary)}
.lic-days{font-size:13.5px}
.lic-bar{display:flex;flex-direction:column;gap:3px}
.lic-bar small{font-size:11.5px;color:var(--muted)}
@media (max-width:900px){.lic-grid{grid-template-columns:minmax(0,1fr)}}

/* Xóa dữ liệu (trang cấp phép) */
.purge{border-color:var(--danger)}
.purge .panel-h{background:var(--danger-soft)}
.purge-kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.purge-reset{margin-top:12px;border:1px dashed var(--danger);border-radius:10px;padding:10px 12px;align-items:flex-start}
.purge-btns{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.purge-sum p{margin:0 0 6px}
.purge-confirm{margin-top:14px;display:flex;flex-direction:column;gap:10px}
@media (max-width:640px){.purge-kinds{grid-template-columns:minmax(0,1fr)}}

/* Khôi phục dữ liệu (trang cấp phép) */
.restore{border-color:var(--info)}
.restore .panel-h{background:var(--info-soft)}
.restore-confirm{display:flex;flex-direction:column;gap:10px}
.restore-notes{margin:4px 0 0;padding-left:18px;font-size:12px;color:var(--danger)}
.restore-up{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.restore-up-row{display:flex;gap:8px;flex-wrap:wrap}
.restore-up-row .input{flex:1;min-width:220px}

/* trang cấp phép: quản lý cơ sở */
.lic-venues td{vertical-align:top}
.lic-venues tr.off td{color:var(--muted)}
.lic-venues .pill{margin-top:4px}

/* Sân & bảng giá */
.fdot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:0}
.price-tbl th small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}
.price-tbl .pr{width:110px;text-align:right}
.court-ed{display:flex;gap:6px;min-width:250px}
.court-ed .input:first-child{flex:1;min-width:110px}
.court-ed select{width:118px}
.wk{display:flex;flex-direction:column;gap:4px}
.wk-row{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px}
.wk-d{font-size:12px;font-weight:600;color:var(--muted)}
.wk-track{position:relative;height:22px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.wk-bar{position:absolute;top:0;bottom:0;color:#fff;font-size:11px;font-weight:600;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-ticks{position:relative;height:16px}
.wk-ticks span{position:absolute;transform:translateX(-50%);font-size:11px;color:var(--muted)}
.daychk{border:1px solid var(--line-strong);border-radius:999px;padding:3px 10px}
.fr-days{border:0;padding:0;margin:0}
.fr-days legend{font-size:13px;font-weight:600;margin-bottom:6px;padding:0}
.g-times .pk{background:var(--fc, var(--peak))}
.g-track .peakband{background:color-mix(in srgb, var(--fc, var(--peak)) 22%, transparent)}

.frame-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted);padding-block:10px}
.frame-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.frame-legend b{color:var(--fg)}
.pub-prices th small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}

/* Dịch vụ & kho: cảnh báo tồn dưới 10 */
.prod-tbl tr.low td{background:var(--danger-soft)}
.prod-tbl tr.low td:first-child{box-shadow:inset 4px 0 0 var(--danger)}
.prod-tbl tr.low{outline:2px solid var(--danger);outline-offset:-2px}
.stock-in.low{border:2px solid var(--danger);color:var(--danger);font-weight:700;background:#fff}
.low-tag{display:inline-block;margin-left:6px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;vertical-align:middle}
.lowbox{background:var(--danger-soft);color:var(--danger);border:2px solid var(--danger);border-radius:12px;padding:10px 14px;font-size:14px}
.stat-low{border:2px solid var(--danger);background:var(--danger-soft)}
.stat-low .v{color:var(--danger)}
/* thương hiệu "Đặt Sân Thể Thao" (tên dài): chữ nhỏ hơn, tối đa 2 dòng */
.brand b{font-size:22px;line-height:1.05;letter-spacing:0}
.login-card .brand b{font-size:26px}
.lic-head .brand b{font-size:24px}

/* ẩn nút theo quyền của nhân viên đang đăng nhập */
.np-photos [data-act=ph-add],.np-photos [data-act=ph-manage]{display:none!important}
.np-book [data-act=new-booking],.np-book [data-act=sel-book],.np-book [data-act=checkin],.np-book [data-act=add-item],.np-book [data-act=book-for]{display:none!important}
.np-pay [data-act=pay],.np-pay [data-act=paid-group],.np-pay [data-paid="1"]{display:none!important}
.np-confirm [data-act=confirm-group],.np-confirm [data-act=confirm-bk],.np-confirm [data-act=tkst][data-to=confirmed]{display:none!important}
.np-cancel [data-act=cancel-group],.np-cancel [data-act=cancel-bk],.np-cancel [data-act=tkst][data-to=cancelled]{display:none!important}
.np-tickets [data-act=tk-sell],.np-tickets .tk-sell,.np-tickets [data-act=tkst][data-to=valid],.np-tickets [data-act=tk-cancel]{display:none!important}
.np-customers [data-act=save-cust],.np-customers [data-act=new-customer]{display:none!important}

/* Nhân viên & phân quyền */
.staff-tbl td{vertical-align:top}
.staff-tbl tr.off td{color:var(--muted)}
.u-perms{border:0;padding:0;margin:0}
.u-perms legend{font-size:13px;font-weight:600;margin-bottom:6px;padding:0}
.perm-presets{align-items:center;margin-bottom:10px}
.perm-presets span{font-size:12.5px;color:var(--muted)}
.perm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.perm-g p{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.check.perm{align-items:flex-start;margin-bottom:6px}
.check.perm span{display:flex;flex-direction:column}
.check.perm b{font-weight:600;font-size:13.5px}
.check.perm small{font-size:12px;color:var(--muted)}
@media (max-width:640px){.perm-grid{grid-template-columns:minmax(0,1fr)}}

/* Trang cấp phép: menu và các trang con */
.lic-main{max-width:1320px}
.lic-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start}
.lic-content{display:flex;flex-direction:column;gap:16px;min-width:0}
.lic-nav{position:sticky;top:16px;display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px}
.lic-nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:9px;color:var(--fg);text-decoration:none;font-size:14px;font-weight:500}
.lic-nav a:hover{background:var(--surface-2)}
.lic-nav a[aria-current=page]{background:var(--primary-soft);color:var(--primary);font-weight:600}
.lic-nav .badge{background:var(--danger);color:#fff;border-radius:999px;font-size:11.5px;min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 6px}
.lic-content .topbar{margin:0}
.lic-crumb{margin:0;font-size:13.5px}
.lic-crumb a{color:var(--muted);text-decoration:none}
.lic-crumb a:hover{color:var(--fg)}
.lic-soon{list-style:none;margin:0;padding:6px 16px 12px}
.lic-soon li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 0;border-bottom:1px solid var(--line)}
.lic-soon li:last-child{border-bottom:0}
.lic-soon li .btn{margin-left:auto}
.lic-content .sec-t{margin:16px 0 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lic-content .sec-t:first-child{margin-top:0}
.lic-content .sec-t small{text-transform:none;letter-spacing:0;font-weight:500}
.fee-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:6px}
.lic-counts{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.lic-counts div{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.lic-counts span{font-size:12.5px;color:var(--muted)}
.lic-counts b{font-size:20px;font-weight:600}
@media (max-width:900px){
  .lic-layout{grid-template-columns:minmax(0,1fr)}
  .lic-nav{position:static;flex-direction:row;overflow-x:auto;padding:6px;scrollbar-width:none}
  .lic-nav a{white-space:nowrap;flex:none}
}
.admin-login{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}
.admin-login .input.sm{height:32px;padding:0 8px;font-size:13px;width:auto}

/* Đăng ký chủ sân mới (trang đăng nhập quản trị) */
.login-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-2);border-radius:10px;padding:3px;gap:3px}
.login-tabs a{text-align:center;padding:8px 6px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none}
.login-tabs a[aria-selected=true]{background:var(--surface);color:var(--primary);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.signup-card{max-height:none}
.signup-card .sec-t{margin:6px 0 -4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.signup-card .fgrid{gap:10px}
.signup-card label small{font-weight:400;color:var(--muted)}
.signup-intro{margin:0;font-size:13.5px;color:var(--muted)}
.signup-cta{margin:0;text-align:center;font-size:13.5px;color:var(--muted)}
.signup-cta a{color:var(--primary);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.login-page:has(.signup-card){align-items:flex-start}
.login-wrap.one:has(.signup-card){grid-template-columns:minmax(0,520px);max-width:520px}
@media (max-width:520px){.signup-card .fgrid{grid-template-columns:minmax(0,1fr)}}
.signup-list{display:flex;flex-direction:column;gap:12px}
.signup-item{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px 20px;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.signup-info h3{margin:0;font-size:17px;font-weight:600}
.signup-info>p{margin:2px 0 8px;color:var(--muted);font-size:13.5px}
.signup-info dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;margin:0}
.signup-info dt{font-size:12px;color:var(--muted)}
.signup-info dd{margin:0;font-weight:500;font-size:14px;overflow-wrap:anywhere}
.signup-note{margin:8px 0 0;font-size:13.5px;font-style:italic;color:var(--muted)}
.signup-approve{display:flex;flex-direction:column;gap:8px;grid-row:span 2}
.signup-approve .fgrid{gap:8px}
.signup-reject{display:flex;gap:6px;align-items:center;align-self:end}
@media (max-width:760px){.signup-item{grid-template-columns:minmax(0,1fr)}.signup-approve{grid-row:auto}}