/* ==========================================================================
   Thiên Gia — Kính mờ cao cấp cho các màn hình bản đồ (khách /app, người làm /staff, điều hành /admin/live-map)
   Tải SAU grab.css; chỉ ghi đè bề mặt/hiệu ứng, màu lấy từ --accent / --accent-2 nên khách = xanh lá, người làm = đỏ–cam.
   ========================================================================== */
:root {
  --g-surface: linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 48%, rgba(255,255,255,.07));
  --g-tint: rgba(7, 12, 28, .58);
  --g-line: rgba(255,255,255,.17);
  --g-hi: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.04);
  --g-shadow: 0 24px 70px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset;
}
:root[data-accent="customer"] { --g-tint: rgba(4, 18, 20, .58); }
:root[data-accent="staff"] { --g-tint: rgba(20, 6, 9, .60); }

/* ---------- Bản đồ: tông xanh đêm + vignette để kính nổi bật ---------- */
.dark-tiles .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.62); }
:root[data-accent="staff"] .dark-tiles .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.88) contrast(.92) saturate(.5); }
.gmap::after { content: ""; position: absolute; inset: 0; z-index: 450; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(2,4,12,.55) 100%),
              linear-gradient(180deg, rgba(2,4,12,.45), transparent 18%, transparent 75%, rgba(2,4,12,.35)); }
.leaflet-bar { border: 0 !important; box-shadow: none !important; border-radius: 16px; overflow: hidden; }
.leaflet-bar a { background: rgba(10,16,34,.62) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff !important;
  border: 1px solid var(--g-line) !important; width: 40px !important; height: 40px !important; line-height: 40px !important; }
.leaflet-bar a:first-child { border-radius: 14px 14px 0 0 !important; } .leaflet-bar a:last-child { border-radius: 0 0 14px 14px !important; }
.leaflet-bar a:hover { background: rgba(255,255,255,.16) !important; }
.leaflet-control-attribution { background: rgba(6,10,24,.5) !important; backdrop-filter: blur(8px); border-radius: 10px 0 0 0; }
.leaflet-tooltip { background: rgba(10,16,34,.8); backdrop-filter: blur(14px); border: 1px solid var(--g-line); border-radius: 12px; box-shadow: var(--g-shadow); }

/* ---------- Thanh trên: viên kính ---------- */
.gchip { background: var(--g-surface), var(--g-tint); border: 1px solid var(--g-line); box-shadow: var(--g-hi), 0 10px 30px rgba(0,0,0,.4);
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); transition: transform .18s, box-shadow .18s, background .18s; cursor: pointer; }
a.gchip:hover, button.gchip:hover, label.gchip:hover { transform: translateY(-2px); box-shadow: var(--g-hi), 0 14px 36px rgba(0,0,0,.5), 0 0 0 1px var(--accent-soft); }
.gchip.brand { box-shadow: var(--g-hi), 0 10px 30px rgba(0,0,0,.4), 0 0 28px var(--accent-soft); }
.gchip .brand-logo { box-shadow: 0 6px 18px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.35); }
.gchip i.bi { color: var(--accent); }
.gchip:hover i.bi { filter: drop-shadow(0 0 6px var(--accent)); }

