/* SÂN NHÀ — tokens, shared components, page layouts and responsive rules.
   Bootstrap owns the grid; this stylesheet owns the visual system. */
:root {
 --ink:#183b32; --green:#047857; --green-dark:#064e3b; --lime:#d8ed8b; --lime-deep:#c5df6e;
 --paper:#f4f6f8; --card:#fff; --line:#dde5e8; --muted:#596d70; --danger:#b42332;
 --soft:#ecf7f2; --warning:#885410; --radius:16px; --shadow:0 8px 30px #163b3207;
 --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px;
 --bs-primary-rgb:4,120,87; --bs-body-color:var(--ink);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Segoe UI',Tahoma,Arial,sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
.container { width:100%; max-width:1320px; padding-inline:28px; }
img { max-width:100%; }
a { color:var(--green); text-decoration:none; }
a:hover { color:var(--green-dark); text-decoration:underline; }
h1,h2,h3 { color:var(--ink); font-weight:750; letter-spacing:-.035em; line-height:1.22; overflow-wrap:anywhere; }
h1 { font-size:clamp(2rem,4vw,3rem); }
h2 { font-size:clamp(1.4rem,2.8vw,1.9rem); }
h3 { font-size:1.12rem; }
small { font-size:.8rem; }
p { overflow-wrap:anywhere; }
.icon { width:21px; height:21px; flex:none; vertical-align:middle; }
:where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #098661; outline-offset:4px; }
:where(main):focus { outline:none; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:100; background:#fff; padding:12px 20px; border:2px solid var(--green); border-radius:10px; }
.skip-link:focus { top:12px; }
.muted { color:var(--muted); font-size:.9rem; }
.text-green { color:var(--green); }
.eyebrow,.cf-eyebrow { font-size:.7rem; font-weight:750; letter-spacing:.12em; margin-bottom:10px; }
.page-space { padding-block:40px 64px; min-height:70vh; }
.section-space { padding-block:32px; }
.surface,.cf-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); min-width:0; }
.back-link,.cf-back,.login-back { display:inline-flex; margin-bottom:24px; font-size:.88rem; font-weight:600; }
.preserve { white-space:pre-line; }
.section-heading,.owner-panel-heading,.my-bookings-panel-heading,.review-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.section-heading h2,.owner-panel-heading h2,.my-bookings-panel-heading h2 { margin:0; }
.empty-state,.booking-history-empty,.owner-revenue-empty,.court-editor-images-empty { padding:44px 24px; text-align:center; color:var(--muted); }
.empty-state h3 { margin:16px 0 10px; }
.empty-state .icon,.court-no-photo-icon .icon,.court-editor-upload-icon .icon { width:40px; height:40px; color:var(--green); }
/* Navigation and footer */
.site-nav { position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line); background:#fffffff5; backdrop-filter:blur(16px); }
.nav-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:80px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:1.55rem; font-weight:800; letter-spacing:-.05em; color:var(--ink); white-space:nowrap; }
.brand:hover { text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:40px; height:40px; background:var(--green-dark); border-radius:12px; color:var(--lime); }
.brand-mark .icon { width:27px; height:27px; }
.brand-dot { color:var(--green); margin-left:-8px; }
.nav-links { display:flex; gap:22px; align-items:center; font-size:.86rem; font-weight:600; }
.nav-links > a,.account-menu summary { display:flex; align-items:center; gap:7px; padding-block:12px; color:var(--ink); }
.nav-links > .btn { color:#fff; padding-inline:18px; }
.nav-toggle { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.nav-toggle-label { display:none; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.nav-toggle:focus-visible + label { outline:3px solid var(--green); outline-offset:3px; }
.nav-badge { display:inline-grid; place-items:center; min-width:21px; height:21px; padding-inline:5px; border-radius:99px; color:#fff; background:var(--green); font-size:.7rem; }
.account-menu { position:relative; }
.account-menu summary { cursor:pointer; list-style:none; min-height:44px; }
.account-menu summary::-webkit-details-marker { display:none; }
.account-menu summary::after { content:''; width:7px; height:7px; border-right:1.5px solid; border-bottom:1.5px solid; transform:rotate(45deg); margin-left:4px; }
.account-menu-panel { position:absolute; top:100%; right:0; width:240px; padding:12px; background:white; border:1px solid var(--line); box-shadow:0 12px 40px #14382c18; border-radius:14px; }
.account-menu-panel > a,.account-menu-name { display:block; padding:10px 12px; overflow-wrap:anywhere; }
.account-menu-name { border-bottom:1px solid var(--line); font-weight:700; }
.account-menu-panel > a:hover { background:var(--soft); border-radius:8px; }
.account-menu-panel form { margin:8px 0 0; }
.site-footer { background:white; border-top:1px solid var(--line); margin-top:32px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding-block:40px; }
.footer-grid p { margin-top:16px; color:var(--muted); }
.footer-grid nav { display:flex; flex-direction:column; align-items:flex-start; gap:12px; font-size:.88rem; }
.footer-grid nav strong { color:var(--ink); margin-bottom:4px; }
.footer-project-tagline,.footer-bottom { color:var(--muted); font-size:.78rem; }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-block:20px; border-top:1px solid var(--line); }
/* Controls, feedback and data */
.btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:10px; font-weight:650; font-size:.9rem; white-space:normal; transition:background-color .18s,box-shadow .18s,transform .18s; }
.btn:hover { text-decoration:none; }
.btn-sm { font-size:.8rem; padding:8px 12px; }
.btn-primary { --bs-btn-bg:var(--green); --bs-btn-border-color:var(--green); --bs-btn-hover-bg:var(--green-dark); --bs-btn-hover-border-color:var(--green-dark); --bs-btn-active-bg:var(--green-dark); --bs-btn-active-border-color:var(--green-dark); --bs-btn-disabled-bg:var(--green); --bs-btn-disabled-border-color:var(--green); }
.btn-outline-success { --bs-btn-color:var(--green); --bs-btn-border-color:var(--green); --bs-btn-hover-bg:var(--green); --bs-btn-hover-border-color:var(--green); }
.btn-outline-secondary { --bs-btn-color:#52676b; --bs-btn-border-color:#c6d2d7; --bs-btn-hover-bg:#edf2f4; --bs-btn-hover-color:var(--ink); --bs-btn-hover-border-color:#a7bac2; }
.btn-lime { background:var(--lime); border-color:var(--lime); color:var(--green-dark); }
.btn-lime:hover { background:var(--lime-deep); color:var(--green-dark); }
.form-label { display:block; font-size:.84rem; font-weight:650; margin-bottom:7px; }
.form-control,.form-select { min-height:46px; padding:10px 13px; border:1px solid #cdd8dd; border-radius:10px; color:var(--ink); background-color:#fff; font-size:.94rem; }
.form-control::placeholder { color:#74868a; }
.form-control:focus,.form-select:focus { border-color:#059669; box-shadow:0 0 0 3px #05966918; }
.form-check-input:checked { background-color:var(--green); border-color:var(--green); }
input[type=checkbox],input[type=radio] { accent-color:var(--green); }
textarea { resize:vertical; }
.alert { margin-block:20px; border-radius:12px; padding:16px 20px; }
.alert-success { color:#07543b; background:#e9f8ef; border-color:#b8dfca; }
.alert-danger { color:#922332; background:#fff1f2; border-color:#efc1c8; }
.status-pill,.court-detail-status,.owner-court-status,.court-detail-sport,.order-sport-badge,.account-role-badge { display:inline-flex; align-items:center; padding:5px 11px; border-radius:99px; font-size:.74rem; font-weight:650; background:var(--soft); color:var(--green-dark); border:1px solid #c8e5d7; white-space:nowrap; }
.status-pill.pending { background:#fff8e8; border-color:#f0d598; color:var(--warning); }
.status-pill.cancelled,.court-detail-status.is-closed,.owner-court-status.is-inactive { background:#fff1f2; color:#a02838; border-color:#edc2c9; }
.status-pill.completed { background:#eff6ff; border-color:#c6daf5; color:#235c9b; }
.table-responsive { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.table { --bs-table-bg:white; --bs-table-border-color:#e4eaed; margin-bottom:0; font-size:.86rem; }
.table th { font-size:.7rem; letter-spacing:.035em; color:var(--muted); background:#f5f7f9; padding:16px; white-space:nowrap; }
.table td { padding:18px 16px; }
.table tbody tr:hover { --bs-table-bg:#f8fcfa; }
.table tr:last-child td { border-bottom:0; }
.pager { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
/* Discovery */
.hero { display:grid; grid-template-columns:1.05fr 1fr; min-height:440px; border-radius:24px; overflow:hidden; background:var(--green-dark); color:white; }
.hero > div:first-child { padding:52px 42px; }
.hero h1 { color:#fff; font-size:clamp(2.4rem,4vw,3.6rem); margin-bottom:20px; }
.hero .eyebrow { color:var(--lime); }
.hero-copy { max-width:35rem; color:#d7e9e1; margin-bottom:26px; }
.hero-notes { display:flex; flex-wrap:wrap; gap:10px 18px; font-size:.73rem; color:#d7e9e1; margin-top:28px; }
.hero-art { position:relative; min-height:280px; background:linear-gradient(180deg,#064e3b08,#03291f80),url('../images/hero-court.png') center/cover; }
.art-pill { position:absolute; top:24px; right:24px; padding:7px 12px; border:1px solid #ffffff60; border-radius:99px; background:#064e3b55; color:white; font-size:.72rem; }
.art-label { position:absolute; bottom:32px; left:32px; color:#fff; font-size:2.8rem; font-weight:750; letter-spacing:-.04em; line-height:1.08; }
.search-panel { position:relative; margin:24px 0 40px; padding:24px 28px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.search-disclosure > summary { display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:700; margin-bottom:20px; }
.search-disclosure:not([open]) > summary { margin:0; }
.search-disclosure > summary > span { margin-left:auto; font-size:.74rem; color:var(--muted); font-weight:400; }
.sport-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.sport-chip { display:grid; grid-template-columns:32px 1fr; column-gap:8px; padding:20px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:white; transition:background .18s,border-color .18s; }
.sport-chip .icon { grid-row:1/3; margin-top:4px; color:var(--green); }
.sport-chip small { color:var(--muted); font-size:.74rem; margin-top:4px; }
.sport-chip:hover,.sport-chip.active { border-color:var(--green); background:var(--soft); text-decoration:none; }
.court-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; height:100%; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; }
.court-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px #163b3210; }
.card-art { position:relative; height:240px; overflow:hidden; background:#edf2f4; }
.card-photo { width:100%; height:100%; object-fit:cover; }
.sport-tag { position:absolute; top:16px; left:16px; z-index:1; background:#fffffff0; color:var(--green-dark); border-radius:99px; padding:5px 12px; font-size:.73rem; font-weight:650; }
.photo-placeholder { height:100%; display:grid; place-items:center; color:var(--muted); background:linear-gradient(135deg,#edf4f0,#e4ebef); font-size:.85rem; }
.card-body { display:flex; flex-direction:column; flex:1; padding:22px; }
.court-area { display:block; color:var(--green); font-size:.72rem; font-weight:650; margin-bottom:8px; }
.court-card h3 { font-size:1.12rem; margin:0; }
.address { color:var(--muted); font-size:.85rem; margin:10px 0 16px; min-height:42px; }
.price { font-size:1.2rem; color:var(--green-dark); }
.card-body small { font-size:.76rem; color:var(--muted); }
.step-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:28px; }
.step-grid article { position:relative; padding:28px; background:white; border:1px solid var(--line); border-radius:var(--radius); }
.step-grid .icon { width:30px; height:30px; color:var(--green); margin-bottom:24px; }
.step-number { position:absolute; right:24px; top:20px; color:#a6b9b0; font-size:1.6rem; font-weight:700; }
.step-grid p { color:var(--muted); font-size:.88rem; margin-bottom:0; }
.bottom-strip { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:32px; margin:24px 0 48px; border-radius:var(--radius); background:#e8f2ed; }
.bottom-strip > p { margin:0; max-width:520px; color:var(--muted); font-size:.85rem; }
/* Court details and slots */
.court-detail-header { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; }
.court-detail-header h1 { margin:16px 0 12px; }
.court-detail-badges { display:flex; gap:8px; flex-wrap:wrap; }
.court-detail-address,.order-address { color:var(--muted); margin-bottom:10px; }
.court-detail-rate { text-align:right; flex-shrink:0; }
.court-detail-rate > * { display:block; }
.court-detail-rate strong { font-size:2rem; color:var(--green); }
.court-main-photo { display:block; position:relative; height:clamp(280px,38vw,500px); border-radius:20px; overflow:hidden; }
.court-main-photo img { width:100%; height:100%; object-fit:cover; }
.court-photo-caption { position:absolute; right:20px; bottom:20px; padding:8px 14px; background:#ffffffed; color:var(--ink); border-radius:9px; font-size:.8rem; }
.court-photo-thumbs { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:12px; margin-top:12px; }
.court-photo-thumbs img { width:100%; height:110px; object-fit:cover; border-radius:10px; }
.court-no-photo { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#e7eeeb; border-radius:20px; color:var(--muted); }
.court-no-photo p { margin:0; }
.court-quick-facts,.order-facts,.cf-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:24px 0; padding:24px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.court-quick-facts span,.order-facts span,.cf-facts dt { display:block; color:var(--muted); font-size:.7rem; margin-bottom:8px; font-weight:500; }
.court-quick-facts strong,.order-facts strong,.cf-facts dd { font-size:.92rem; overflow-wrap:anywhere; }
.court-duration-badge,.owner-period,.owner-count-badge,.my-bookings-count,.cf-sport { padding:6px 11px; border-radius:99px; background:var(--soft); color:var(--green-dark); font-size:.76rem; }
.court-date-filter { display:flex; align-items:flex-end; gap:12px; padding:20px; border-radius:12px; background:#f4f7f8; margin-bottom:24px; }
.court-date-field { flex:1; min-width:0; }
.court-selected-date { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-bottom:18px; }
.court-selected-date > span,.court-schedule-note,.court-policy-item p { font-size:.8rem; color:var(--muted); }
.legend { display:flex; flex-wrap:wrap; gap:14px; font-size:.74rem; color:var(--muted); margin-bottom:20px; }
.legend i { display:inline-block; width:10px; height:10px; background:#cbd5d9; border-radius:3px; margin-right:5px; }
.legend .free { background:#57b48d; }
.slot-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.slot { display:flex; flex-direction:column; gap:8px; border:1px solid var(--line); padding:16px; border-radius:12px; }
.slot.available { background:#f0faf5; border-color:#b8dfce; }
.slot.unavailable { background:#f1f4f6; color:#65787d; }
.slot strong { font-size:.88rem; }
.court-slot-price { font-weight:650; }
.court-slot-state { font-size:.72rem; }
.slot form { margin:0; }
.court-schedule-note { margin:20px 0 0; }
.court-owner-note,.court-editor-note,.cf-notice { padding:16px; background:var(--soft); border-radius:10px; color:#365d4c; font-size:.84rem; margin-top:20px; }
.court-description { margin-top:20px; }
.court-amenities { padding-top:20px; border-top:1px solid var(--line); }
.court-sidebar,.order-action-panel,.court-editor-publish,.cf-checkout { position:sticky; top:108px; }
.court-price-row { display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); font-size:.86rem; }
.court-price-row small { color:var(--muted); }
.court-policy-item { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.court-policy-item p { margin:8px 0 0; }
.mobile-schedule-link { display:none; }
/* Booking, checkout and transfer */
.my-bookings-heading,.order-detail-heading,.owner-dashboard-heading,.court-editor-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:28px; }
.my-bookings-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:24px; margin-bottom:28px; border:1px solid #cee3d7; border-radius:var(--radius); background:var(--soft); }
.my-bookings-guide > div { display:flex; gap:12px; }
.my-guide-number,.court-editor-number,.cf-step b { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#d5e9de; color:var(--green-dark); font-size:.75rem; flex:none; }
.my-bookings-guide p,.my-bookings-help,.order-action-help,.order-price-note,.cf-checkout-note { font-size:.8rem; color:var(--muted); margin:8px 0 0; }
.my-bookings-help { margin-top:20px; }
.notice-panel { margin-bottom:24px; }
.notice-list { list-style:none; padding:0; margin:0; }
.notice-list li + li { border-top:1px solid var(--line); }
.notice-list a { display:flex; justify-content:space-between; gap:20px; padding:16px; color:var(--ink); font-size:.88rem; }
.notice-list small { color:var(--muted); flex-shrink:0; }
.notice-list .is-unread a { background:var(--soft); border-left:3px solid var(--green); }
.booking-history-table { min-width:820px; }
.booking-history-court,.booking-history-schedule,.booking-history-customer,.booking-history-payment,.owner-court-info { display:flex; flex-direction:column; gap:5px; }
.booking-history-court { min-width:160px; max-width:260px; }
.booking-history-id,.booking-history-sport,.booking-history-schedule small,.booking-history-customer small,.booking-history-payment small,.owner-court-info > span { font-size:.73rem; color:var(--muted); }
.booking-history-name { font-weight:700; }
.booking-history-payment > strong { color:var(--green-dark); white-space:nowrap; }
.booking-hold-deadline { display:block; color:var(--warning); font-size:.73rem; margin-top:8px; max-width:180px; }
.needs-deposit-check td:first-child { border-left:3px solid #dcad3d; }
.order-court-name { margin-top:16px; }
.order-facts { grid-template-columns:repeat(2,minmax(0,1fr)); background:#f6f9f8; }
.order-customer-info,.account-info-list { margin:24px 0 0; }
.order-customer-info > div,.account-info-list > div { display:grid; grid-template-columns:140px minmax(0,1fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
dt { color:var(--muted); font-weight:500; font-size:.83rem; }
dd { overflow-wrap:anywhere; margin-bottom:0; }
.order-state-panel h2 { font-size:1.4rem; }
.order-total { padding-block:20px; }
.order-total > strong { display:block; font-size:2.3rem; line-height:1.2; color:var(--green); overflow-wrap:anywhere; }
.order-total > span { color:var(--muted); font-size:.8rem; }
.order-deposit-lines,.revenue-parts { margin:16px 0; }
.order-deposit-lines > div,.revenue-parts > div { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.order-deposit-lines dd { font-weight:700; }
.order-payment-note,.cf-payment-method { padding:14px; border-radius:10px; background:var(--soft); color:var(--green-dark); font-size:.82rem; }
.order-actions { display:grid; gap:12px; padding-top:24px; margin-top:24px; border-top:1px solid var(--line); }
.order-back-link { display:block; text-align:center; margin-top:24px; font-size:.84rem; }
.deposit-policy { padding:18px; border:1px solid #cee3d7; border-radius:12px; background:var(--soft); margin-bottom:20px; font-size:.88rem; }
.deposit-policy ul { padding-left:20px; margin:8px 0 0; }
.deposit-agreement,.cf-agreement { display:flex; align-items:flex-start; gap:12px; margin:24px 0; font-size:.85rem; }
.deposit-agreement input,.cf-agreement input { width:18px; height:18px; margin-top:5px; flex:none; }
.deposit-qr-layout { display:grid; grid-template-columns:230px minmax(0,1fr); align-items:start; gap:24px; margin-block:24px; }
.deposit-qr { width:230px; height:auto; border:1px solid var(--line); border-radius:12px; background:white; }
.deposit-transfer-info > div { margin-bottom:18px; }
.deposit-transfer-info dd { font-weight:650; margin-top:5px; }
.deposit-amount { color:var(--green); font-size:1.3rem; }
.deposit-warning { padding:16px; border:1px solid #edd59a; border-left:4px solid #c59427; border-radius:10px; background:#fff8e8; color:var(--warning); font-size:.86rem; }
.deposit-owner-actions { display:flex; flex-wrap:wrap; gap:12px; }
.deposit-alert { display:flex; flex-direction:column; gap:5px; padding:20px; border:1px solid #e9d39b; border-radius:12px; background:#fff8e8; color:var(--warning); margin-bottom:24px; }
.deposit-alert:hover { color:#69400d; }
.deposit-alert span { font-size:.83rem; }
.deposit-alert-muted { background:#edf3f4; color:var(--muted); border-color:var(--line); }
.copy-button { border:1px solid var(--line); border-radius:8px; background:white; color:var(--green-dark); padding:7px 9px; margin-left:8px; min-height:44px; font-size:.7rem; display:none; gap:5px; align-items:center; }
.js-ready .copy-button { display:inline-flex; }
.copy-button .icon { width:16px; height:16px; }
.cf-heading { margin-bottom:28px; }
.cf-heading > p:last-child { color:var(--muted); }
.cf-steps { display:flex; flex-wrap:wrap; gap:16px 28px; padding:20px 24px; border:1px solid var(--line); border-radius:14px; background:white; margin-bottom:28px; }
.cf-step { display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--muted); }
.cf-step-current { color:var(--green); font-weight:700; }
.cf-step-current b { background:var(--green); color:white; }
.cf-sport { display:inline-block; margin-bottom:16px; }
.cf-court-name { margin-bottom:12px; }
.cf-address { color:var(--muted); font-size:.9rem; }
.cf-facts { grid-template-columns:repeat(2,minmax(0,1fr)); padding:24px 0 0; border:0; border-top:1px solid var(--line); border-radius:0; }
.cf-policy { display:flex; gap:16px; padding-top:20px; margin-top:20px; border-top:1px solid var(--line); }
.cf-policy-number { color:var(--green); font-size:.78rem; font-weight:750; }
.cf-policy p { color:var(--muted); font-size:.86rem; margin-bottom:0; }
.cf-payment-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.85rem; color:var(--muted); }
.cf-payment-row strong { color:var(--ink); }
.cf-total { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.cf-total > * { display:block; }
.cf-total span { font-size:.85rem; color:var(--muted); }
.cf-total strong { font-size:2.3rem; color:var(--green); overflow-wrap:anywhere; }
.cf-payment-method { margin-top:20px; }
.cf-change { display:block; text-align:center; font-size:.84rem; margin-top:16px; }
.cf-checkout-note { border-top:1px solid var(--line); padding-top:18px; margin-top:24px; }
/* Owner workspace and court editor */
.owner-workspace { display:grid; grid-template-columns:205px minmax(0,1fr); align-items:start; gap:28px; }
.owner-workspace-content { min-width:0; }
.owner-navigation { position:sticky; top:104px; padding:16px 12px; background:white; border:1px solid var(--line); border-radius:var(--radius); }
.owner-navigation > summary { display:none; cursor:pointer; align-items:center; gap:10px; font-weight:700; }
.owner-navigation-brand { display:block; padding:6px 12px 22px; font-size:1rem; font-weight:750; color:var(--ink); }
.owner-navigation-brand span { display:block; font-size:.72rem; color:var(--muted); font-weight:400; margin-top:5px; }
.owner-section-links { display:flex; flex-direction:column; gap:5px; }
.owner-section-links a { display:flex; align-items:center; gap:10px; padding:12px; border-radius:9px; color:#49615c; font-size:.82rem; font-weight:600; }
.owner-section-links a:hover { background:var(--soft); color:var(--green); text-decoration:none; }
.owner-navigation-note { border-top:1px solid var(--line); padding-top:16px; margin:20px 12px 0; color:var(--muted); font-size:.73rem; }
.owner-dashboard-heading h1 { font-size:clamp(1.8rem,3vw,2.4rem); }
.owner-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:28px; }
.owner-stat-card { display:flex; flex-direction:column; padding:22px; border:1px solid var(--line); border-radius:14px; background:#fff; min-width:0; }
.owner-stat-label { color:var(--muted); font-size:.8rem; }
.owner-stat-card > strong { display:block; font-size:clamp(1.6rem,2.4vw,2.2rem); color:var(--green-dark); margin:14px 0 8px; overflow-wrap:anywhere; line-height:1.25; }
.owner-stat-card > small { color:var(--muted); font-size:.7rem; margin-top:auto; }
.owner-stat-revenue { background:var(--green-dark); border-color:var(--green-dark); }
.owner-stat-revenue > strong { color:var(--lime); }
.owner-stat-revenue .owner-stat-label,.owner-stat-revenue > small { color:#d0e6dc; }
.owner-filter-note,.owner-booking-guidance { font-size:.8rem; color:var(--muted); margin:20px 0 0; }
.owner-filter-note { padding-top:18px; border-top:1px solid var(--line); }
.owner-booking-guidance { margin:0 0 24px; }
.owner-revenue-summary { padding:24px; border:1px solid #cce1d6; border-radius:14px; background:var(--soft); height:100%; }
.owner-revenue-summary > span { color:var(--muted); font-size:.7rem; letter-spacing:.05em; }
.owner-revenue-summary > strong { display:block; font-size:clamp(1.7rem,3vw,2.5rem); color:var(--green); overflow-wrap:anywhere; margin-top:10px; }
.owner-revenue-summary > small { display:block; color:var(--muted); font-size:.73rem; }
.revenue-parts dd { font-weight:700; font-size:.83rem; }
.revenue-parts .revenue-total { border:0; }
.revenue-parts .revenue-total dt { font-weight:700; color:var(--ink); }
.owner-revenue-line { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line); font-size:.86rem; }
.owner-revenue-empty { border:1px dashed var(--line); border-radius:14px; height:100%; display:grid; align-content:center; }
.owner-revenue-empty p { margin:12px 0 0; font-size:.83rem; }
.owner-courts-table { min-width:720px; }
.owner-court-info a { font-weight:700; }
.owner-court-actions { display:flex; gap:8px; }
.court-editor-section-heading { display:flex; align-items:flex-start; gap:14px; margin-bottom:24px; }
.court-editor-section-heading h2 { font-size:1.3rem; }
.court-editor-section-heading p,.court-editor-help,.register-field-help { display:block; color:var(--muted); font-size:.78rem; margin:6px 0 0; }
.court-editor-peak { padding:22px; background:#f5f8f7; border:1px solid var(--line); border-radius:12px; margin-top:24px; }
.court-editor-peak-heading { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; }
.court-editor-peak-heading > span { font-size:.75rem; color:var(--muted); }
.court-editor-upload { padding:28px; border:1px dashed #adc9bc; border-radius:14px; background:#f7faf8; }
.court-editor-upload h3 { margin-top:16px; }
.court-editor-upload p { color:var(--muted); font-size:.85rem; }
.court-editor-active { padding:16px; background:var(--soft); border-radius:10px; margin-bottom:16px; }
.court-editor-checklist { margin:20px 0; color:var(--muted); font-size:.82rem; }
.court-editor-checklist span { color:var(--green); margin-right:8px; }
.court-editor-image-grid,.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.court-editor-image-card { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.court-editor-image-card img,.gallery img { width:100%; height:180px; object-fit:cover; }
.court-editor-image-actions { padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.75rem; color:var(--muted); }
/* Authentication and account */
.login-page { padding-block:36px 56px; }
.login-layout { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--shadow); }
.login-showcase { display:flex; flex-direction:column; justify-content:space-between; padding:52px; background:linear-gradient(150deg,#064e3bed,#064e3bdb),url('../images/hero-court.png') center/cover; color:white; }
.login-kicker { color:var(--lime); font-size:.72rem; font-weight:700; letter-spacing:.13em; }
.login-showcase h1 { color:white; font-size:clamp(2rem,3.3vw,3.1rem); margin:28px 0 24px; }
.login-description { color:#d0e6dc; font-size:.94rem; }
.login-benefits { display:grid; gap:18px; margin-block:36px; }
.login-benefits > div { display:flex; align-items:center; gap:14px; font-size:.86rem; }
.login-benefits span { display:grid; place-items:center; width:32px; height:32px; border:1px solid #ffffff50; border-radius:9px; color:var(--lime); font-size:.7rem; }
.login-benefits p { margin:0; }
.login-showcase-footer { font-size:.75rem; color:#d0e6dc; padding-top:28px; border-top:1px solid #ffffff30; }
.login-panel { padding:40px 52px; }
.login-symbol,.account-avatar { display:inline-grid; place-items:center; width:56px; height:56px; background:var(--soft); border-radius:16px; color:var(--green); margin-bottom:20px; }
.login-panel-heading h2 { font-size:2rem; }
.login-form { margin-top:28px; }
.login-register { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:20px; margin-top:24px; font-size:.84rem; }
.login-register a { font-weight:700; }
.login-payment-note,.account-security-note { padding:18px; background:var(--soft); border-radius:12px; margin-top:24px; font-size:.82rem; }
.login-payment-note p { color:var(--muted); margin-top:6px; }
.login-forgot-note { color:var(--muted); font-size:.8rem; margin-top:20px; }
.password-card { max-width:520px; margin-inline:auto; }
.account-heading { margin-bottom:28px; }
.account-profile { text-align:center; }
.account-avatar { width:80px; height:80px; border-radius:24px; }
.account-profile-name { font-size:1.5rem; }
.account-profile-email { color:var(--muted); font-size:.85rem; overflow-wrap:anywhere; }
.account-profile-links { display:grid; gap:10px; margin-top:24px; }
.account-readonly-note { font-size:.8rem; color:var(--muted); margin-top:20px; }
.account-shortcuts { display:grid; gap:12px; margin-top:24px; }
.account-shortcut { display:flex; align-items:center; gap:16px; padding:18px; border:1px solid var(--line); border-radius:12px; color:var(--ink); }
.account-shortcut:hover { background:var(--soft); text-decoration:none; }
.account-shortcut-icon { display:grid; place-items:center; width:42px; height:42px; flex:none; background:var(--soft); color:var(--green); border-radius:12px; }
.account-shortcut p { font-size:.8rem; color:var(--muted); margin:5px 0 0; }
.payment-qr-current { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-block:20px; }
.payment-qr-current img { width:160px; height:auto; border:1px solid var(--line); border-radius:12px; }
.temp-password { border:1px solid #edd59a; border-radius:12px; background:#fff8e8; padding:20px; margin-block:20px; }
.temp-password > * { display:block; }
.temp-password code { font-size:1.4rem; margin:8px 0; }
/* Ratings */
.stars { --rating:0; display:inline-block; font-size:1rem; line-height:1; letter-spacing:1px; vertical-align:-1px; }
.stars::before { content:'★★★★★'; background:linear-gradient(90deg,#b77b08 calc(var(--rating)/5*100%),#cbd6d0 calc(var(--rating)/5*100%)); background-clip:text; -webkit-background-clip:text; color:transparent; }
.card-rating,.rating-summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px; color:var(--muted); font-size:.8rem; margin:0 0 18px; }
.rating-summary { display:inline-flex; margin:4px 0 0; }
.card-rating strong { color:var(--ink); }
.review-score { display:flex; align-items:center; gap:12px; }
.review-score > strong { font-size:2rem; color:var(--green); }
.review-score small { display:block; color:var(--muted); }
.review-list { list-style:none; padding:0; margin:20px 0 0; }
.review-list li { padding-block:22px; border-top:1px solid var(--line); }
.review-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.review-meta small { color:var(--muted); }
.review-list p { margin:12px 0 8px; font-size:.9rem; }
.review-verified { display:inline-flex; align-items:center; gap:5px; font-size:.73rem; color:var(--green); }
.review-verified .icon { width:15px; height:15px; }
.review-reply { padding:16px; border-left:3px solid var(--green); border-radius:0 10px 10px 0; background:var(--soft); margin-top:16px; font-size:.85rem; }
.review-reply small { color:var(--muted); margin-left:8px; }
.review-reply p { margin-bottom:0; }
.review-reply-form { margin-top:16px; }
.review-reply-form summary { cursor:pointer; color:var(--green); font-size:.85rem; }
.review-reply-form form { margin-top:16px; }
.star-input { display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:6px; padding:0; margin:0 0 20px; border:0; }
.star-input input { position:absolute; opacity:0; width:1px; height:1px; }
.star-input label { color:#cbd6d0; font-size:2rem; cursor:pointer; line-height:1.5; }
.star-input input:checked ~ label,.star-input label:hover,.star-input label:hover ~ label { color:#b77b08; }
.star-input input:focus-visible + label { outline:3px solid var(--green); outline-offset:3px; border-radius:5px; }
/* Overlays */
.photo-dialog { border:0; border-radius:16px; padding:16px; background:#102820; max-width:min(96vw,1200px); max-height:94dvh; }
.photo-dialog::backdrop { background:#061d17d9; }
.photo-dialog > button { display:flex; margin:0 0 12px auto; }
.photo-dialog > img { display:block; max-width:100%; max-height:78dvh; object-fit:contain; margin:auto; }
.ui-feedback { position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); z-index:100; max-width:calc(100% - 32px); width:max-content; background:var(--green-dark); color:#fff; border-radius:12px; padding:14px 20px; box-shadow:0 8px 30px #0002; opacity:0; pointer-events:none; font-size:.85rem; transition:opacity .2s,transform .2s; }
.ui-feedback.is-visible { opacity:1; transform:translate(-50%,0); }
/* Responsive */
@media (max-width:1199px) {
 .nav-links { gap:14px; font-size:.8rem; }
 .owner-workspace { grid-template-columns:180px minmax(0,1fr); gap:20px; }
 .owner-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .deposit-qr-layout { grid-template-columns:1fr; }
 .deposit-qr { justify-self:center; }
 .login-panel,.login-showcase { padding:36px; }
}
@media (max-width:991px) {
 .nav-bar { flex-wrap:wrap; min-height:72px; gap:0; padding-block:14px; }
 .nav-toggle-label { display:flex; }
 .nav-links { display:none; width:100%; flex-direction:column; align-items:stretch; gap:4px; padding-top:16px; font-size:.9rem; }
 .nav-toggle:checked ~ .nav-links { display:flex; }
 .nav-links > a { padding:12px; border-radius:8px; }
 .account-menu summary { padding:12px; }
 .account-menu-panel { position:static; width:100%; box-shadow:none; }
 .hero > div:first-child { padding:36px 28px; }
 .sport-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .court-sidebar,.order-action-panel,.court-editor-publish,.cf-checkout { position:static; }
 .owner-workspace { display:block; }
 .owner-navigation { position:static; margin-bottom:24px; padding:16px; }
 .owner-navigation > summary { display:flex; }
 .owner-navigation-brand,.owner-navigation-note { display:none; }
 .owner-section-links { margin-top:16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
 .owner-dashboard-heading { flex-wrap:wrap; }
 .login-layout { grid-template-columns:.85fr 1fr; }
 .login-showcase,.login-panel { padding:28px; }
 .my-bookings-guide { gap:16px; }
 .court-quick-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px) {
 .container { padding-inline:16px; }
 .page-space { padding-block:28px 40px; }
 .surface,.cf-card { padding:22px; border-radius:14px; }
 .hero { grid-template-columns:1fr; border-radius:18px; }
 .hero h1 { font-size:2.5rem; }
 .hero-art { min-height:220px; }
 .art-label { font-size:2.2rem; bottom:24px; left:24px; }
 .search-panel { padding:20px; margin-bottom:32px; }
 .search-disclosure > summary { flex-wrap:wrap; font-size:.92rem; }
 .search-disclosure > summary > span { width:100%; margin-left:31px; }
 .sport-chip { padding:16px 12px; column-gap:4px; }
 .sport-chip strong { font-size:.9rem; }
 .card-art { height:240px; }
 .card-body { padding:20px; }
 .step-grid { grid-template-columns:1fr; gap:14px; }
 .step-grid article { padding:24px; }
 .step-grid .icon { margin-bottom:16px; }
 .bottom-strip { flex-direction:column; align-items:flex-start; padding:24px; }
 .footer-grid { grid-template-columns:1fr 1fr; gap:28px; padding-block:32px; }
 .footer-grid > div { grid-column:1/-1; }
 .footer-bottom { flex-direction:column; }
 .court-detail-header { flex-direction:column; align-items:flex-start; gap:16px; }
 .court-detail-rate { text-align:left; }
 .court-detail-rate strong { font-size:1.6rem; }
 .court-main-photo { height:300px; border-radius:16px; }
 .court-photo-thumbs { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
 .court-photo-thumbs img { height:70px; }
 .court-photo-caption { left:16px; right:auto; bottom:16px; font-size:.72rem; }
 .court-quick-facts { padding:20px; gap:18px; }
 .slot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .slot { padding:13px; }
 .court-date-filter { flex-direction:column; align-items:stretch; padding:16px; }
 .court-detail-page { padding-bottom:84px; }
 .mobile-schedule-link { display:flex; position:fixed; bottom:16px; left:16px; right:16px; z-index:25; box-shadow:0 8px 28px #064e3b30; }
 .my-bookings-heading,.order-detail-heading,.court-editor-heading { flex-direction:column; gap:16px; }
 .my-bookings-guide { grid-template-columns:1fr; padding:20px; }
 .my-bookings-panel .table-responsive,.owner-dashboard .booking-list-fragment .table-responsive { border:0; overflow:visible; }
 .booking-history-table { min-width:0; display:block; }
 .booking-history-table caption { display:none; }
 .booking-history-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .booking-history-table tbody { display:grid; gap:16px; }
 .booking-history-table tr { display:grid; grid-template-columns:1fr 1fr; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fff; }
 .booking-history-table td { display:block; padding:8px; border:0; background:transparent; box-shadow:none; min-width:0; }
 .booking-history-table td::before { content:attr(data-label); display:block; font-size:.68rem; font-weight:650; color:var(--muted); margin-bottom:8px; }
 .booking-history-table td:first-child,.booking-history-table td[data-label='Khách hàng'],.booking-history-table td:last-child { grid-column:1/-1; }
 .booking-history-table td:first-child::before,.booking-history-table td:last-child::before { display:none; }
 .booking-history-table td:last-child .btn { width:100%; }
 .booking-history-court { max-width:none; min-width:0; }
 .needs-deposit-check td:first-child { border:0; }
 .booking-history-table tr.needs-deposit-check { border-left:4px solid #dcad3d; }
 .status-pill { white-space:normal; }
 .booking-hold-deadline { max-width:none; }
 .notice-list a { flex-direction:column; gap:8px; padding:14px; }
 .order-customer-info > div,.account-info-list > div { grid-template-columns:1fr; gap:5px; }
 .cf-steps { padding:18px; gap:12px; }
 .cf-step { font-size:.75rem; }
 .deposit-qr-layout { gap:20px; }
 .deposit-transfer-info dd { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
 .copy-button { margin-left:0; }
 .owner-section-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .owner-stat-card { padding:18px; }
 .owner-stat-label { font-size:.74rem; }
 .owner-stat-card > strong { font-size:1.6rem; }
 .owner-revenue-summary { padding:20px; }
 .login-layout { display:flex; flex-direction:column; border-radius:18px; }
 .login-showcase { padding:28px; }
 .login-showcase h1 { margin:16px 0; font-size:2rem; }
 .login-benefits,.login-showcase-footer { display:none; }
 .login-description { margin:0; font-size:.85rem; }
 .login-panel { padding:28px 24px; }
 .login-symbol { display:none; }
 .login-back { margin-bottom:20px; }
 .court-editor-upload,.court-editor-peak { padding:18px; }
}
@media (max-width:359px) {
 .sport-grid { grid-template-columns:1fr; }
 .slot-grid,.owner-stat-grid { grid-template-columns:1fr; }
 .booking-history-table tr { grid-template-columns:1fr; }
 .booking-history-table td { grid-column:1/-1; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none !important; transition:none !important; }
 .court-card:hover { transform:none; }
}

/* Refined sign-in page; scoped to preserve the shared form system. */
.login-page { padding-block:48px 64px; }
.login-layout { grid-template-columns:1fr 1fr; max-width:1120px; margin-inline:auto; border:0; border-radius:24px; box-shadow:0 18px 64px #123b3010; }
.login-showcase { min-width:0; padding:56px 48px 40px; background:linear-gradient(180deg,rgba(3,43,35,.83),rgba(3,43,35,.28) 58%,rgba(3,43,35,.8)),url('../images/hero-court.png') 48% center/cover; }
.login-kicker { color:#cde5d9; font-size:.68rem; letter-spacing:.18em; }
.login-showcase h1 { margin:24px 0 22px; font-size:clamp(2.2rem,3.2vw,3rem); font-weight:600; line-height:1.18; letter-spacing:-.045em; }
.login-description { max-width:310px; margin-bottom:0; color:#e1eee8; font-size:.94rem; line-height:1.85; }
.login-showcase-footer { margin-top:200px; padding:0; border:0; color:#e1eee8; font-size:.75rem; }
.login-panel { display:flex; flex-direction:column; align-items:stretch; justify-content:center; min-width:0; padding:44px 48px; background:#fff; }
.login-panel > * { width:100%; max-width:400px; margin-inline:auto; }
.login-panel .login-back { margin-bottom:30px; color:#61746d; font-size:.78rem; font-weight:500; }
.login-panel-heading .eyebrow { margin-bottom:10px; font-size:.65rem; font-weight:600; letter-spacing:.14em; }
.login-panel-heading h2 { margin-bottom:10px; color:#153e34; font-size:2rem; font-weight:650; letter-spacing:-.04em; }
.login-panel-heading .muted { margin:0; font-size:.87rem; }
.login-form { margin-top:28px; }
.login-form .form-label { margin-bottom:8px; color:#29483f; font-size:.82rem; font-weight:600; }
.login-form .form-control { height:48px; min-height:48px; padding:11px 14px; border:1px solid #dfe5e2; border-radius:12px; background:#fff; font-size:.9rem; box-shadow:none; transition:border-color .18s,box-shadow .18s; }
.login-form .form-control::placeholder { color:#82918b; opacity:1; }
.login-form .form-control:focus { border-color:#13836e; box-shadow:0 0 0 3px #13836e14; }
.login-password-field { position:relative; }
.login-password-field input { padding-right:50px !important; }
.login-password-toggle { position:absolute; right:3px; top:3px; display:grid; place-items:center; width:42px; height:42px; padding:0; border:0; border-radius:10px; background:transparent; color:#72847c; cursor:pointer; }
.login-password-toggle[hidden] { display:none; }
.login-password-toggle:hover { background:#f0f6f3; color:#106b58; }
.login-eye-slash { display:none; }
.login-password-toggle[aria-pressed="true"] .login-eye-slash { display:block; }
.login-form .login-submit { display:flex; align-items:center; justify-content:center; gap:10px; height:48px; min-height:48px; padding:10px 18px; border:1px solid #096b58; border-radius:12px; background:#096b58; font-size:.9rem; font-weight:600; box-shadow:0 4px 10px #096b5810; transition:background .18s,box-shadow .18s,transform .18s; }
.login-form .login-submit:hover { background:#075b4b; border-color:#075b4b; box-shadow:0 5px 14px #096b5826; transform:translateY(-1px); }
.login-form .login-submit:disabled { opacity:.75; transform:none; cursor:wait; }
.login-form[aria-busy="true"] .login-submit::before { content:''; width:15px; height:15px; border:2px solid #ffffff55; border-top-color:white; border-radius:50%; animation:login-spin .8s linear infinite; }
@keyframes login-spin { to { transform:rotate(360deg); } }
.login-social { margin-top:24px; text-align:center; }
.login-divider { display:flex; align-items:center; gap:14px; margin-bottom:18px; color:#7a8882; font-size:.73rem; }
.login-divider::before,.login-divider::after { content:''; flex:1; height:1px; background:#e9eeeb; }
.login-google { display:inline-flex; justify-content:center; align-items:center; width:44px; height:44px; border:1px solid #e0e6e2; border-radius:50%; background:#fff; box-shadow:0 2px 4px #193d2f04; transition:transform .18s,box-shadow .18s,border-color .18s; }
.login-google svg { width:20px; height:20px; flex:none; }
.login-google:hover { transform:translateY(-2px); box-shadow:0 6px 16px #193d2f14; border-color:#c8d7ce; }
.login-google:focus-visible,.login-password-toggle:focus-visible { outline:2px solid #13836e; outline-offset:4px; }
.login-forgot-note { margin-top:22px; margin-bottom:0; color:#718078; font-size:.74rem; line-height:1.7; text-align:center; }
.login-google-unavailable { margin-top:20px; margin-bottom:0; color:#718078; font-size:.75rem; text-align:center; }
.login-register { justify-content:center; gap:6px; margin-top:24px; padding:0; border:0; color:#6c7d74; font-size:.8rem; }
.login-register a { color:#096b58; font-weight:600; }
.login-panel .alert { margin-top:18px; margin-bottom:0; font-size:.82rem; }
@media (min-width:768px) and (max-width:991px) {
 .login-showcase { padding:40px 30px; }
 .login-panel { padding:36px 28px; }
}
@media (max-width:767px) {
 .login-page { padding:20px 16px 36px; }
 .login-layout { display:flex; flex-direction:column; border-radius:20px; }
 .login-showcase { padding:26px 28px; background-position:center 54%; }
 .login-showcase h1 { margin:12px 0; font-size:1.9rem; }
 .login-kicker { font-size:.6rem; }
 .login-description { max-width:340px; font-size:.8rem; line-height:1.7; }
 .login-showcase-footer { display:none; }
 .login-panel { padding:30px 28px 34px; }
 .login-panel .login-back { margin-bottom:24px; }
 .login-panel-heading h2 { font-size:1.8rem; }
}
@media (max-width:359px) {
 .login-page { padding-inline:10px; }
 .login-panel { padding-inline:20px; }
 .login-showcase { padding-inline:24px; }
 .login-panel-heading .eyebrow { font-size:.58rem; }
}
@media (prefers-reduced-motion:reduce) {
 .login-google:hover,.login-form .login-submit:hover { transform:none; }
}

/* Shared assistant widget */
.sn-assistant { position:fixed; right:max(24px,env(safe-area-inset-right)); bottom:max(24px,env(safe-area-inset-bottom)); z-index:80; font-family:inherit; line-height:1.5; color:#183b32; }
.sn-chat-launch { display:flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:14px 20px; border:1px solid #ffffff30; border-radius:99px; background:#096b58; color:white; box-shadow:0 6px 24px #064e3b30; font-family:inherit; font-size:.86rem; font-weight:600; cursor:pointer; transition:transform .18s,box-shadow .18s; }
.sn-chat-launch:hover { transform:translateY(-2px); box-shadow:0 9px 28px #064e3b40; }
.sn-chat-panel { position:absolute; right:0; bottom:68px; display:flex; flex-direction:column; width:380px; max-width:calc(100vw - 32px); height:570px; max-height:calc(100dvh - 110px); background:#fff; border:1px solid #e2ebe5; border-radius:22px; box-shadow:0 18px 65px #153d322b; overflow:hidden; }
.sn-chat-panel[hidden] { display:none; }
.sn-chat-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 22px; color:white; background:#096b58; }
.sn-chat-heading h2 { margin:4px 0 0; color:white; font-size:1.12rem; font-weight:600; letter-spacing:-.02em; }
.sn-chat-eyebrow { font-size:.57rem; letter-spacing:.15em; color:#c9e9dc; }
.sn-chat-close { width:36px; height:36px; border:0; border-radius:50%; background:#ffffff12; color:white; font-size:1.5rem; cursor:pointer; }
.sn-chat-notice { padding:12px 20px; margin:0; color:#6a7a72; font-size:.67rem; background:#f7faf8; }
.sn-chat-messages { flex:1; min-height:90px; overflow-y:auto; overscroll-behavior:contain; padding:18px; display:flex; flex-direction:column; gap:12px; }
.sn-chat-bubble { max-width:94%; flex-shrink:0; align-self:flex-start; padding:12px 14px; border-radius:14px 14px 14px 3px; background:#f0f6f2; color:#294b3e; font-size:.82rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.sn-chat-bubble p { margin:0; }
.sn-chat-bubble a { display:block; margin-top:8px; color:#07634f; font-weight:600; text-decoration:underline; }
.sn-chat-user { align-self:flex-end; background:#096b58; color:white; border-radius:14px 14px 3px 14px; }
.sn-chat-error { background:#fff2ef; color:#963c31; }
.sn-chat-suggestions { display:flex; flex-wrap:wrap; gap:6px; padding:0 18px 8px; }
.sn-chat-suggestions button { padding:6px 10px; border:1px solid #dce7df; background:white; border-radius:99px; font-size:.68rem; color:#4c6b5d; cursor:pointer; text-align:left; }
.sn-chat-status { min-height:22px; margin:0; padding:0 20px 4px; font-size:.71rem; color:#687d71; }
.sn-chat-form { display:flex; gap:8px; margin:0; padding:8px 16px; align-items:center; }
.sn-chat-form textarea { flex:1; min-width:0; height:44px; min-height:44px; max-height:88px; resize:vertical; border:1px solid #dce5df; border-radius:12px; padding:11px 12px; font:inherit; font-size:.8rem; background:white; }
.sn-chat-form textarea:focus { outline:0; border-color:#13836e; box-shadow:0 0 0 3px #13836e14; }
.sn-chat-form button { height:44px; padding:0 14px; background:#096b58; color:white; border:0; border-radius:12px; font-size:.8rem; font-weight:600; cursor:pointer; }
.sn-chat-bottom { display:flex; justify-content:space-between; gap:6px; padding:0 18px 14px; color:#7c8a82; font-size:.62rem; }
.sn-chat-reset { padding:0; border:0; background:none; font:inherit; color:#567866; cursor:pointer; }
.sn-assistant button:disabled { opacity:.55; cursor:wait; }
.sn-assistant button:focus-visible { outline:2px solid #72c1a1; outline-offset:3px; }
@media(max-width:575px) {
 .sn-assistant { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); }
 .sn-chat-launch { min-height:50px; padding:12px 16px; }
 .sn-chat-panel { bottom:64px; width:calc(100vw - 32px); max-height:calc(100dvh - 100px); border-radius:18px; }
 .sn-chat-form textarea { font-size:16px; }
 .sn-chat-heading { padding:16px 20px; }
}
@media(prefers-reduced-motion:reduce) { .sn-chat-launch:hover { transform:none; } }

/* Customer-owner messaging, intentionally separate from the AI widget. */
.court-message-action { margin:0 0 28px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.court-message-action form { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:0; }
.court-message-action .muted { font-size:.82rem; }
.messaging-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
.messaging-heading h1 { font-size:2.1rem; margin-bottom:10px; }
.messaging-heading p { max-width:640px; }
.messaging-layout { display:grid; grid-template-columns:300px minmax(0,1fr); min-height:640px; background:white; border:1px solid #e2eae5; border-radius:22px; overflow:hidden; box-shadow:0 10px 40px #183b3207; }
.messaging-inbox { background:#f7faf8; border-right:1px solid #e2eae5; padding:22px 16px; min-width:0; }
.messaging-inbox-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; padding-inline:6px; }
.messaging-inbox h2 { font-size:1.05rem; margin:0; }
.messaging-count { background:#e0f0e7; color:#096b58; border-radius:99px; font-size:.75rem; padding:3px 9px; }
.messaging-connection { color:#788b80; font-size:.71rem; padding:0 6px; }
.messaging-threads { display:flex; flex-direction:column; gap:8px; max-height:560px; overflow:auto; }
.messaging-thread { width:100%; min-width:0; display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:5px; background:transparent; border:1px solid transparent; border-radius:12px; padding:14px; color:#234b3a; cursor:pointer; overflow-wrap:anywhere; }
.messaging-thread strong { font-size:.87rem; }
.messaging-thread span { font-size:.75rem; color:#6c7f73; }
.messaging-thread small { color:#096b58; font-weight:600; }
.messaging-thread:hover,.messaging-thread[aria-pressed=true] { background:white; border-color:#d5e7da; box-shadow:0 2px 6px #163b3205; }
.messaging-conversation { display:flex; flex-direction:column; min-width:0; height:690px; }
.messaging-conversation-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 28px; border-bottom:1px solid #eef2ee; }
.messaging-conversation-heading h2 { font-size:1.1rem; margin-bottom:6px; }
.messaging-peer { margin:0; font-size:.78rem; }
.messaging-court-link { font-size:.8rem; white-space:nowrap; }
.messaging-history { flex:1; min-height:120px; overflow:auto; overscroll-behavior:contain; padding:24px 28px; display:flex; flex-direction:column; gap:14px; }
.court-chat-message { flex-shrink:0; align-self:flex-start; max-width:85%; padding:12px 16px; background:#f0f6f2; border-radius:14px 14px 14px 3px; overflow-wrap:anywhere; }
.court-chat-message strong { display:block; margin-bottom:6px; font-size:.72rem; color:#476956; }
.court-chat-message p { margin:0 0 6px; white-space:pre-wrap; font-size:.9rem; }
.court-chat-message time,.court-chat-message small { display:block; font-size:.65rem; color:#6c8172; }
.court-chat-message.is-mine { align-self:flex-end; background:#096b58; color:white; border-radius:14px 14px 3px 14px; }
.court-chat-message.is-mine strong,.court-chat-message.is-mine time,.court-chat-message.is-mine small { color:#d4ecdf; }
.court-chat-message.is-pending { border:1px dashed #c9ded1; }
.court-chat-message button { border:0; border-radius:6px; background:white; color:#096b58; padding:4px 9px; font-size:.75rem; margin-top:8px; }
.messaging-empty { color:#7c8b82; font-size:.85rem; padding:20px; }
.messaging-status { min-height:22px; font-size:.78rem; margin:0; padding:0 26px; color:#a34232; }
.messaging-form { display:flex; gap:12px; padding:12px 24px; margin:0; align-items:center; }
.messaging-form textarea { flex:1; min-width:0; min-height:52px; max-height:120px; border:1px solid #d9e4dc; border-radius:12px; padding:12px 14px; font-family:inherit; font-size:.9rem; resize:vertical; }
.messaging-form textarea:focus { border-color:#13836e; outline:0; box-shadow:0 0 0 3px #13836e14; }
.messaging-form button { flex-shrink:0; min-height:48px; }
.messaging-note { font-size:.67rem; color:#7d8d82; padding:0 26px 18px; margin:0; }
.messaging-older,.messaging-more-threads { border:0; background:none; color:#096b58; padding:10px; font-size:.77rem; cursor:pointer; }
.messaging-page [hidden] { display:none !important; }
.messaging-page button:focus-visible { outline:2px solid #13836e; outline-offset:2px; }
@media(max-width:767px) {
 .messaging-heading { align-items:flex-start; gap:12px; }.messaging-heading h1 { font-size:1.65rem; }
 .messaging-heading p { font-size:.8rem; }.messaging-heading > a { font-size:.75rem; padding:9px 12px; white-space:nowrap; }
 .messaging-layout { grid-template-columns:minmax(0,1fr); }
 .messaging-inbox { border-right:0; border-bottom:1px solid #e2eae5; padding:16px; }
 .messaging-threads { max-height:190px; }.messaging-conversation { height:620px; }
 .messaging-conversation-heading { padding:18px; }.messaging-history { padding:18px; }
 .messaging-form { padding:10px 14px; gap:8px; }.messaging-form textarea { font-size:16px; }
 .messaging-form button { padding-inline:12px; font-size:.8rem; }.messaging-note { padding-inline:16px; }
 .court-chat-message { max-width:94%; }.messaging-court-link { font-size:.7rem; }
}

.messaging-heading-actions { display:flex; flex-shrink:0; flex-wrap:wrap; gap:8px; }
.messaging-heading-actions .btn { font-size:.8rem; }
.messaging-page ~ .site-footer .sn-chat-launch { display:none; }
.messaging-page ~ .site-footer .sn-chat-panel { bottom:0; }
@media(max-width:575px) {
 .messaging-heading { flex-direction:column; }
 .messaging-heading-actions .btn { padding:8px 12px; font-size:.75rem; }
}

/* Unified AI + owner conversation */
.sn-chat-panel { width:410px; height:660px; }
.sn-chat-tools { display:flex; gap:6px; padding:10px 16px 0; }
.sn-chat-tools button { border:1px solid #dce7df; background:white; color:#096b58; padding:7px 10px; border-radius:9px; font-size:.72rem; cursor:pointer; }
.sn-chat-peer { padding:9px 18px 0; margin:0; font-size:.72rem; color:#3e6a55; }
.sn-chat-notice { font-size:.63rem; padding:9px 18px; }
.sn-chat-suggestions { padding:10px 16px; }
.sn-chat-suggestions::before { content:'Gợi ý hỏi AI'; display:block; width:100%; font-size:.62rem; color:#7b8d82; }
.sn-chat-messages { padding:16px; }
.sn-chat-author { display:block; font-size:.67rem; margin-bottom:6px; }
.sn-chat-bubble time { display:block; font-size:.58rem; opacity:.72; margin-top:6px; }
.sn-chat-owner { background:#e3f0e9; color:#164e37; border:1px solid #c9e0d1; }
.sn-chat-bubble[data-ai-status=PENDING] { opacity:.7; }
.sn-chat-bubble[data-ai-status=FAILED] { background:#fff5ec; }
.sn-chat-bubble small { display:block; font-size:.65rem; }
.sn-chat-bubble button,.sn-chat-picker-more { border:1px solid #d0e2d5; background:white; color:#096b58; border-radius:8px; padding:5px 10px; font-size:.7rem; cursor:pointer; margin-top:8px; }
.sn-chat-choice { flex-shrink:0; text-align:left; border:1px solid #dfebe2; border-radius:12px; background:#fff; padding:13px; color:#234e39; cursor:pointer; }
.sn-chat-choice:hover { background:#f1f8f4; border-color:#9dc6ac; }
.sn-chat-choice strong,.sn-chat-choice span { display:block; }
.sn-chat-choice strong { font-size:.85rem; }.sn-chat-choice span { font-size:.71rem; margin-top:5px; color:#6e8475; }
.sn-chat-login { color:#096b58; font-weight:600; }
.sn-chat-older { padding:5px; border:0; background:white; color:#096b58; font-size:.7rem; cursor:pointer; }
.sn-chat-older[hidden],.sn-chat-tools button[hidden],.sn-chat-suggestions[hidden] { display:none; }
@media(max-width:575px) { .sn-chat-panel { width:calc(100vw - 32px); max-height:calc(100dvh - 90px); }.sn-chat-tools { padding-inline:12px; }.sn-chat-suggestions { padding:8px 12px; }.sn-chat-notice { font-size:.6rem; } }

@media(max-height:700px) {
 .sn-chat-heading { padding:12px 16px; }
 .sn-chat-notice { display:none; }
 .sn-chat-suggestions { padding-block:6px; }
 .sn-chat-suggestions button { padding:4px 8px; font-size:.64rem; }
 .sn-chat-messages { min-height:60px; }
 .sn-chat-form,.sn-chat-bottom { flex-shrink:0; }
}