/* Trò chơi "Phòng dự báo lũ" (du-bao-lu.html, du-bao-lu.js): đoán trước, bảng điều khiển, phép tính, biểu đồ 7 ngày, mặt cắt thung lũng */
.lu { --nuoc: #0EA5E9; --dat: #A3B18A; max-width: 1080px; margin: 0 auto; padding: 20px 16px 56px; display: grid; gap: 20px; }
.lu h2 { margin: 0 0 10px; font: 800 19px/1.3 var(--f-display); }
.lu-do { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 22px; background: var(--panel); border: 2px dashed var(--blue); }
.lu-do img { flex: none; }
.lu-do p { margin: 0 0 12px; line-height: 1.55; }
.lu-do-chon { display: flex; flex-wrap: wrap; gap: 10px; }
.lu-do-chon .btn { font-weight: 800; }
.lu-do-chon .is-dung { border-color: #10B981 !important; background: color-mix(in srgb, #10B981 16%, var(--panel)); }
.lu-do-chon .is-sai { border-color: #EF4444 !important; background: color-mix(in srgb, #EF4444 14%, var(--panel)); }
.lu-do-ph { margin: 12px 0 0 !important; font-weight: 700; }
.lu-do-ph.is-dung { color: #047857; } .lu-do-ph.is-sai { color: #B91C1C; }

.lu-ban { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: stretch; padding: 18px; border-radius: 22px; background: var(--panel); border: 2px solid var(--edge); }
.lu-truot { display: grid; gap: 8px; align-content: center; font-size: 15px; }
.lu-truot b { font: 800 20px/1 var(--f-display); color: var(--blue-chu); }
.lu-truot input, .lu-ngay input { width: 100%; accent-color: var(--blue); }
.lu-dat-ds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lu-dat { display: grid; gap: 2px; align-content: start; padding: 10px; border-radius: 14px; border: 2px solid var(--edge); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lu-dat b { font: 800 14.5px/1.25 var(--f-display); }
.lu-dat small { font-size: 12px; line-height: 1.35; color: var(--muted); }
.lu-dat.is-on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--panel)); }
.lu-cong { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--edge); background: var(--bg); cursor: pointer; }
.lu-cong input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: #DC2626; }
.lu-cong span { display: grid; gap: 2px; }
.lu-cong b { font-size: 14.5px; line-height: 1.3; }
.lu-cong small { font-size: 12px; color: var(--muted); }

.lu-tinh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lu-o { display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--edge); }
.lu-o small { font-size: 12px; color: var(--muted); }
.lu-o b { font: 800 19px/1.2 var(--f-display); }
.lu-o.is-chinh { background: var(--grad); border-color: transparent; color: #fff; }
.lu-o.is-chinh small { color: rgba(255, 255, 255, .85); }
.lu-dau { font: 800 20px/1 var(--f-display); color: var(--muted); }

.lu-bo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.lu-the { padding: 18px; border-radius: 22px; background: var(--panel); border: 2px solid var(--edge); }
.lu-the svg { display: block; width: 100%; height: auto; overflow: visible; }
.lu-luoi { stroke: var(--edge); stroke-width: 1; }
.lu-truc { fill: var(--muted); font: 600 12px var(--f-mono); }
.lu-bd { stroke-width: 2; stroke-dasharray: 6 5; }
.lu-bd-1 { stroke: #F59E0B; } .lu-bd-2 { stroke: #EF4444; } .lu-bd-3 { stroke: #9333EA; }
.lu-bd-chu { font: 700 12px var(--f-body); }
.lu-bd-chu-1 { fill: #B45309; } .lu-bd-chu-2 { fill: #DC2626; } .lu-bd-chu-3 { fill: #7E22CE; }
.lu-cot { fill: var(--nuoc); opacity: .85; transition: y .25s, height .25s; }
.lu-cot.is-vuot { fill: #EF4444; }
.lu-cot.is-chon { stroke: var(--ink); stroke-width: 2.5; opacity: 1; }
.lu-cot-so { fill: var(--ink); font: 800 12.5px var(--f-mono); }
.lu-that { fill: none; stroke: #DC2626; stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; }
.lu-that-cham { fill: #DC2626; }
.lu-kl { margin: 10px 0 0; line-height: 1.45; }
.lu-kl.is-vuot b { color: #DC2626; }
.lu-kl.is-an b { color: #047857; }
.lu-dat-hinh { fill: var(--dat); }
.lu-nuoc { fill: var(--nuoc); opacity: .75; transition: d .3s; }
.lu-nha-h rect, .lu-nha-h path { fill: #F8FAFC; stroke: #334155; stroke-width: 1.5; }
.lu-nha-h path { fill: #F97316; }
.lu-nha-h .lu-cua { fill: #334155; }
.lu-nha-h.is-ngap rect:first-child { fill: #BAE6FD; stroke: #DC2626; stroke-width: 2.5; }
.lu-muc-chu { fill: #0369A1; font: 800 14px var(--f-mono); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.lu-ngay-bo { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.lu-ngay { flex: 1; display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.lu-nha { margin: 10px 0 0; font-weight: 800; color: #047857; }
.lu-nha.is-ngap { color: #DC2626; }
.lu-ho-chu { margin: 0; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, #EF4444 10%, var(--panel)); border: 2px solid #EF4444; line-height: 1.5; }

.lu-gh-ds, .lu-rut-ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.lu-gh, .lu-rut { display: grid; gap: 6px; padding: 16px; border-radius: 18px; background: var(--panel); border: 1.5px solid var(--edge); }
.lu-gh p, .lu-rut p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.lu-gh-ic { width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, #F59E0B 22%, var(--panel)); position: relative; }
.lu-gh-ic::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 20px/1 var(--f-display); color: #B45309; }
.lu-so { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font: 800 14px/1 var(--f-mono); }
.lu-thu { display: flex; gap: 14px; align-items: center; margin-top: 16px; padding: 16px; border-radius: 18px; background: var(--panel); border: 2px dashed var(--edge); }
.lu-thu p { margin: 0; line-height: 1.55; }
.lu-cuoi .ld-vid small { font-size: 12.5px; }

:root[data-theme="dark"] .lu { --dat: #4B5D3A; }
:root[data-theme="dark"] .lu-bd-chu-1 { fill: #FBBF24; } :root[data-theme="dark"] .lu-bd-chu-2 { fill: #F87171; } :root[data-theme="dark"] .lu-bd-chu-3 { fill: #C084FC; }
:root[data-theme="dark"] .lu-kl.is-vuot b, :root[data-theme="dark"] .lu-nha.is-ngap, :root[data-theme="dark"] .lu-do-ph.is-sai { color: #F87171; }
:root[data-theme="dark"] .lu-kl.is-an b, :root[data-theme="dark"] .lu-nha, :root[data-theme="dark"] .lu-do-ph.is-dung { color: #34D399; }
:root[data-theme="dark"] .lu-muc-chu { fill: #7DD3FC; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lu { --dat: #4B5D3A; }
  :root:not([data-theme="light"]) .lu-bd-chu-1 { fill: #FBBF24; } :root:not([data-theme="light"]) .lu-bd-chu-2 { fill: #F87171; } :root:not([data-theme="light"]) .lu-bd-chu-3 { fill: #C084FC; }
  :root:not([data-theme="light"]) .lu-kl.is-vuot b, :root:not([data-theme="light"]) .lu-nha.is-ngap, :root:not([data-theme="light"]) .lu-do-ph.is-sai { color: #F87171; }
  :root:not([data-theme="light"]) .lu-kl.is-an b, :root:not([data-theme="light"]) .lu-nha, :root:not([data-theme="light"]) .lu-do-ph.is-dung { color: #34D399; }
  :root:not([data-theme="light"]) .lu-muc-chu { fill: #7DD3FC; }
}
@media (max-width: 900px) {
  .lu-ban { grid-template-columns: minmax(0, 1fr); }
  .lu-bo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .lu-do { flex-direction: column; }
  .lu-dat-ds { grid-template-columns: minmax(0, 1fr); }
  .lu-dau { display: none; }
  .lu-tinh { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .lu-cot, .lu-nuoc { transition: none; } }
html.nhung .lu { padding-top: 8px; }