/* ---------- Bảng điều khiển (sheet): kính mờ nổi, viền gradient ---------- */
.gsheet { background: var(--g-surface), var(--g-tint); border: 1px solid var(--g-line); box-shadow: var(--g-shadow), var(--g-hi);
  backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.gsheet::-webkit-scrollbar { width: 8px; } .gsheet::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.gsheet::before { background: rgba(255,255,255,.3); }
@media (min-width: 992px) {
  .gsheet { left: 18px; top: 78px; bottom: 18px; width: 440px; border-radius: 30px; padding: 22px 20px 24px; }
  .gsheet::after { content: ""; position: absolute; inset: 0; border-radius: 30px; pointer-events: none; padding: 1px; opacity: .85;
    background: linear-gradient(150deg, var(--accent), transparent 28%, transparent 70%, var(--accent-2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
}
@media (max-width: 991px) {
  .gsheet { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); border-radius: 28px; border-bottom: 1px solid var(--g-line); max-height: 74vh; }
  .gtop { top: calc(10px + env(safe-area-inset-top)); }
}
.gsheet h2 { font-size: 1.25rem; letter-spacing: -.01em; background: linear-gradient(100deg, #fff, color-mix(in srgb, var(--accent) 55%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gsheet h3 { color: rgba(255,255,255,.55); letter-spacing: .1em; }

/* ---------- Thẻ dịch vụ ---------- */
.svc-grid { gap: 10px; }
.svc { position: relative; background: var(--g-surface); border: 1px solid var(--g-line); box-shadow: var(--g-hi); border-radius: 20px; padding: 14px 8px 12px; transition: transform .18s, box-shadow .2s, border-color .2s; }
.svc:hover { transform: translateY(-3px); box-shadow: var(--g-hi), 0 14px 30px rgba(0,0,0,.4); }
.svc i { width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 14px; display: grid !important; place-items: center; font-size: 1.3rem; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 20px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.35); }
.svc small { color: rgba(255,255,255,.55); }
.svc.on { border-color: transparent; background: linear-gradient(155deg, var(--accent-soft), rgba(255,255,255,.06)); box-shadow: var(--g-hi), 0 0 0 1.5px var(--accent), 0 0 32px var(--accent-soft); }
.svc.on::after { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; top: 7px; right: 8px; font-size: .9rem; color: var(--accent); }

/* ---------- Phân đoạn (Đặt ngay / Hẹn giờ / Dài ngày) ---------- */
.seg { background: rgba(0,0,0,.28); border: 1px solid var(--g-line); box-shadow: inset 0 2px 8px rgba(0,0,0,.35); border-radius: 16px; padding: 5px; }
.seg button { border-radius: 12px; transition: .18s; color: rgba(255,255,255,.62); }
.seg button:hover { color: #fff; }
.seg button.on { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 22px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.35); }
:root[data-accent="customer"] .seg button.on { color: #03140d; }
.gtabs button { background: var(--g-surface); box-shadow: var(--g-hi); border-radius: 14px; }
.gtabs button.on { box-shadow: 0 8px 22px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.3); }

/* ---------- Ô nhập ---------- */
.gsheet .field label { color: rgba(255,255,255,.6); font-size: .78rem; letter-spacing: .04em; }
.gsheet .field input, .gsheet .field select, .gsheet .field textarea { background: rgba(0,0,0,.3); border: 1px solid var(--g-line); border-radius: 14px; box-shadow: inset 0 2px 6px rgba(0,0,0,.3); }
.gsheet .field input:focus, .gsheet .field select:focus, .gsheet .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), inset 0 2px 6px rgba(0,0,0,.3); }

/* ---------- Báo giá + nút chính ---------- */
.price-box { position: relative; overflow: hidden; border-radius: 20px; padding: 16px 18px; border: 1px solid var(--g-line);
  background: linear-gradient(150deg, var(--accent-soft), rgba(255,255,255,.05)); box-shadow: var(--g-hi); }
.price-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rainbow); opacity: .85; }
.price-box b { font-size: 1.85rem; letter-spacing: -.03em; text-shadow: 0 0 24px var(--accent-soft); }
.cta { position: relative; overflow: hidden; border: 0; border-radius: 18px; padding: 16px; font-weight: 800; letter-spacing: .01em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 16px 40px var(--accent-soft), 0 0 0 1px rgba(255,255,255,.18) inset; transition: transform .18s, box-shadow .18s; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 22px 50px var(--accent-soft), 0 0 0 1px rgba(255,255,255,.3) inset; }
.cta::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: gShine 4.5s ease-in-out infinite; }
@keyframes gShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.cta:disabled { opacity: .6; } .cta:disabled::after { display: none; }
.btn-ghost { background: var(--g-surface); border: 1px solid var(--g-line); box-shadow: var(--g-hi); }
.near-info { padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--g-line); }

/* ---------- Theo dõi ca ---------- */
.wcard { background: var(--g-surface); border: 1px solid var(--g-line); box-shadow: var(--g-hi); border-radius: 20px; padding: 14px; }
.wcard .avatar { box-shadow: 0 8px 22px var(--accent-soft), 0 0 0 2px rgba(255,255,255,.18); }
.eta b { background: linear-gradient(100deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps .s.done::before { box-shadow: 0 0 14px var(--accent); } .steps .s.cur::before { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 16px var(--accent); background: var(--accent); }
.kv { border-bottom-color: rgba(255,255,255,.12); }
.bubble.them { background: var(--g-surface); border: 1px solid var(--g-line); }
.bubble.me { box-shadow: 0 6px 18px var(--accent-soft); }
.instr { border-radius: 20px; box-shadow: 0 14px 36px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.3); }
.ai-box { background: linear-gradient(150deg, var(--accent-soft), rgba(255,255,255,.04)); border: 1px solid var(--g-line); border-radius: 16px; }
.stars button.on { text-shadow: 0 0 16px rgba(251,191,36,.75); }
.spinner { border-top-color: var(--accent); box-shadow: 0 0 28px var(--accent-soft); }

/* ---------- Người làm: lời mời & công tắc Online ---------- */
.offer { border: 0; border-radius: 26px; position: relative; background: linear-gradient(155deg, var(--accent-soft), rgba(255,255,255,.05)); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 44px var(--accent-soft), var(--g-hi); animation: gOffer 2.4s ease-in-out infinite; }
@keyframes gOffer { 50% { box-shadow: 0 0 0 1.5px var(--accent), 0 0 66px var(--accent-soft), var(--g-hi); } }
.ring::before { background: #0a0f1e; }
.big-toggle { background: var(--g-surface), var(--g-tint); border: 1px solid var(--g-line); box-shadow: var(--g-hi), 0 10px 30px rgba(0,0,0,.4); backdrop-filter: blur(22px) saturate(1.5); }
.big-toggle.on { box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 0 34px var(--accent-soft), 0 12px 32px rgba(0,0,0,.45); animation: gOnline 2.6s ease-in-out infinite; }
@keyframes gOnline { 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 0 54px var(--accent-soft), 0 12px 32px rgba(0,0,0,.45); } }
#centerBtn { background: var(--g-surface), var(--g-tint) !important; backdrop-filter: blur(18px); border: 1px solid var(--g-line) !important; box-shadow: var(--g-hi), 0 10px 26px rgba(0,0,0,.4); border-radius: 16px; }

/* ---------- Marker ---------- */
.mk { box-shadow: 0 4px 14px rgba(0,0,0,.6), 0 0 0 4px rgba(255,255,255,.08); }
.mk-me { box-shadow: 0 0 22px var(--accent), 0 0 0 4px var(--accent-soft); }
.mk-staff { box-shadow: 0 0 16px rgba(139,92,246,.85); }

/* ---------- Bản đồ điều hành ---------- */
.legend, .live-panel { background: var(--g-surface), var(--g-tint); border: 1px solid var(--g-line); box-shadow: var(--g-shadow), var(--g-hi);
  backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5); border-radius: 24px; }
