/* ============================================================
   [DATSAN_V2] giaodien.css — giao diện PM Quản lý đặt sân
   Đồng bộ nhận diện phanmemdedung.vn (xanh #0099e6, Noto Serif)
   ============================================================ */
:root {
  --xanh: #0099e6;
  --xanh-dam: #0066cc;
  --navy: #16263d;
  --chu: #33415c;
  --chu-nhat: #7d8da6;
  --vien: #e3e9f1;
  --nen: #f2f5f9;
  --trang: #ffffff;
  --bong: 0 1px 3px rgba(22,38,61,.06), 0 8px 24px rgba(22,38,61,.07);
  --bo: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Roboto', 'Segoe UI', sans-serif;
  background: linear-gradient(180deg, #eef3f9 0%, var(--nen) 240px);
  color: var(--chu); line-height: 1.65; font-size: 15px;
  min-height: 100vh; display: flex; flex-direction: column;
}

/* ===== HEADER ===== */
.site-header {
  background: var(--trang);
  border-bottom: 1px solid var(--vien);
  box-shadow: 0 1px 10px rgba(22,38,61,.05);
  padding: 13px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: 0; z-index: 100;
}
.site-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--xanh), #34c3ff 55%, #FACC15);
}
.site-header .brand { text-decoration: none; display: flex; align-items: baseline; gap: 10px; }
.site-header .brand b {
  font-family: 'Noto Serif', Georgia, serif; font-size: 1.12rem;
  font-weight: 700; letter-spacing: 1px; color: var(--xanh);
}
.site-header .brand span { font-size: 0.8rem; color: var(--chu-nhat); font-weight: 500; }
.site-header .user-box { display: flex; align-items: center; gap: 16px; font-size: 0.86rem; color: var(--chu); }
.site-header .user-box b { color: var(--navy); font-weight: 600; }
.site-header .user-box a {
  color: var(--chu-nhat); text-decoration: none; font-weight: 500;
  padding: 6px 12px; border-radius: 8px; transition: all .15s;
}
.site-header .user-box a:hover { color: var(--xanh); background: #f0f7ff; }

/* ===== KHỐI ĐĂNG NHẬP / ĐĂNG KÝ ===== */
.auth-wrap { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 52px 16px; }
.auth-card {
  background: var(--trang); border: 1px solid var(--vien); border-radius: var(--bo);
  padding: 34px 30px; width: 100%; max-width: 410px; box-shadow: var(--bong);
}
.auth-card h2 {
  font-family: 'Noto Serif', Georgia, serif; font-size: 1.45rem;
  color: var(--navy); margin-bottom: 4px; text-align: center;
}
.auth-card .sub { text-align: center; font-size: 0.85rem; color: var(--chu-nhat); margin-bottom: 22px; }
.form-row { margin-bottom: 15px; }
.form-row label { display: block; font-size: 0.83rem; font-weight: 600; color: var(--navy); margin-bottom: 5px; }
.form-row input, .modal-hop select, .modal-hop input[type=time] {
  width: 100%; padding: 11px 14px; border: 1.5px solid #d9e1ec; border-radius: 10px;
  font-size: 0.95rem; font-family: inherit; background: #fbfcfe; color: var(--navy);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-row input:focus, .modal-hop select:focus, .modal-hop input[type=time]:focus {
  outline: none; border-color: var(--xanh); background: #fff;
  box-shadow: 0 0 0 3.5px rgba(0,153,230,.13);
}
/* [GIO_24H_V1] 2 ô chọn "17 giờ / 00 phút" — cho giống các ô nhập khác */
.gio-24h select {
  width: 100%; padding: 11px 14px; border: 1.5px solid #d9e1ec; border-radius: 10px;
  font-size: 0.95rem; font-family: inherit; background: #fbfcfe; color: var(--navy);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.gio-24h select:focus {
  outline: none; border-color: var(--xanh); background: #fff;
  box-shadow: 0 0 0 3.5px rgba(0,153,230,.13);
}
.gio-24h select:disabled { background: #eef1f6; color: var(--chu-nhat); }
.btn-chinh {
  width: 100%; padding: 13px; border: none; border-radius: 11px; cursor: pointer;
  background: linear-gradient(135deg, var(--xanh), var(--xanh-dam)); color: #fff;
  font-size: 1rem; font-weight: 600; font-family: inherit; letter-spacing: .2px;
  transition: transform .15s, box-shadow .15s; margin-top: 4px;
  box-shadow: 0 4px 14px rgba(0,153,230,.28);
}
.btn-chinh:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,153,230,.38); }
.btn-chinh:active { transform: translateY(0); }
.auth-alt { text-align: center; margin-top: 18px; font-size: 0.88rem; color: var(--chu-nhat); }
.auth-alt a { color: var(--xanh); text-decoration: none; font-weight: 600; }
.auth-alt a:hover { text-decoration: underline; }
/* [TK_KHACH_V1] Trước đây khối này dùng display:flex nên chữ in đậm <b> bên trong
   bị tách thành cột riêng, câu văn vỡ vụn. Đổi sang chừa lề trái + icon đặt tuyệt đối
   để chữ chảy bình thường như một đoạn văn. */
