/* Trang hướng dẫn GIS stack. Sáng/tối theo hệ điều hành. */
:root {
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #eef1f5; --line: #dde2e9;
  --text: #18202b; --muted: #5b6676; --accent: #0b6bcb; --accent-ink: #ffffff;
  --ok: #17794a; --ok-bg: #e2f4ea; --no: #a8321f; --no-bg: #fbe7e2; --warn: #8a5a00; --warn-bg: #fdf1d6;
  --code-bg: #101620; --code-text: #d7deea; --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1116; --surface: #161b23; --surface-2: #1d242e; --line: #2a3340;
    --text: #e4e9f0; --muted: #96a2b3; --accent: #5aa9f5; --accent-ink: #0b1220;
    --ok: #6fd3a0; --ok-bg: #143324; --no: #f39a88; --no-bg: #3a1c17; --warn: #f0c267; --warn-bg: #3a2c10;
    --code-bg: #0a0d12;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 system-ui, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
code, pre { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
button, select, input { font: inherit; font-size: 14px; color: var(--text); }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 1320px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 6px 18px; align-items: center; flex-wrap: wrap; }
.brand { font-weight: 700; margin-right: auto; white-space: nowrap; }
.topbar a { text-decoration: none; color: var(--muted); white-space: nowrap; }
.topbar a:hover { color: var(--accent); }

main { max-width: 1320px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 28px; line-height: 1.25; margin: 8px 0 6px; }
h2 { font-size: 21px; margin: 44px 0 10px; padding-top: 6px; }
h3 { font-size: 16px; margin: 22px 0 8px; }
p { margin: 8px 0; }
.lead { color: var(--muted); max-width: 80ch; }

/* Dải trạng thái dịch vụ */
.services { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.services li { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.on { background: var(--ok); }
.dot.off { background: var(--no); }

/* Ứng dụng bản đồ */
.app { display: grid; grid-template-columns: 330px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); margin-top: 14px; }
.panel { border-right: 1px solid var(--line); max-height: 680px; overflow-y: auto; }
.panel details { border-bottom: 1px solid var(--line); }
.panel summary { cursor: pointer; padding: 10px 14px; font-weight: 600; list-style-position: inside; }
.panel .body { padding: 2px 14px 14px; display: grid; gap: 10px; }
.panel label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.panel label.stack { display: grid; gap: 4px; }
.panel .hint { color: var(--muted); font-size: 13px; margin: 0; }
.panel .off-note { color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 6px 10px; font-size: 13px; margin: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
select, input[type=text], input[type=search] { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.row > input, .row > select { flex: 1 1 120px; }
button.btn { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
button.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 6px 14px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.results button { width: 100%; text-align: left; background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; cursor: pointer; font-size: 13px; line-height: 1.4; }
.results button:hover { border-color: var(--accent); }
.results small { color: var(--muted); display: block; }
.steps { margin: 0; padding-left: 20px; font-size: 13px; max-height: 190px; overflow-y: auto; }
.summary { font-weight: 600; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }

.mapcol { position: relative; min-width: 0; display: flex; flex-direction: column; }
.mapbox { position: relative; flex: 1; min-height: 620px; }
#map { position: absolute; inset: 0; background: var(--surface-2); }
#mapmsg { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); background: var(--surface-2); z-index: 2; }
#mapmsg[hidden] { display: none; }
#pickhint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; background: var(--accent); color: var(--accent-ink); padding: 5px 14px; border-radius: 999px; font-size: 13px; }
#pickhint[hidden] { display: none; }
.readout { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.readout b { color: var(--text); font-weight: 600; }
.maplibregl-popup-content { color: #18202b; font: 13px/1.45 system-ui, sans-serif; }
.pop h4 { margin: 8px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #5b6676; }
.pop h4:first-child { margin-top: 0; }
.pop div { overflow-wrap: anywhere; }

/* Nội dung tài liệu */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.note { border-left: 3px solid var(--accent); background: var(--surface); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; margin: 12px 0; }
.note.warn { border-left-color: var(--warn); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.keys { width: 100%; border-collapse: collapse; }
.keys td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.keys td:first-child { font-weight: 600; width: 44%; }
kbd { font: 12px ui-monospace, Consolas, monospace; background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; min-width: 720px; }
table.data th, table.data td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { background: var(--surface-2); font-size: 13px; color: var(--muted); font-weight: 600; }
table.data tr:last-child td { border-bottom: 0; }
tr.group td { background: var(--surface-2); font-weight: 700; font-size: 13px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.ok { color: var(--ok); background: var(--ok-bg); }
.no { color: var(--no); background: var(--no-bg); }
.maybe { color: var(--warn); background: var(--warn-bg); }
.codebox { position: relative; margin: 8px 0 14px; }
pre { margin: 0; background: var(--code-bg); color: var(--code-text); padding: 14px 16px; border-radius: var(--radius); overflow-x: auto; line-height: 1.5; }
.copy { position: absolute; top: 8px; right: 8px; font: 12px system-ui, sans-serif; color: #d7deea; background: #263041; border: 1px solid #3a475a; border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.shots figure { margin: 0; }
.shots img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); }
.shots figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
footer { color: var(--muted); font-size: 13px; margin-top: 48px; border-top: 1px solid var(--line); padding-top: 14px; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .panel { border-right: 0; border-bottom: 1px solid var(--line); max-height: none; }
  .mapbox { min-height: 460px; }
}