.live-panel { left: 16px; bottom: 16px; top: 76px; }

/* Màn hình nhỏ: chip gọn, đủ vùng chạm */
@media (max-width: 480px) { .gchip { padding: 8px 12px; min-height: 42px; } .gsheet { padding: 16px 14px 20px; } .svc-grid { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .cta::after, .offer, .big-toggle.on { animation: none; } }
@supports not (backdrop-filter: blur(1px)) { .gsheet, .gchip, .big-toggle, .legend, .live-panel { background: rgba(10,14,28,.96); } }

/* ---------- Sửa từ rà soát ảnh ---------- */
/* Nút phụ cỡ lớn (Hủy đơn, Đặt lại…, Để sau): chữ sáng trên kính, không dùng chữ tối của nút chính, không ánh quét */
.btn-ghost.cta { color: var(--text) !important; background: var(--g-surface), rgba(255,255,255,.04); border: 1px solid var(--g-line); box-shadow: var(--g-hi); font-weight: 700; }
.btn-ghost.cta:hover { background: var(--g-surface), rgba(255,255,255,.1); box-shadow: var(--g-hi), 0 10px 26px rgba(0,0,0,.35); }
.btn-ghost.cta::after { display: none; }
.btn-ghost.cta i { color: var(--accent); }
/* Ghim điểm đặt: giọt nước theo màu accent có quầng sáng (trước là vệt trắng) */
.mk-job { background: var(--accent); border-color: #fff; box-shadow: 0 0 0 5px var(--accent-soft), 0 6px 18px rgba(0,0,0,.6), 0 0 22px var(--accent); }
.mk-job.manual { background: var(--danger); box-shadow: 0 0 0 5px rgba(251,93,110,.25), 0 0 22px var(--danger); }
/* Hộp trống gọn hơn */
.gsheet .muted.center, .gsheet .center.muted { padding: 8px 0; }

/* Bản đồ vector (Goong/MapLibre): nền tối sẵn, không đảo màu; canvas nằm dưới marker */
.vector-tiles .leaflet-maplibre-gl-pane, .vector-tiles .maplibregl-canvas { filter: none; }
.vector-tiles .maplibregl-ctrl-attrib, .vector-tiles .maplibregl-ctrl-logo { display: none; }

/* Bản đồ điều hành: bảng bên trái gọn hơn, thanh cuộn tối */
.live-panel { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.live-panel::-webkit-scrollbar { width: 8px; background: transparent; } .live-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 8px; }
.live-panel .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.live-panel .tile { padding: 10px 12px; border-radius: 14px; } .live-panel .tile b { font-size: 1.25rem; }
.live-panel h2, .live-panel h3 { font-size: 1.05rem; margin: 14px 0 8px; }
.gsheet select, .gsheet .field select { text-overflow: ellipsis; }

/* ===== Đợt 54: bản đồ mượt hơn trên điện thoại ===== */
/* backdrop-filter làm mờ phải tính lại MỖI KHUNG HÌNH khi bản đồ phía sau đang kéo/thu phóng ⇒ giật mạnh trên máy yếu. Máy cảm ứng / màn nhỏ: nền đặc thay cho kính mờ. */
@media (hover: none) and (pointer: coarse), (max-width: 991px) {
  .gchip, .gsheet, .big-toggle, .leaflet-bar a, .leaflet-control-attribution, .gtabs, .cnav,
  .lm-btn, .lm-search, .lm-pop, .lm-panel, .lm-card, .lm-stage .lm-grip, .dp-panel {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .gsheet, .lm-panel, .lm-card, .lm-pop { background-color: rgba(10, 14, 28, .94) !important; }
}
/* bản đồ: tách lớp riêng cho GPU, ô không bị làm mờ khi phóng */
.leaflet-container { background: #0c1424; }
.leaflet-tile { image-rendering: auto; }
.leaflet-tile-container img { will-change: auto; }