.thong-bao {
  position: relative;
  border-radius: 10px; padding: 11px 15px 11px 40px; font-size: 0.88rem;
  margin-bottom: 16px; line-height: 1.55;
}
.thong-bao::before { position: absolute; left: 14px; top: 10px; font-size: 1rem; line-height: 1.4; }
.thong-bao.loi { background: #fdecec; color: #b3261e; border: 1px solid #f6cdc9; }
.thong-bao.loi::before { content: '⚠️'; }
.thong-bao.ok { background: #e8f7ee; color: #146c3c; border: 1px solid #c2e8d0; }
.thong-bao.ok::before { content: '✅'; }

/* ===== TRANG CHÍNH (danh sách cơ sở) ===== */
.main-wrap { flex: 1; max-width: 1000px; width: 100%; margin: 0 auto; padding: 30px 18px 60px; }
.page-title {
  font-family: 'Noto Serif', Georgia, serif; font-size: 1.4rem; font-weight: 700;
  color: var(--navy); margin-bottom: 3px;
}
.page-sub { font-size: 0.88rem; color: var(--chu-nhat); margin-bottom: 22px; }
.the-donvi {
  background: var(--trang); border: 1px solid var(--vien); border-radius: var(--bo);
  padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--bong);
}
.the-donvi h3 { font-family: 'Noto Serif', Georgia, serif; font-size: 1.08rem; color: var(--navy); margin-bottom: 2px; }
.the-donvi .dc { font-size: 0.82rem; color: var(--chu-nhat); margin-bottom: 14px; }
.ds-san { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.o-san {
  border: 1px solid var(--vien); border-radius: 11px; padding: 12px 14px;
  display: flex; gap: 11px; align-items: center; background: #fafcfe;
  transition: border-color .15s, transform .15s;
}
.o-san:hover { border-color: #bcd9ef; transform: translateY(-1px); }
.o-san .ic { font-size: 1.35rem; }
.o-san b { display: block; font-size: 0.88rem; color: var(--navy); line-height: 1.35; }
.o-san span { font-size: 0.75rem; color: var(--chu-nhat); }
.o-trong {
  background: #f4f9fe; border: 1.5px dashed #a8d3f0; border-radius: var(--bo);
  padding: 28px 20px; text-align: center; color: var(--chu); font-size: 0.92rem;
}

/* ===== LƯỚI LỊCH ĐẶT SÂN ===== */
.lich-wrap { flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 24px 16px 60px; }
.lich-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.chon-dv {
  margin-top: 6px; padding: 8px 12px; border: 1.5px solid #d9e1ec; border-radius: 9px;
  font-family: inherit; font-size: 0.9rem; color: var(--navy); background: #fff; cursor: pointer;
}
.chon-ngay { display: flex; align-items: center; gap: 8px; }
.nut-ngay {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--vien);
  background: var(--trang); color: var(--navy); text-decoration: none; font-weight: 700;
  box-shadow: 0 1px 3px rgba(22,38,61,.06); transition: all .15s;
}
.nut-ngay:hover { border-color: var(--xanh); color: var(--xanh); transform: translateY(-1px); }
.o-ngay {
  position: relative; background: var(--trang); border: 1px solid var(--vien); border-radius: 10px;
  padding: 8px 18px; font-size: 0.93rem; color: var(--navy); cursor: pointer; text-align: center;
  box-shadow: 0 1px 3px rgba(22,38,61,.06);
}
.o-ngay input[type=date] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.o-ngay .hom-nay {
  background: #dcfce7; color: #166534; font-size: 0.66rem; font-weight: 700;
  padding: 2px 9px; border-radius: 12px; margin-left: 6px; vertical-align: 1px;
}

/* Thanh thống kê nhanh trong ngày */
.thanh-stat { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.stat-chip {
  background: var(--trang); border: 1px solid var(--vien); border-radius: 11px;
  padding: 9px 16px; font-size: 0.84rem; color: var(--chu-nhat);
  display: flex; align-items: baseline; gap: 7px; box-shadow: 0 1px 3px rgba(22,38,61,.05);
}
.stat-chip b { font-family: 'Noto Serif', Georgia, serif; font-size: 1.12rem; color: var(--navy); }
.stat-chip.tien b { color: var(--xanh); }

.tabs-mon { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs-mon .tab {
  padding: 8px 18px; border-radius: 22px; border: 1px solid var(--vien); background: var(--trang);
  color: var(--chu); text-decoration: none; font-size: 0.86rem; font-weight: 600;
  box-shadow: 0 1px 3px rgba(22,38,61,.05); transition: all .15s;
}
.tabs-mon .tab.on {
  background: linear-gradient(135deg, var(--xanh), var(--xanh-dam));
  border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(0,153,230,.3);
}
.tabs-mon .tab:not(.on):hover { border-color: var(--xanh); color: var(--xanh); }

.bang-cuon {
  overflow: auto; background: var(--trang); border: 1px solid var(--vien);
  border-radius: var(--bo); box-shadow: var(--bong); max-height: 78vh;
}
.bang-lich { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 680px; }
.bang-lich thead th {
  background: #fbfcfe; padding: 10px 12px; font-size: 0.88rem; color: var(--navy);
  position: sticky; top: 0; z-index: 5; border-bottom: 2px solid var(--vien);
  border-right: 1px solid #eef2f7; text-align: center;
}
.bang-lich thead th small { display: block; font-weight: 400; font-size: 0.7rem; color: var(--chu-nhat); margin-top: 1px; }
.bang-lich thead th.ct-gio { left: 0; z-index: 6; }
.ct-gio {
  width: 58px; min-width: 58px; text-align: center; font-size: 0.74rem; font-weight: 500;
  color: var(--chu-nhat); background: #fbfcfe;
  position: sticky; left: 0; z-index: 4; border-right: 2px solid var(--vien) !important;
}
.bang-lich tbody td {
  height: 36px; vertical-align: top;
  border-bottom: 1px solid #f1f4f9; border-right: 1px solid #f1f4f9;
}
.bang-lich tbody tr:nth-child(even) td.ct-gio,
.bang-lich tbody tr:nth-child(even) td.o-dat-duoc { background-image: linear-gradient(rgba(22,38,61,.012), rgba(22,38,61,.012)); }
.o-dat-duoc { cursor: pointer; text-align: center; color: transparent; font-weight: 700; font-size: 1rem; transition: all .12s; background: #fff; }
.o-dat-duoc:hover { background: #eaf6fe; color: var(--xanh); box-shadow: inset 0 0 0 1.5px #9ed7f7; }
.o-da-dat {
  background: linear-gradient(135deg, #e3f3fd, #d3ecfc);
  border-left: 3px solid var(--xanh) !important;
  padding: 6px 9px; cursor: pointer; font-size: 0.76rem; line-height: 1.45;
  border-radius: 0 6px 6px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: filter .12s;
}
.o-da-dat:hover { filter: brightness(.96); }
.o-da-dat b { display: block; color: #085c96; font-size: 0.81rem; }
.o-da-dat span { display: block; color: #3d5570; }
.o-da-dat.giu { background: linear-gradient(135deg, #fdf6dd, #fcefc4); border-left-color: #E0A800 !important; }
.o-da-dat.giu b { color: #8b6914; }
/* [TRA_TRUOC_V1] Lượt chờ chuyển khoản cọc (tự hủy sau 20 phút) */
.o-da-dat.chott { background: linear-gradient(135deg, #fff1ea, #ffe4d6); border-left-color: #ea580c !important; }
.o-da-dat.chott b { color: #c2410c; }
.o-khoa {
  background: repeating-linear-gradient(-45deg, #f4f6f9, #f4f6f9 7px, #eceff4 7px, #eceff4 14px);
  color: #93a1b5; font-size: 0.71rem; line-height: 1.35;
  padding: 6px 8px; text-align: center;
}
.chu-thich { font-size: 0.8rem; color: var(--chu-nhat); margin-top: 12px; }
.chu-thich b { color: var(--chu); }

/* ===== MODAL ===== */
.modal-nen {
  display: none; position: fixed; inset: 0; background: rgba(13,25,42,.5);
  backdrop-filter: blur(3px); z-index: 200;
  align-items: center; justify-content: center; padding: 16px;
}
.modal-nen.mo { display: flex; animation: modalNen .18s ease-out; }
@keyframes modalNen { from { opacity: 0; } to { opacity: 1; } }
.modal-hop {
  background: var(--trang); border-radius: 16px; padding: 26px 24px;
  width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(13,25,42,.3);
  animation: modalHop .2s ease-out;
}
@keyframes modalHop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-hop h3 {
  font-family: 'Noto Serif', Georgia, serif; color: var(--navy);
  margin-bottom: 16px; font-size: 1.15rem; padding-bottom: 12px;
  border-bottom: 1px solid var(--vien);
}
.hang-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.ghi-nho {
  font-size: 0.79rem; color: var(--chu); background: #f4f9fe;
  border: 1px solid #d9ebfa; border-radius: 9px; padding: 9px 13px; margin-bottom: 14px;
}
.hang-nut { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.nut-phu {
  padding: 11px 20px; border: 1px solid #d9e1ec; background: var(--trang); color: var(--chu);
  border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 0.92rem; font-weight: 600;
  transition: all .15s;
}
.nut-phu:hover { border-color: var(--chu-nhat); background: #fafbfd; }
.nut-huy {
  padding: 11px 20px; border: none; background: #dc2626; color: #fff;
  border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 0.92rem; font-weight: 600;
  box-shadow: 0 3px 10px rgba(220,38,38,.25); transition: all .15s;
}
.nut-huy:hover { background: #b91c1c; }
.ct-lich { margin-bottom: 14px; }
.ct-lich p { margin-bottom: 7px; font-size: 0.92rem; color: var(--chu); }
.ct-lich b { color: var(--navy); }

/* ===== FOOTER ===== */
.site-footer {
  background: transparent; color: var(--chu-nhat); padding: 20px; text-align: center;
  font-size: 0.78rem; border-top: 1px solid var(--vien); margin-top: 8px;
}

/* ===== MOBILE ===== */
@media (max-width: 700px) {
  .site-header { padding: 11px 14px; }
  .site-header .brand span { display: none; }
  .site-header .user-box { gap: 8px; font-size: 0.8rem; }
  .lich-head { flex-direction: column; align-items: stretch; }
  .chon-ngay { justify-content: center; }
  .thanh-stat { justify-content: center; }
  .hang-2 { grid-template-columns: 1fr; }
  .bang-lich thead th { font-size: 0.78rem; padding: 8px 6px; }
  .o-da-dat { font-size: 0.7rem; }
}

/* ===== [DATSAN_V2] Màn cài đặt cơ sở & sân (caidat.php) ===== */
.o-gop-ds { display: flex; flex-wrap: wrap; gap: 7px; }
.o-gop {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid #d9e1ec; border-radius: 9px; padding: 7px 12px;
  font-size: 0.85rem; color: var(--navy); cursor: pointer; background: #fbfcfe;
  transition: all .15s; user-select: none;
}
.o-gop:hover { border-color: var(--xanh); }
.o-gop:has(input:checked) { border-color: var(--xanh); background: #eaf6fe; color: #085c96; font-weight: 600; }
.o-gop input { accent-color: var(--xanh); }
.o-thu .o-gop { padding: 6px 11px; }
.dong-gia {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--vien); border-radius: 9px;
  margin-bottom: 7px; font-size: 0.88rem; background: #fbfcfe;
}
.dong-gia b { color: var(--xanh); }
.nut-xoa-gia {
  border: none; background: #fdecec; color: #b3261e; width: 26px; height: 26px;
  border-radius: 7px; cursor: pointer; font-size: 0.8rem; font-weight: 700;
}
.nut-xoa-gia:hover { background: #f8d7d3; }

/* ===== [TIM_DOI_V1] Ô "Tìm đối thủ" trên lưới khách (dat.php) ===== */
.o-tim-doi {
  background: linear-gradient(135deg, #ecfdf3, #dcfce7);
  border: 1.5px dashed #4ade80 !important;
  color: #166534; font-size: 0.74rem; line-height: 1.4;
  padding: 6px 8px; text-align: center; cursor: pointer;
  border-radius: 8px; transition: filter .12s, transform .12s;
}
.o-tim-doi:hover { filter: brightness(.97); transform: scale(1.01); }
.o-tim-doi b { display: block; font-size: 0.8rem; color: #15803d; }
.o-tim-doi span { display: block; color: #3f6212; font-size: 0.7rem; }

/* ===== [MOBILE_V1] Trang khách trên ĐIỆN THOẠI: nút giờ to, dễ bấm ===== */
.ds-mobile { display: none; }
.the-san-mb {
  background: var(--trang); border: 1px solid var(--vien); border-radius: 13px;
  padding: 14px 14px 12px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(22,38,61,.06);
}
.the-san-mb h4 {
  font-family: 'Noto Serif', Georgia, serif; font-size: 1.02rem; color: var(--navy);
  margin-bottom: 10px;
}
.the-san-mb h4 small { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: .74rem; color: var(--chu-nhat); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-gio {
  flex: 0 0 calc(25% - 6px); padding: 12px 0; text-align: center;
  border: 1.5px solid #bfe0f7; background: #f2f9ff; color: #085c96;
  border-radius: 11px; font-weight: 700; font-size: .98rem; font-family: inherit;
  cursor: pointer; transition: transform .1s;
}
.chip-gio:active { transform: scale(.96); background: #dceefb; }
.chip-td {
  flex: 1 1 100%; border: 1.5px dashed #4ade80; background: #ecfdf3; color: #15803d;
  font-size: .92rem;
}
.mb-het {
  width: 100%; text-align: center; color: var(--chu-nhat); font-size: .88rem;
  background: #f7f9fc; border-radius: 10px; padding: 14px;
}
/* [MOBILE_V2] Giờ đã bận: hiện xám gạch ngang, không bấm được */
.chip-ban {
  background: #f1f4f8; border-color: #e3e9f1; color: #a9b5c6;
  text-decoration: line-through; cursor: default; font-weight: 500;
}
@media (max-width: 700px) {
  .ds-mobile { display: block; }
  .an-mobile { display: none !important; }
  .lich-wrap { padding: 14px 10px 40px; }
  .page-title { font-size: 1.15rem; }
  .tabs-mon .tab { padding: 9px 18px; font-size: .9rem; }
  .nut-ngay { width: 44px; height: 44px; }
  .o-ngay { padding: 10px 14px; flex: 1; }
  .chon-ngay { width: 100%; }
}

/* ===== [HIEN_MK_V1] Nút hiện/ẩn mật khẩu ===== */
.o-mk { position: relative; }
.o-mk input { padding-right: 50px; }
.nut-mk {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; font-size: 1.15rem; line-height: 1;
  cursor: pointer; padding: 7px 9px; border-radius: 8px; color: var(--chu-nhat);
}
.nut-mk:hover { background: #f0f7ff; }

/* ===== [CK_NHANH_V1] Chuyển khoản nhanh trên điện thoại (trang cọc) ===== */
.ck-nhanh {
  background: #f4f9fe; border: 1px solid #d9ebfa; border-radius: 12px;
  padding: 14px; margin-bottom: 14px;
}
.ck-tieude { font-size: .86rem; color: var(--chu); margin-bottom: 9px; }
.ck-apps { display: flex; flex-wrap: wrap; gap: 7px; }
.ck-app {
  flex: 1 1 calc(20% - 6px); min-width: 86px; text-align: center;
  background: var(--trang); border: 1.5px solid #bfe0f7; border-radius: 9px;
  padding: 9px 4px; text-decoration: none; color: #085c96;
  font-weight: 700; font-size: .82rem; transition: transform .1s;
}
.ck-app:active { transform: scale(.95); background: #eaf6fe; }
.ck-copy {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--trang); border: 1px solid var(--vien); border-radius: 9px;
  padding: 9px 12px; margin-bottom: 7px; cursor: pointer; font-size: .88rem;
}
.ck-copy b { color: var(--navy); }
.ck-copy em {
  font-style: normal; color: var(--xanh); font-weight: 700; font-size: .8rem;
  white-space: nowrap;
}
.ck-luu {
  display: block; text-align: center; font-size: .82rem; color: var(--chu);
  background: var(--trang); border: 1px dashed #bfd3e6; border-radius: 9px;
  padding: 9px 12px; text-decoration: none; margin-top: 4px;
}
.ck-luu:active { background: #f0f7ff; }

/* [CK_NHANH_V2] Lối chính: lưu QR → quét từ ảnh (3 bước) */
.ck-buoc-chinh {
  display: block; text-align: center; text-decoration: none;
  background: linear-gradient(135deg, #16a34a, #15803d); color: #fff;
  font-weight: 700; font-size: .98rem; padding: 13px 14px; border-radius: 11px;
  box-shadow: 0 4px 12px rgba(22,163,74,.3); margin-bottom: 8px;
}
.ck-buoc-chinh:active { transform: scale(.98); }
.ck-buoc {
  background: var(--trang); border: 1px solid var(--vien); border-radius: 9px;
  padding: 9px 12px; margin-bottom: 7px; font-size: .85rem; color: var(--chu);
}

/* [GIU_CHO_V2] Ô mốc giờ đã qua trong hôm nay (khách không đặt được) */
.bang-lich td.o-qua { background:#f6f8fa; color:#c8d1dc; cursor:default; text-align:center; }

/* [GIU_CHO_V3] Dòng gom các mốc giờ đã đá xong (điện thoại) + băng tin giờ hiện tại */
.dong-daqua { font-size:.78rem; color:#9aa6b4; margin:0 0 6px; line-height:1.5; }
.bang-tin-gio { background:#fff8e6; border:1px solid #ffe0a3; color:#7a5a10;
  border-radius:10px; padding:9px 12px; margin:10px 0; font-size:.88rem; }
.bang-tin-gio a { color:#0b7a3b; font-weight:600; white-space:nowrap; }

/* [GIU_CHO_V3] Dải chọn nhanh 7 ngày */
.dai-ngay { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 8px; margin:8px 0 2px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.dai-ngay::-webkit-scrollbar { display:none; }
.vien-ngay { flex:0 0 auto; min-width:72px; text-align:center; text-decoration:none;
  background:#fff; border:1.5px solid #dfe6ee; border-radius:12px; padding:8px 10px; color:#4a5568; }
.vien-ngay b { display:block; font-size:.84rem; font-weight:700; }
.vien-ngay span { display:block; font-size:.74rem; color:#94a3b8; margin-top:2px; }
.vien-ngay.on { background:var(--xanh,#0b7a3b); border-color:var(--xanh,#0b7a3b); color:#fff; }
.vien-ngay.on span { color:rgba(255,255,255,.85); }

/* [HD_SEPAY_V1] Trang hướng dẫn bật tự động chốt lịch */
.hd-check { display:flex; flex-direction:column; gap:7px; }
.hd-check > div { font-size:.9rem; padding:8px 11px; border-radius:9px; line-height:1.5; }
.hd-check > div small { display:block; font-size:.78rem; opacity:.85; margin-top:2px; }
.hd-check > div small a { font-weight:600; }
.hd-check .xong { background:#eaf7ef; color:#12703c; border:1px solid #bfe6cd; }
.hd-check .chua { background:#fff8e6; color:#8a6100; border:1px solid #ffe0a3; }
.hd-check .chua small a { color:#8a6100; }

.hd-hop-url { background:#0f2a1c; border-radius:14px; padding:14px 15px; margin:16px 0; }
.hd-hop-url .nhan { color:#a8e6c1; font-size:.86rem; font-weight:600; margin-bottom:9px; }
.hd-hop-url .hang { display:flex; gap:8px; align-items:stretch; }
.hd-hop-url input { flex:1; min-width:0; border:none; border-radius:9px; padding:11px 12px;
  font-size:.86rem; font-family:ui-monospace,Menlo,Consolas,monospace; background:#fff; color:#123; }
.hd-hop-url .btn-chinh { width:auto; max-width:none; flex:0 0 auto; padding:11px 18px; margin:0; font-size:.88rem; }
.hd-hop-url .ghi-chu { color:#9fb8ab; font-size:.78rem; margin-top:8px; line-height:1.6; }

.hd-buoc { margin:18px 0; }
.hd-buoc .b { display:flex; gap:13px; align-items:flex-start; background:var(--trang,#fff);
  border:1px solid var(--vien,#e6ebf1); border-radius:13px; padding:15px 16px; margin-bottom:11px; }
.hd-buoc .so { flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--xanh,#0b7a3b); color:#fff; font-weight:700; font-size:1rem;
  display:flex; align-items:center; justify-content:center; }
.hd-buoc h4 { margin:2px 0 7px; font-size:1rem; color:var(--chu,#1f2d3d); }
.hd-buoc p { margin:0 0 7px; font-size:.9rem; line-height:1.75; color:var(--chu,#37475a); }
.hd-buoc p:last-child { margin-bottom:0; }
.hd-buoc .mach { background:#f2f7ff; border-left:3px solid #7fb2ff; border-radius:0 8px 8px 0;
  padding:8px 11px; font-size:.84rem; color:#31506f; }
.hd-buoc .canh { background:#fff5f5; border-left:3px solid #ff9d9d; border-radius:0 8px 8px 0;
  padding:8px 11px; font-size:.84rem; color:#8a3535; }

.hd-hoi p { font-size:.9rem; line-height:1.8; margin:0 0 11px; color:var(--chu,#37475a);
  padding-bottom:11px; border-bottom:1px dashed var(--vien,#e6ebf1); }
.hd-hoi p:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }

/* [HD_SEPAY_V1] Lời nhắc bật tự động chốt ở trang chính */
.nhac-tudong { display:block; margin-top:11px; background:#fff8e6; border:1px solid #ffe0a3;
  border-radius:10px; padding:10px 12px; font-size:.85rem; color:#7a5a10;
  text-decoration:none; line-height:1.6; }
.nhac-tudong b { color:#8a6100; }
@media (max-width: 520px) {
  .hd-hop-url .hang { flex-direction:column; }
  .hd-hop-url input { font-size:.74rem; padding:10px; }
  .hd-hop-url .btn-chinh { width:100%; }
}

/* ===== [CHO_DUYET_V1] Nhiều khách cùng đăng ký 1 khung giờ ===== */

/* Chip thống kê "khách chờ bạn duyệt" */
.stat-chip.cho { background:#fffbeb; border-color:#fcd34d; }
.stat-chip.cho b { color:#b45309; }

/* Dòng nhắc chủ sân ngay dưới thanh thống kê */
.nhac-duyet {
  background:#fffbeb; border:1px solid #fcd34d; border-left:4px solid #f59e0b;
  border-radius:10px; padding:11px 14px; margin-bottom:14px;
  font-size:.86rem; color:#78350f; line-height:1.65;
}

/* Ô vàng trong lưới chủ sân — có người chờ duyệt */
.o-cho-duyet {
  cursor:pointer; background:#fef3c7; border-left:4px solid #f59e0b !important;
  padding:7px 9px; vertical-align:top; transition:background .12s;
}
.o-cho-duyet:hover { background:#fde68a; }
.o-cho-duyet b { display:block; font-size:.82rem; color:#78350f; line-height:1.35; }
.o-cho-duyet span { display:block; font-size:.73rem; color:#92400e; line-height:1.45; }

/* Bảng duyệt: từng khách một dòng, có nút Duyệt / Bỏ */
.hang-cho {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  border:1px solid var(--vien); border-radius:11px; padding:11px 13px; margin-bottom:9px; background:#fcfdfe;
}
.hang-cho .tt { flex:1 1 190px; min-width:0; }
.hang-cho .tt b { font-size:.98rem; color:var(--navy); }
.hang-cho .tt .goi { font-size:.85rem; color:var(--xanh); text-decoration:none; font-weight:600; white-space:nowrap; }
.hang-cho .tt span { display:block; font-size:.79rem; color:var(--chu-nhat); margin-top:2px; }
.hang-cho .nut { display:flex; gap:7px; align-items:center; }
.hang-cho .nut form { margin:0; }
.hang-cho .nut .btn-chinh { width:auto; padding:9px 16px; margin:0; font-size:.88rem; }
.hang-cho .nut .nut-huy { padding:9px 13px; font-size:.85rem; }

/* Trang khách: ô giờ đang có người chờ duyệt (vẫn bấm đặt được) */
.o-dat-duoc.co-cho {
  background:#fffbeb; color:#b45309 !important; font-size:.74rem; font-weight:700;
  box-shadow:inset 0 0 0 1.5px #fcd34d;
}
.o-dat-duoc.co-cho:hover { background:#fde68a; color:#78350f !important; }
.chip-gio.chip-cho { background:#fffbeb; border-color:#fcd34d; color:#b45309; }
.chip-gio.chip-cho i { font-style:normal; font-size:.72rem; margin-left:4px; opacity:.9; }

/* ----- [LUAT_TRA_TRUOC_V1] Hộp nói luật ở đầu trang đặt sân (bản 42) -----
   Cố ý làm đậm và nằm ngay trên dải chọn ngày, vì khách lướt điện thoại
   thường chỉ đọc đúng khúc đầu trang rồi bấm luôn vào giờ. Nói sau khi
   khách bấm là muộn — khách đã tưởng mình giữ được sân rồi. */
.luat-truoc {
  background:#fff7ed; border:1px solid #fdba74; border-left:5px solid #f97316;
  border-radius:11px; padding:12px 15px; margin:2px 0 14px;
  color:#7c2d12; line-height:1.65;
}
.luat-truoc .lt-dau { font-weight:700; font-size:.97rem; margin-bottom:3px; }
.luat-truoc .lt-than { font-size:.86rem; }
.luat-truoc b { color:#9a3412; }
@media (max-width: 560px) {
  .luat-truoc { padding:11px 13px; }
  .luat-truoc .lt-dau { font-size:.92rem; }
  .luat-truoc .lt-than { font-size:.81rem; }
}

/* [LUAT_TRA_TRUOC_V1] Dòng nhắc trên từng lượt đang chờ duyệt ở "Lượt đặt của tôi" */
.nhac-chua-chac {
  background:#fffbeb; border:1px dashed #fcd34d; border-radius:8px;
  padding:7px 10px; margin:6px 0 2px;
  font-size:.79rem; color:#78350f; line-height:1.55;
}

/* Hộp cảnh báo "đang có N người cùng đăng ký" */
.canh-tranh {
  background:#fffbeb; border:1px solid #fcd34d; border-left:4px solid #f59e0b;
  border-radius:10px; padding:11px 13px; margin-bottom:14px;
  font-size:.85rem; color:#78350f; line-height:1.6;
}

/* [RIENG_TU_V1] Dòng thông báo dữ liệu cá nhân */
.ghi-chu-rieng-tu {
  font-size:.74rem; color:var(--chu-nhat); line-height:1.55;
  margin:12px 0 0; padding-top:10px; border-top:1px dashed var(--vien);
}

/* [KHOA_TAM_V1] Tính năng chưa mở */
.khoa-tam {
  background:#f3f4f6; border:1px solid #d1d5db; border-radius:10px;
  padding:11px 13px; margin-top:8px; font-size:.82rem; color:#4b5563; line-height:1.65;
}
.khoa-tam b { color:#374151; }
.nhan-chua-mo {
  display:inline-block; background:#e5e7eb; color:#4b5563; font-size:.7rem; font-weight:700;
  padding:2px 9px; border-radius:999px; margin-left:6px; vertical-align:middle; letter-spacing:.2px;
}

/* [KHOA_TAM_V1] Ô cài đặt bị tạm khóa (SePay tự động chốt) */
.form-row.khoa-tam { padding:12px 13px; margin-top:6px; }
.form-row.khoa-tam label { color:#4b5563; }
.khoa-tam input[disabled] {
  background:#eceff3; color:#9aa3af; cursor:not-allowed;
}
.khoa-tam a { color:#2563eb; }
.page-title .nhan-chua-mo { font-size:.5em; vertical-align:middle; }

/* ============ [KEO_GHEP_V1] Khu "Đang tìm đội đá chung" ============ */
.khu-keo {
  background:linear-gradient(180deg,#f0fdf4 0%,#ffffff 100%);
  border:1.5px solid #86efac; border-radius:14px;
  padding:14px 15px 15px; margin:0 0 16px;
}
.khu-keo .tieu-de { font-weight:700; font-size:1rem; color:#166534; margin-bottom:4px; }
.khu-keo .mo-ta { margin:0 0 11px; font-size:.82rem; color:#4b5563; line-height:1.65; }
.khu-keo .ds-keo { display:flex; flex-direction:column; gap:9px; }
.the-keo {
  display:flex; align-items:center; gap:11px;
  background:#fff; border:1.5px solid #d1fae5; border-radius:11px; padding:10px 12px;
}
.the-keo.chua-duyet { border-color:#fcd34d; background:#fffbeb; }
.the-keo .gio {
  flex:0 0 auto; font-weight:700; font-size:.95rem; color:#166534;
  background:#dcfce7; border-radius:8px; padding:8px 10px; text-align:center; line-height:1.25;
}
.the-keo.chua-duyet .gio { color:#92400e; background:#fef3c7; }
.the-keo .noi-dung { flex:1 1 auto; min-width:0; font-size:.9rem; color:var(--chu); line-height:1.45; }
.the-keo .noi-dung b { color:var(--chu-dam,#1f2937); }
.the-keo .noi-dung span { display:block; font-size:.76rem; color:var(--chu-nhat); margin-top:2px; }
.the-keo .noi-dung i { font-style:normal; color:#b45309; font-weight:600; }
.the-keo .noi-dung i.chac { color:#12a150; }
.btn-keo {
  flex:0 0 auto; border:0; border-radius:9px; cursor:pointer;
  background:#12a150; color:#fff; font-weight:700; font-size:.83rem;
  padding:10px 13px; font-family:inherit;
}
.btn-keo:hover { background:#0e8442; }
@media (max-width:560px) {
  .the-keo { flex-wrap:wrap; }
  .the-keo .noi-dung { flex:1 1 60%; }
  .btn-keo { flex:1 1 100%; padding:11px; }
}

/* ===== [HIEN_HET_V1] Danh sách ĐẦY ĐỦ khách chờ duyệt (dưới lưới lịch) ===== */
.khu-cho-duyet {
  margin: 18px auto 0; max-width: 900px;
  background: linear-gradient(180deg,#fffbeb,#fff8e1);
  border: 1.5px solid #fcd34d; border-radius: 14px; padding: 15px 16px 17px;
}
.khu-cho-duyet .tieu-de { font-family:'Noto Serif',serif; font-weight:700; font-size:1.06rem; color:#92400e; }
.khu-cho-duyet .mo-ta { margin:6px 0 12px; font-size:.85rem; color:#7c5a17; line-height:1.55; }
.khu-cho-duyet .nhom-gio {
  margin: 12px 0 6px; padding: 5px 10px; border-radius: 8px;
  background: #fef3c7; color: #78350f; font-size: .84rem; font-weight: 700;
}
.khu-cho-duyet .nhom-gio i { font-weight:600; font-style:normal; color:#b45309; margin-left:6px; }
.hang-cho-day {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #fde68a; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 7px;
}
.hang-cho-day .tt { flex: 1 1 200px; min-width: 0; }
.hang-cho-day .tt b { font-size:.98rem; color:var(--navy); }
.hang-cho-day .tt .goi { font-size:.85rem; color:var(--xanh); text-decoration:none; font-weight:600; white-space:nowrap; margin-left:6px; }
.hang-cho-day .tt span { display:block; font-size:.79rem; color:var(--chu-nhat); margin-top:2px; }
.hang-cho-day .nut { display:flex; gap:7px; align-items:center; }
.hang-cho-day .nut form { margin:0; }
.hang-cho-day .nut .btn-chinh { width:auto; padding:9px 16px; margin:0; font-size:.88rem; }
.hang-cho-day .nut .nut-huy { padding:9px 13px; font-size:.85rem; }
@media (max-width: 560px) {
  .hang-cho-day { flex-direction: column; align-items: stretch; }
  /* [VIEC_CHO_V1] Xếp dọc rồi thì 200px của "flex: 1 1 200px" biến thành
     CHIỀU CAO — mỗi khách chiếm gần hết màn hình điện thoại, phải kéo mỏi
     tay mới thấy người thứ hai. Ép về đúng chiều cao chữ. */
  .hang-cho-day .tt { flex: 0 0 auto; }
  .hang-cho-day .nut { justify-content: flex-end; }
}

/* ============================================================
   [TK_KHACH_V1] TÀI KHOẢN KHÁCH — trang "Lượt đặt của tôi" (bản 32)
   ============================================================ */
.tieu-de-nho {
  font-family: 'Noto Serif', Georgia, serif; font-size: 1.02rem; color: var(--navy);
  margin: 0 0 10px; padding-bottom: 7px; border-bottom: 2px solid var(--vien);
}
.the-luot {
  background: var(--trang); border: 1px solid var(--vien); border-left: 4px solid var(--chu-nhat);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--bong);
}
.the-luot.cho  { border-left-color: #f59e0b; }
.the-luot.ok   { border-left-color: #16a34a; }
.the-luot.xong { border-left-color: var(--chu-nhat); }
.the-luot.huy  { border-left-color: #dc2626; }
.the-luot.mo-nhat { opacity: .72; box-shadow: none; }
.the-luot .dong-1 {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
}
.the-luot .dong-1 b { font-size: 1.02rem; color: var(--navy); }
.the-luot .dong-2 { font-size: .87rem; color: var(--chu-nhat); margin-top: 3px; }
.the-luot .dong-3 { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nhan-tt {
  font-size: .79rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap;
  background: #f1f5f9; color: var(--chu);
}
.nhan-tt.cho  { background: #fef3c7; color: #92400e; }
.nhan-tt.ok   { background: #dcfce7; color: #166534; }
.nhan-tt.xong { background: #eef2f7; color: #475569; }
.nhan-tt.huy  { background: #fee2e2; color: #991b1b; }
.nut-nho {
  display: inline-block; font-size: .86rem; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 9px; text-decoration: none;
  border: 1.4px solid var(--xanh); background: #fff; color: var(--xanh);
  font-family: inherit;
}
.nut-nho:hover { background: #eaf6ff; }
.nut-nho.huy { border-color: #ef9a9a; color: #c62828; }
.nut-nho.huy:hover { background: #ffebee; }

/* [TK_KHACH_V1] Nhắc khách vãng lai đã hết lượt → mời tạo tài khoản */
.nhac-tao-tk {
  max-width: 900px; margin: 0 auto 16px;
  background: linear-gradient(180deg,#eff6ff,#e0f2fe);
  border: 1.5px solid #7dd3fc; border-radius: 14px; padding: 13px 16px;
  font-size: .9rem; color: #0c4a6e; line-height: 1.6;
}
.nhac-tao-tk a { color: var(--xanh-dam); font-weight: 700; }

/* [TK_KHACH_V1] Trang chủ sân quản lý khách hàng (khachhang.php) */
.hang-khach {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  background: var(--trang); border: 1px solid var(--vien); border-left: 4px solid #16a34a;
  border-radius: 12px; padding: 12px 15px; margin-bottom: 9px; box-shadow: var(--bong);
}
.hang-khach.cho  { border-left-color: #f59e0b; background: #fffdf5; }
.hang-khach.khoa { border-left-color: #cbd5e1; opacity: .8; }
.hang-khach .tt { flex: 1 1 240px; min-width: 0; }
.hang-khach .tt b { font-size: .99rem; color: var(--navy); }
.hang-khach .tt .goi {
  font-size: .86rem; color: var(--xanh); text-decoration: none;
  font-weight: 600; white-space: nowrap; margin-left: 7px;
}
.hang-khach .tt span { display: block; font-size: .79rem; color: var(--chu-nhat); margin-top: 3px; }
.hang-khach .nut { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.hang-khach .nut form { margin: 0; }
.hang-khach .nut .btn-chinh { width: auto; padding: 9px 16px; margin: 0; font-size: .88rem; }
.hang-khach .nut .nut-huy { padding: 9px 14px; font-size: .85rem; }
@media (max-width: 560px) {
  .hang-khach { flex-direction: column; align-items: stretch; }
  .hang-khach .tt { flex: 0 0 auto; }   /* không cho ô chữ giãn ra tạo khoảng trống */
  .hang-khach .nut { justify-content: flex-end; }
}

/* [TK_KHACH_V1] Khung chủ sân tự tạo tài khoản cho khách quen */
.khu-tao-tk {
  background: linear-gradient(180deg, #f8fbff, #eef6ff);
  border: 1.5px solid #bfdbfe; border-radius: 14px;
  padding: 16px 18px; margin-top: 26px;
}
.khu-tao-tk .tieu-de {
  font-family: 'Noto Serif', Georgia, serif; font-size: 1.02rem;
  color: var(--navy); font-weight: 700; margin-bottom: 6px;
}
.khu-tao-tk .mo-ta { font-size: .87rem; color: var(--chu-nhat); line-height: 1.6; margin: 0 0 12px; }
.khu-tao-tk .form-row { margin-bottom: 12px; }

/* [TK_KHACH_V1] Ô mật khẩu vừa tạo — hiện đúng một lần để chép gửi khách */
.the-mk-moi {
  background: #fffbeb; border: 2px solid #fbbf24; border-radius: 14px;
  padding: 15px 17px; margin-bottom: 18px;
}
.the-mk-moi .tieu-de {
  font-family: 'Noto Serif', Georgia, serif; font-size: 1rem;
  color: #92400e; font-weight: 700; margin-bottom: 9px;
}
.the-mk-moi textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: .92rem;
  line-height: 1.55; color: var(--chu); background: #fff;
  border: 1px solid #fcd34d; border-radius: 10px; padding: 10px 12px; resize: vertical;
}
/* [CAP_MK_CHAC_V1] Bản 43 — dòng ghi chú nhỏ trong ô lời nhắn */
.the-mk-moi .mk-ghi-chu {
  margin: 0 0 8px; font-size: .85rem; color: #92400e; line-height: 1.6;
}
.the-mk-moi .mk-ghi-chu.thong {
  background: #f0fdf4; border: 1px solid #86efac; border-radius: 9px;
  padding: 8px 11px; color: #15803d;
}

/* ----- [CAP_MK_CHAC_V1] Ô báo "cấp mật khẩu rồi mà họ vẫn chưa vô được" -----
   Cố ý đỏ và nằm TRÊN ô lời nhắn: admin đọc từ trên xuống, gặp ô này trước
   thì chưa vội bấm nút chép. Gửi tin xong mới biết là muộn. */
.mk-vuong {
  background: #fef2f2; border: 2px solid #f87171; border-left: 6px solid #dc2626;
  border-radius: 14px; padding: 15px 17px; margin-bottom: 14px; color: #7f1d1d;
}
.mk-vuong .tieu-de {
  font-family: 'Noto Serif', Georgia, serif; font-size: 1rem;
  color: #991b1b; font-weight: 700; margin-bottom: 8px;
}
.mk-vuong p { margin: 0 0 9px; font-size: .89rem; line-height: 1.65; }
.mk-vuong .ly-do {
  background: #fff; border: 1px dashed #fca5a5; border-radius: 9px;
  padding: 9px 12px; font-size: .88rem;
}
.mk-vuong .hau { margin: 9px 0 0; font-size: .84rem; color: #9f1239; }
.mk-vuong form { margin: 0; }

/* [CAP_MK_CHAC_V1] Mấy dòng gỡ rối ở trang đăng nhập khi gõ sai mật khẩu */
.meo-dang-nhap {
  background: #eff6ff; border: 1px solid #bfdbfe; border-left: 4px solid #3b82f6;
  border-radius: 10px; padding: 11px 13px; margin-bottom: 14px;
  font-size: .84rem; color: #1e3a8a; line-height: 1.65;
}
.meo-dang-nhap b { color: #1d4ed8; }

/* [TK_KHACH_V1] Thanh đầu trang của KHÁCH — điện thoại hẹp thì rút gọn chữ */
/* Mỗi mục trên thanh đầu trang không được đứt giữa chừng, nhưng cả thanh
   thì được phép xuống hàng khi màn hình quá hẹp. */
.site-header { flex-wrap: wrap; }
.site-header .user-box { flex-wrap: wrap; justify-content: flex-end; }
.site-header .user-box > * { white-space: nowrap; }
.site-header .brand b { white-space: nowrap; }
.site-header .user-box .gach { opacity: .55; }
.site-header .user-box .chu-ngan { display: none; }
@media (max-width: 700px) {
  .site-header { gap: 4px 6px; }
  .site-header .brand b { font-size: .95rem; letter-spacing: .4px; }
  .site-header .user-box { gap: 2px; font-size: .78rem; }
  .site-header .user-box a { padding: 6px 7px; }
  .site-header .user-box .an-dt { display: none; }   /* giấu tên khách cho gọn */
  .site-header .user-box .chu-day { display: none; }
  .site-header .user-box .chu-ngan { display: inline; }
}

/* ===== [DUYET_CHU_V1] Màn hình chờ admin duyệt / tạm ngưng (bản 33) ===== */
.the-cho-duyet { text-align: center; max-width: 460px; }
.the-cho-duyet .hinh-lon { font-size: 3.2rem; line-height: 1; margin-bottom: 10px; }
.the-cho-duyet h2 { margin-bottom: 14px; }
.the-cho-duyet .loi-nhan {
  font-size: .93rem; color: var(--chu-nhat); line-height: 1.65;
  margin-bottom: 12px; text-align: left;
}
.the-cho-duyet .loi-nhan b { color: var(--navy); }
.the-cho-duyet .auth-alt { margin-top: 16px; }
.o-lien-he {
  margin: 18px 0 4px; padding: 14px 12px; border-radius: 12px;
  background: #f0f7ff; border: 1.5px solid #cfe6fb;
}
.o-lien-he .nhan { font-size: .78rem; font-weight: 600; color: var(--chu-nhat); margin-bottom: 4px; }
.o-lien-he .so {
  display: inline-block; font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.45rem; font-weight: 700; color: var(--xanh);
  text-decoration: none; letter-spacing: .5px;
}
.o-lien-he .so:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .the-cho-duyet .hinh-lon { font-size: 2.7rem; }
  .o-lien-he .so { font-size: 1.3rem; }
}

/* ===== [QR_ZALO_V1] Ô khai số Zalo + xem trước mã QR (bản 34) ===== */
.o-zalo {
  display: flex; gap: 16px; align-items: flex-start;
  margin: 0 0 14px; padding: 14px 14px 12px;
  border-radius: 12px; background: #f0f8ff; border: 1.5px solid #cfe6fb;
}
.o-zalo-trai { flex: 1; min-width: 0; }
.o-zalo .goi-y { font-size: .8rem; color: var(--chu-nhat); line-height: 1.6; }
.o-zalo .goi-y b { color: var(--navy); }
.o-zalo-qr { flex: 0 0 118px; text-align: center; }
.o-zalo-qr .qr-khung {
  width: 118px; height: 118px; padding: 6px; background: #fff;
  border-radius: 10px; border: 1.5px solid var(--vien); box-sizing: border-box;
}
.o-zalo-qr .qr-khung svg { width: 100%; height: 100%; display: block; }
.o-zalo-qr .qr-nhan { font-size: .72rem; color: var(--chu-nhat); margin-top: 5px; }

/* ===== [QR_ZALO_V1] Khối liên hệ chủ sân trên trang đặt sân ===== */
.khoi-lienhe {
  display: flex; gap: 16px; align-items: center;
  margin: 0 0 18px; padding: 14px; border-radius: var(--bo);
  background: var(--trang); border: 1.5px solid var(--vien); box-shadow: var(--bong);
}
.khoi-lienhe .lh-trai { flex: 1; min-width: 0; }
.khoi-lienhe .lh-tieu { font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.khoi-lienhe .lh-phu { font-size: .82rem; color: var(--chu-nhat); line-height: 1.55; margin-bottom: 10px; }
.khoi-lienhe .lh-nut { display: flex; gap: 8px; flex-wrap: wrap; }
.khoi-lienhe .lh-nut a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 999px; font-size: .88rem; font-weight: 600;
  text-decoration: none; border: 1.5px solid transparent;
}
.khoi-lienhe .nut-goi { background: var(--xanh); color: #fff; }
.khoi-lienhe .nut-goi:hover { background: var(--xanh-dam); }
.khoi-lienhe .nut-zalo { background: #eaf4ff; color: #0068ff; border-color: #b9dbff; }
.khoi-lienhe .nut-zalo:hover { background: #d8ebff; }
.khoi-lienhe .lh-qr { flex: 0 0 112px; text-align: center; }
.khoi-lienhe .lh-qr .qr-khung {
  width: 112px; height: 112px; padding: 6px; background: #fff;
  border-radius: 10px; border: 1.5px solid var(--vien); box-sizing: border-box;
}
.khoi-lienhe .lh-qr .qr-khung svg { width: 100%; height: 100%; display: block; }
.khoi-lienhe .lh-qr .qr-nhan { font-size: .7rem; color: var(--chu-nhat); margin-top: 5px; line-height: 1.4; }

/* ----- [LIEN_HE_THEM_V1] Thẻ người liên hệ thêm (bản 40) -----
   Thầy dạy, người trực sân, chị thu tiền... Mỗi người một thẻ nhỏ,
   trên điện thoại chạm vào là gọi luôn. Cố ý làm thẻ CAO 34px trở lên
   để ngón tay bấm không bị trượt sang thẻ bên cạnh. */
.lh-them { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.lh-them .lh-the {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f0f7ff; border: 1px solid #cfe4fb; border-radius: 999px;
  padding: 6px 13px; font-size: .84rem; color: #0f2540;
  text-decoration: none; line-height: 1.4; min-height: 34px;
  transition: background .12s, border-color .12s;
}
.lh-them a.lh-the:hover { background: #dceeff; border-color: #9fccf6; }
.lh-them .lh-the b { font-weight: 700; }
.lh-them .lh-the span { color: #0068ff; font-weight: 600; letter-spacing: .01em; }
/* Dòng nào chủ sân gõ mà không có số thì hiện chữ suông, màu nhạt hơn */
.lh-them .lh-chu { background: #f5f6f8; border-color: #e0e5ec; color: var(--chu-nhat); }
/* Khi nằm trong khối "Liên hệ chủ sân" thì cách nút Gọi/Zalo ra một chút */
.lh-them-trong { margin-top: 10px; }

/* Trên điện thoại thu nhỏ lại cho 2 thẻ nằm vừa một hàng — khai 4–5 người
   mà thẻ nào cũng chiếm trọn một dòng thì đẩy lưới lịch xuống quá sâu. */
@media (max-width: 560px) {
  .lh-them { gap: 6px; margin-top: 7px; }
  .lh-them .lh-the { padding: 5px 10px; font-size: .78rem; gap: 4px; }
}

@media (max-width: 700px) {
  .o-zalo { flex-direction: column; align-items: center; }
  .o-zalo-trai { width: 100%; }
  .khoi-lienhe { flex-direction: column; align-items: stretch; text-align: center; }
  .khoi-lienhe .lh-nut { justify-content: center; }
  .khoi-lienhe .lh-qr { flex: none; }
  .khoi-lienhe .lh-qr .qr-khung { margin: 0 auto; }
  .khoi-lienhe .lh-them { justify-content: center; }
}

/* ===== [GIA_KHUNG_V1] Khu giá theo khung giờ (bản 34) ===== */
.hang-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 11px; }
.lien-nho {
  font-size: .78rem; font-weight: 500; color: var(--xanh);
  text-decoration: none; margin-left: 6px;
}
.lien-nho:hover { text-decoration: underline; }
.form-them-gia {
  border: 1px dashed var(--vien); border-radius: 12px;
  padding: 14px 15px 16px; background: #fbfdff;
}
#khuGia.nhap-nhay {
  box-shadow: 0 0 0 3px #ffd76a;
  transition: box-shadow .25s;
}
@media (max-width: 700px) {
  .hang-3 { grid-template-columns: 1fr; }
}

/* ===== [GIA_KHUNG_V1] Bảng giá khách xem trước khi đặt (bản 34) ===== */
.khoi-gia {
  background: #fff; border: 1px solid var(--vien); border-radius: 14px;
  padding: 0; margin-bottom: 16px; box-shadow: var(--bong);
}
.khoi-gia > summary {
  list-style: none; cursor: pointer; padding: 14px 16px;
  font-size: .95rem; color: var(--chu); user-select: none;
}
.khoi-gia > summary::-webkit-details-marker { display: none; }
.khoi-gia > summary b { color: var(--navy); }
.khoi-gia > summary .mo-them { font-size: .8rem; color: var(--chu-nhat); }
.khoi-gia[open] > summary { border-bottom: 1px solid var(--vien); }
.khoi-gia[open] > summary .mo-them { visibility: hidden; }
.bang-gia-khach { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bang-gia-khach th {
  background: #f4f8fc; color: var(--chu-nhat); font-weight: 600;
  font-size: .8rem; padding: 8px 12px; text-align: center; white-space: nowrap;
}
.bang-gia-khach td { padding: 9px 12px; border-top: 1px solid var(--vien); }
.bang-gia-khach td small { display: block; color: var(--chu-nhat); font-size: .76rem; }
.bang-gia-khach .dong-san td { border-top: 2px solid #dce6f0; }
.bang-gia-khach .gia { text-align: right; white-space: nowrap; font-weight: 600; }
.bang-gia-khach .gia.noi-bat { color: var(--xanh); }
.khoi-gia .ghi-chu-gia {
  font-size: .8rem; color: var(--chu-nhat); margin: 0; padding: 10px 16px 14px;
}

/* ===== [HD_CHU_V1] Trang Hướng dẫn sử dụng cho chủ sân (bản 34) ===== */
.hd-khoi-qr {
  display: flex; gap: 18px; align-items: center;
  background: #0f2a1c; border-radius: 14px; padding: 15px 16px; margin: 16px 0;
}
.hd-khoi-qr .trai { flex: 1; min-width: 0; }
.hd-khoi-qr .nhan { color: #a8e6c1; font-size: .86rem; font-weight: 600; margin-bottom: 9px; }
.hd-khoi-qr p { color: #cfe6d8; font-size: .86rem; line-height: 1.7; margin: 0 0 10px; }
.hd-khoi-qr p b { color: #fff; }
.hd-khoi-qr .hang { display: flex; gap: 8px; align-items: stretch; }
.hd-khoi-qr input {
  flex: 1; min-width: 0; border: none; border-radius: 9px; padding: 11px 12px;
  font-size: .86rem; font-family: ui-monospace, Menlo, Consolas, monospace;
  background: #fff; color: #123;
}
.hd-khoi-qr .btn-chinh {
  width: auto; max-width: none; flex: 0 0 auto; padding: 11px 18px; margin: 0; font-size: .88rem;
}
.hd-khoi-qr .mach { color: #9fb8ab; font-size: .79rem; margin: 9px 0 0; }
.hd-khoi-qr .mach b { color: #cfe6d8; }
.hd-khoi-qr .phai { flex: 0 0 132px; text-align: center; }
.hd-khoi-qr .qr-khung { background: #fff; padding: 7px; border-radius: 10px; }
.hd-khoi-qr .qr-khung svg { display: block; width: 100%; height: auto; }
.hd-khoi-qr .qr-nhan { color: #a8e6c1; font-size: .74rem; margin-top: 6px; line-height: 1.4; }

.hd-buoc h4 i.da-xong, .hd-buoc h4 i.dang-cho {
  font-style: normal; font-size: .76rem; font-weight: 600;
  padding: 2px 8px; border-radius: 20px; margin-left: 6px; white-space: nowrap;
}
.hd-buoc h4 i.da-xong { background: #eaf7ef; color: #12703c; border: 1px solid #bfe6cd; }
.hd-buoc h4 i.dang-cho { background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; }

.hd-hoi details {
  background: #fff; border: 1px solid var(--vien, #e6ebf1);
  border-radius: 12px; margin-bottom: 9px; overflow: hidden;
}
.hd-hoi details > summary {
  list-style: none; cursor: pointer; padding: 13px 15px;
  font-size: .92rem; font-weight: 500; color: var(--navy, #0f2540); user-select: none;
}
.hd-hoi details > summary::-webkit-details-marker { display: none; }
.hd-hoi details > summary::before { content: '▸ '; color: var(--xanh, #0b7a3b); font-weight: 700; }
.hd-hoi details[open] > summary::before { content: '▾ '; }
.hd-hoi details[open] > summary { border-bottom: 1px solid var(--vien, #e6ebf1); }
.hd-hoi details p {
  padding: 12px 15px; margin: 0; border-bottom: none;
}
@media (max-width: 640px) {
  .hd-khoi-qr { flex-direction: column; align-items: stretch; }
  .hd-khoi-qr .hang { flex-direction: column; }
  .hd-khoi-qr .btn-chinh { width: 100%; }
  .hd-khoi-qr .phai { flex: none; max-width: 160px; margin: 0 auto; }
}

/* ===== [GIA_NHANH_V1] Bản 35: sửa khung giá cho nhanh tay ===== */
/* Ô sửa giá ngay trên bảng */
.o-sua-nhanh { display: flex; align-items: center; gap: 5px; justify-content: center; }
.o-gia-nho {
  width: 108px; padding: 6px 8px; text-align: right;
  border: 1.5px solid var(--vien); border-radius: 9px;
  font-size: .9rem; font-weight: 700; color: var(--xanh);
  background: #fbfdff; font-family: inherit;
}
.o-gia-nho:focus { outline: none; border-color: var(--xanh); background: #fff; }
.o-sua-nhanh .dvi-tien { font-size: .85rem; font-weight: 700; color: var(--xanh); }
.nut-luu-gia {
  border: none; background: #e6f6ff; color: var(--xanh-dam);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: .9rem;
}
.nut-luu-gia:hover { background: #cfeeff; }
/* Nút ✏️ / 📋 ở cột thao tác */
.nut-nho-gia {
  border: none; background: #eef2f7; color: var(--chu);
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: .82rem;
  margin-right: 3px; vertical-align: middle;
}
.nut-nho-gia:hover { background: #dde5ef; }
/* Dòng đang được sửa */
.bang-khung-gia tr.dong-dang-sua { background: #fff8e1 !important; }
/* Đầu form: cho biết đang Thêm hay đang Sửa */
.dau-form-gia {
  font-size: .92rem; font-weight: 700; color: var(--navy);
  margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px dashed var(--vien);
}
.form-them-gia.dang-sua { border-color: #f4b400; background: #fffdf6; }
.form-them-gia.dang-sua .dau-form-gia { color: #9a6b00; }
#formGia.nhap-nhay { box-shadow: 0 0 0 3px #ffd76a; transition: box-shadow .25s; }
/* Chip khung giờ bấm nhanh */
.chip-gio { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-gio .chip {
  border: 1.5px solid var(--vien); background: #fff; color: var(--chu);
  border-radius: 999px; padding: 6px 13px; font-size: .82rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .12s;
}
.chip-gio .chip:hover { border-color: var(--xanh); color: var(--xanh-dam); background: #f2faff; }
.hang-nut-gia { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lien-huy-gia { font-size: .84rem; font-weight: 600; color: var(--chu-nhat); text-decoration: none; cursor: pointer; }
.lien-huy-gia:hover { color: #b3261e; }
@media (max-width: 700px) {
  .o-gia-nho { width: 92px; }
  .chip-gio .chip { padding: 6px 11px; font-size: .78rem; }
}

/* ============================================================
   [NHAM_LOI_V1] Bản 36 — Hộp "bạn là khách hay chủ sân?"
   Rất nhiều khách đi đá bấm nhầm nút Đăng ký ngoài trang chủ rồi
   nằm trong ô chờ duyệt của admin. Hộp xanh này chỉ đường cho họ.
   ============================================================ */
.hop-nham {
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px;
  padding: 14px 16px; margin: 0 0 16px; text-align: left;
}
.hop-nham b { color: #166534; display: block; margin-bottom: 3px; font-size: .95rem; }
.hop-nham span { display: block; color: #3f6b4d; font-size: .87rem; line-height: 1.55; }
.hop-nham .nut-di-dat {
  display: inline-block; margin-top: 10px; background: #16a34a; color: #fff;
  padding: 9px 18px; border-radius: 9px; text-decoration: none;
  font-weight: 600; font-size: .9rem;
}
.hop-nham .nut-di-dat:hover { background: #15803d; }

/* Ô tick "tôi là chủ sân" ở trang đăng ký */
.o-xac-nhan {
  display: flex; gap: 9px; align-items: flex-start; text-align: left;
  background: #fffdf6; border: 1px solid #fde68a; border-radius: 10px;
  padding: 11px 13px; margin: 4px 0 14px; cursor: pointer;
}
.o-xac-nhan input { margin-top: 3px; width: 17px; height: 17px; flex: none; cursor: pointer; }
.o-xac-nhan span { font-size: .87rem; color: #4a5a70; line-height: 1.5; }

/* Nút "không phải chủ sân" ở trang quản trị — cố ý để màu xám nhạt,
   khác hẳn nút đỏ "Từ chối", để admin không bấm nhầm. */
.nut-bo-qua {
  background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1;
  padding: 9px 15px; border-radius: 9px; font-size: .88rem;
  font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.nut-bo-qua:hover { background: #e2e8f0; color: #1e293b; }

/* Chữ đậm trong dòng mô tả của hộp xanh phải nằm cùng dòng, không xuống dòng */
.hop-nham span b { display: inline; margin: 0; font-size: inherit; color: inherit; }

/* ============================================================
   [VIEC_CHO_V1] Bản 37 — KHU "ĐANG CHỜ BẠN DUYỆT" ở đầu trang chính
   + chuông đỏ trên thanh menu + thanh báo khi có khách mới.

   Ý đồ: chủ sân mở phần mềm bằng điện thoại là thấy ngay ai đang chờ,
   không phải đi tìm. Nên khu này để màu cam đậm, đặt trên cùng, chữ to.
   ============================================================ */

/* ----- Chuông trên thanh menu (mọi trang của chủ sân) ----- */
.chuong-cho {
  background: #dc2626 !important; color: #fff !important;
  border-radius: 999px; padding: 5px 12px !important;
  font-weight: 700; white-space: nowrap; text-decoration: none;
  box-shadow: 0 2px 8px rgba(220,38,38,.32);
  animation: chuong-nhay 1.6s ease-in-out 3;
}
.chuong-cho:hover { background: #b91c1c !important; color: #fff !important; }
.chuong-cho b { color: #fff !important; font-weight: 800; }
@keyframes chuong-nhay {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.09); }
}

/* ----- Khu việc đang chờ ----- */
.khu-viec-cho {
  margin: 0 auto 22px; max-width: 900px;
  background: linear-gradient(180deg, #fff7ed, #fffbeb);
  border: 2px solid #f59e0b; border-radius: 16px; padding: 15px 16px 16px;
  box-shadow: 0 4px 18px rgba(245,158,11,.15);
}
.khu-viec-cho .dau { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.khu-viec-cho .dau .so {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: #dc2626; color: #fff;
  font-family: 'Noto Serif', Georgia, serif; font-size: 1.35rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(220,38,38,.3);
}
.khu-viec-cho .dau b {
  display: block; font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.14rem; color: #92400e; line-height: 1.3;
}
.khu-viec-cho .dau span { display: block; font-size: .84rem; color: #b45309; margin-top: 1px; }

.khu-viec-cho .ngay-cho {
  margin: 14px 0 7px; font-size: .92rem; font-weight: 700; color: #78350f;
  border-bottom: 1.5px dashed #fcd34d; padding-bottom: 5px;
}
.khu-viec-cho .khung-cho {
  margin: 9px 0 6px; padding: 5px 10px; border-radius: 8px;
  background: #fef3c7; color: #78350f; font-size: .85rem; font-weight: 700;
}
.khu-viec-cho .khung-cho small { font-weight: 500; opacity: .8; margin-left: 6px; }
.khu-viec-cho .khung-cho i {
  font-style: normal; font-weight: 700; color: #fff; background: #b45309;
  border-radius: 999px; padding: 1px 9px; font-size: .76rem; margin-left: 7px;
  display: inline-block;
}
.khu-viec-cho .ghi-chu-cho {
  margin: 13px 0 0; font-size: .83rem; color: #7c5a17; line-height: 1.55;
}

/* ----- [DA_DUYET_V1] Khu đã duyệt — sắp đá (bản 39) -----
   Cùng khuôn với khu chờ duyệt nhưng màu xanh lá, để chủ sân liếc một cái
   là phân biệt được: cam = việc phải làm, xanh = việc xong rồi. */
.khu-da-duyet {
  margin: 0 auto 22px; max-width: 900px;
  background: linear-gradient(180deg, #f0fdf4, #f7fefa);
  border: 2px solid #22c55e; border-radius: 16px; padding: 15px 16px 16px;
  box-shadow: 0 4px 16px rgba(34,197,94,.13);
}
.khu-da-duyet .dau { display: flex; align-items: center; gap: 13px; margin-bottom: 6px; }
.khu-da-duyet .dau .so {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: #16a34a; color: #fff; font-size: 1.5rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(22,163,74,.28);
}
.khu-da-duyet .dau b {
  display: block; font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.14rem; color: #14532d; line-height: 1.3;
}
.khu-da-duyet .dau span { display: block; font-size: .84rem; color: #15803d; margin-top: 1px; }
.khu-da-duyet .ngay-cho {
  margin: 14px 0 7px; font-size: .92rem; font-weight: 700; color: #14532d;
  border-bottom: 1.5px dashed #86efac; padding-bottom: 5px;
}
/* Dòng khách trong khu này viền xanh, không mượn viền vàng của khu chờ */
.khu-da-duyet .hang-cho-day { border-color: #bbf7d0; }
.khu-da-duyet .hang-cho-day .nut .nut-huy {
  background: #fff; color: #b91c1c; border: 1.5px solid #fecaca;
  box-shadow: none; font-weight: 600;
}
.khu-da-duyet .hang-cho-day .nut .nut-huy:hover { background: #fef2f2; border-color: #f87171; }
.khu-da-duyet .hang-cho-day .tt .gio-da {
  color: #15803d; font-size: .84rem; background: #dcfce7;
  border-radius: 6px; padding: 1px 7px;
}
.khu-da-duyet .ghi-chu-cho { margin: 13px 0 0; font-size: .83rem; color: #15803d; }
.khu-da-duyet .ghi-chu-cho a { color: #15803d; font-weight: 700; }

/* Không còn việc gì — nói cho chủ sân yên tâm, đừng để trống trơn */
.khu-viec-xong {
  margin: 0 auto 20px; max-width: 900px;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px;
  padding: 11px 15px; font-size: .89rem; color: #166534;
}
.khu-viec-xong b { color: #14532d; }

/* ----- Thanh báo "có người mới đăng ký" (nằm đáy màn hình) ----- */
.bang-bao-moi {
  display: none;
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 16px; z-index: 900;
  background: #dc2626; color: #fff;
  padding: 12px 22px; border-radius: 999px; cursor: pointer;
  font-size: .93rem; box-shadow: 0 6px 22px rgba(220,38,38,.4);
  max-width: calc(100vw - 24px); text-align: center;
}
.bang-bao-moi.hien { display: block; }
.bang-bao-moi b { color: #fff; }

@media (max-width: 560px) {
  .khu-viec-cho { border-radius: 13px; padding: 13px 12px 14px; }
  .khu-viec-cho .dau .so { width: 40px; height: 40px; font-size: 1.18rem; }
  .khu-viec-cho .dau b { font-size: 1.04rem; }
  .khu-viec-cho .hang-cho-day .nut .btn-chinh { flex: 1; }
  .khu-da-duyet { border-radius: 13px; padding: 13px 12px 14px; }
  .khu-da-duyet .dau .so { width: 40px; height: 40px; font-size: 1.28rem; }
  .khu-da-duyet .dau b { font-size: 1.04rem; }
  .bang-bao-moi { bottom: 12px; padding: 11px 18px; font-size: .88rem; }
}

/* [TEN_COSO_V1] Tên cơ sở trong danh sách chủ sân ở trang Quản trị —
   cho đậm hơn dòng ngày tháng bên dưới để mắt bắt được ngay. */
.hang-khach .tt .ten-co-so {
  display: block; margin-top: 3px;
  font-size: .85rem; font-weight: 600; color: #166534;
}

/* ============================================================
   [BO_SO_BAN_V1] Bản 44 — GIẤU DÒNG "· bản NN" MỜ MỜ Ở CHÂN TRANG

   Anh Nguyễn: "Bỏ hiện phiên bản mờ mờ dưới cùng". Con số này thêm hồi bản 31
   để biết máy chủ đã nhận bản mới chưa, nhưng khách đi đá thấy nó thì chỉ tổ
   rối mắt. Nay chủ sân xem số bản ở cuối trang Cài đặt là đủ.

   Làm bằng CSS (thay vì đi xóa tay 19 trang) để anh Nguyễn chỉ phải chép vài
   file lên máy chủ. CHÚ Ý cho lần sau: đừng đặt chữ có ý nghĩa vào thẻ <span>
   kèm opacity trong chân trang — nó sẽ bị luật này giấu mất.
   ============================================================ */
.site-footer span[style*="opacity"],
.chu-thich   span[style*="opacity"] { display: none; }

/* Số bản phần mềm ở cuối trang Cài đặt — chỉ chủ sân nhìn thấy */
.so-ban-pm {
  text-align: center; font-size: .78rem; color: var(--chu-nhat);
  margin: 18px 0 0; opacity: .8;
}
.so-ban-pm b { color: var(--chu); }

/* ============================================================
   [TU_HUY_CHO_DUYET_V1] Bản 44 — MẤY DÒNG NÓI VỀ HẠN TỰ HỦY
   ============================================================ */

/* Dòng hạn giờ trong hộp nói luật ở đầu trang đặt sân */
.luat-truoc .lt-han {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed #fdba74;
  font-size: .84rem;
}

/* Câu hạn giờ nối thêm trong hộp "đang có N người cùng đăng ký" */
.canh-tranh .ct-han { display: block; margin-top: 6px; }

/* Đồng hồ đếm ngược ở trang chuyển khoản */
.ct-dem {
  background: #eff6ff; border: 1px solid #bfdbfe; border-left: 4px solid #3b82f6;
  border-radius: 10px; padding: 10px 13px; margin-bottom: 14px;
  font-size: .84rem; color: #1e3a8a; line-height: 1.6;
}
.ct-dem b { color: #1d4ed8; }

/* Đếm ngược trong "Lượt đặt của tôi" */
.nhac-chua-chac .dem-huy { display: block; margin-top: 5px; color: #92400e; }

/* Đếm ngược trên từng khách đang chờ chủ sân duyệt (trang Lịch đặt) */
.hang-cho-day .con-lai {
  display: inline-block; margin-top: 4px; padding: 2px 8px;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px;
  font-size: .74rem; color: #1e40af; white-space: nowrap;
}
.hang-cho-day .con-lai.gap {
  background: #fef2f2; border-color: #fecaca; color: #b91c1c; font-weight: 600;
}

/* [PUSH_BAO_V1] Bản 46 — nút Bật thông báo đẩy khi có khách đặt */
.push-bao { margin: 0 0 16px; padding: 12px 14px; background: #f0fdf4;
  border: 1px solid #bbf7d0; border-left: 4px solid #16a34a; border-radius: 12px; }
.push-nut { display: inline-block; border: none; cursor: pointer; font-size: .92rem;
  font-weight: 700; color: #fff; background: #16a34a; padding: 10px 18px; border-radius: 999px; }
.push-nut:disabled { background: #9ca3af; cursor: default; }
.push-nut.dang-bat { background: #fff; color: #166534; border: 1px solid #16a34a; }
.push-ghi { margin: 8px 0 0; font-size: .82rem; color: #166534; line-height: 1.5; }