:root {
  --bg: #ffffff; --fg: #16202a; --muted: #667685;
  --line: #dfe6ec; --accent: #0066cc;
  --warn-bg: #fff6e0; --warn-fg: #7a5200;
  --err-bg: #fdecec; --err-fg: #a11a1a;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, "Segoe UI", sans-serif;
       color: var(--fg); background: var(--bg); }
header { display: flex; align-items: center; gap: 16px;
         padding: 12px 20px; border-bottom: 1px solid var(--line); }
h1 { font-size: 18px; margin: 0; }
.badge { padding: 4px 10px; border-radius: 999px; font-size: 12px;
         background: #eef4f9; color: var(--muted); }
.badge.warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge.err  { background: var(--err-bg);  color: var(--err-fg); }
nav.tabs { display: flex; gap: 4px; padding: 8px 20px;
           border-bottom: 1px solid var(--line); }
/* `display: flex` thắng quy tắc mặc định `[hidden] { display: none }` của
   trình duyệt, nên thanh tab con của cảng không được chọn vẫn hiện ra. Phải
   nói lại tường minh. */
nav.tabs[hidden] { display: none; }
nav.tabs button { border: 1px solid var(--line); background: none;
                  padding: 6px 14px; border-radius: 6px; cursor: pointer; }
nav.tabs button.active { background: var(--accent); color: #fff;
                         border-color: var(--accent); }
/* Cấp một là cảng, cấp hai là mục trong cảng đó - phân biệt bằng độ đậm và
   nền, để không nhìn thành hai hàng nút ngang hàng nhau. */
nav.tabs.ports { padding-bottom: 0; border-bottom: 0; }
nav.tabs.ports button { font-weight: 600; font-size: 15px; padding: 8px 18px;
                        border-bottom-left-radius: 0;
                        border-bottom-right-radius: 0; }
nav.tabs.subtabs { background: #eef4f7; }
nav.tabs.subtabs button { font-size: 13px; padding: 5px 12px; }
main { padding: 16px 20px 48px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
           margin-bottom: 12px; }
.filters label { display: flex; flex-direction: column; font-size: 12px;
                 color: var(--muted); gap: 4px; }
.filters input, .filters select { padding: 5px 7px; border: 1px solid var(--line);
                                  border-radius: 5px; font: inherit; }
.scroller { height: 62vh; overflow: auto; border: 1px solid var(--line);
            border-radius: 6px; }
table.grid { border-collapse: collapse; width: 100%; font-size: 13px; }
table.grid th { position: sticky; top: 0; background: #dce7ed;
                text-align: left; padding: 6px 8px; }
table.grid td { padding: 5px 8px; border-top: 1px solid var(--line);
                white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Bảng %MoM/%YoY dưới các chart tab Xuất nhập khẩu VN - nằm NGANG (cột là
   tháng, hàng là "Nhóm - Giá trị/%MoM/%YoY") nên rộng hơn cao, bọc trong
   khung cuộn ngang, cột đầu (tên hàng) dính lại khi cuộn. */
.growth-table-wrap { margin-bottom: 22px; border: 1px solid var(--line);
                     border-radius: 6px; }
.growth-table-wrap-h { max-width: 100%; overflow-x: auto; max-height: 60vh;
                       overflow-y: auto; }
.growth-table { width: max-content; min-width: 100%; margin-bottom: 0; }
.growth-table-h th:first-child, .growth-table-h td:first-child {
  position: sticky; left: 0; background: #fff; white-space: nowrap;
  box-shadow: 1px 0 0 var(--line);
}
.growth-table-h th:first-child { z-index: 2; background: #dce7ed; }
.growth-table .pos { color: #1a7f37; }
.growth-table .neg { color: #cf222e; }
.growth-table tr.total td { font-weight: 600; border-top: 2px solid var(--line); }
/* Nút lọc theo nhóm ngay trên bảng tăng trưởng - bấm để ẩn/hiện 3 hàng của
   nhóm đó, không đụng tới bộ chọn nhóm chính của biểu đồ phía trên. */
.growth-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.growth-filter-btn { font-size: 12px; padding: 4px 10px; border-radius: 999px;
                     border: 1px solid var(--line); background: #eef4f9;
                     color: var(--muted); cursor: pointer; }
.growth-filter-btn.active { background: var(--accent); color: #fff;
                            border-color: var(--accent); }
/* Tab Bản đồ */
.map { height: 68vh; min-height: 420px; border: 1px solid var(--line);
       border-radius: 6px; }
/* Nút "Toàn màn hình" phóng to đúng khung bản đồ qua Fullscreen API - trình
   duyệt để trống nền đen quanh phần tử theo kích thước gốc nếu không ép
   width/height phủ kín màn hình. */
.map:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
.map-legend { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px;
              font-size: 13px; color: var(--muted, #567); }
.map-legend .ramp { width: 180px; height: 10px; border-radius: 5px;
                    background: linear-gradient(90deg, rgb(40,130,200),
                                                rgb(200,30,20)); }
.map-legend .na { margin-left: 12px; color: #9aa5ad; }
/* Chấm ở chế độ kéo sửa toạ độ: divIcon nên phải tự vẽ hình tròn. */
.map-dot span { display: block; border-radius: 50%; border: 1px solid #22303a;
                cursor: move; }
/* Nhắc còn toạ độ sửa chưa đưa vào repo */
.pending { padding: 9px 12px; margin-bottom: 10px; border-radius: 6px;
           border: 1px solid #e0b84a; background: #fdf6e0; font-size: 13px;
           line-height: 1.5; }
.pending button { margin-left: 8px; }
.pending.clash { border-color: #c0392b; background: #fdecea; }
.geo-msg.warn { color: #a3231a; font-weight: 600; }
/* Bảng dán link Google Maps */
.geo-panel { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end;
             padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line);
             border-radius: 6px; background: #f3f7f9; }
.geo-panel label { display: flex; flex-direction: column; gap: 3px;
                   font-size: 13px; }
.geo-panel label.grow { flex: 1 1 420px; }
.geo-panel input[type="text"] { width: 100%; padding: 6px 8px; font: inherit;
                                border: 1px solid var(--line); border-radius: 5px; }
.geo-msg { flex-basis: 100%; font-size: 13px; }
.geo-msg.ok { color: #17663a; }
.geo-msg.err { color: #a3231a; }
#m-opacity { vertical-align: middle; }
#m-opacity-val { display: inline-block; min-width: 3.2em; }
/* Ghi chú của tab bản đồ nằm dưới chú giải nên không dùng margin âm như
   ghi chú đặt ngay dưới một biểu đồ. */
#tab-map .note { margin-top: 2px; }
.leaflet-tooltip.map-label { background: rgba(255,255,255,.85); border: 0;
                             box-shadow: none; font-size: 12px;
                             font-weight: 600; color: #14212b; padding: 1px 4px; }
.leaflet-popup-content h4 { margin: 0 0 6px; font-size: 14px; }
.leaflet-popup-content table { border-collapse: collapse; font-size: 13px; }
.leaflet-popup-content td { padding: 2px 10px 2px 0; }
.leaflet-popup-content td:last-child { text-align: right;
                                       font-variant-numeric: tabular-nums; }
.leaflet-popup-content .note { margin: 6px 0 0; font-size: 12px; }
.note { margin: -18px 0 26px; font-size: 13px; color: var(--muted, #567);
        max-width: 70em; line-height: 1.5; }
/* Chú thích mốc cập nhật, đặt ngay dưới thanh lọc chứ không dưới biểu đồ, nên
   phải huỷ lề âm của .note. Tô nền vàng nhạt vì đây là cảnh báo đọc sai số
   (tháng cuối chưa đủ ngày), không phải ghi chú nguồn thông thường. */
.partial-note { margin: 4px 0 18px; padding: 8px 12px; border-radius: 6px;
                background: #fff8e1; border: 1px solid #f0d98c; color: #6b5510; }
/* Chart 8's per-berth picker: grouped by zone, wraps on narrow screens. */
.berth-picker { align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.berth-picker .zone-group { display: flex; flex-wrap: wrap; gap: 4px 10px;
                            align-items: center; }
.berth-picker .zone-group b { color: var(--muted, #567); }
.filters .quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Chart 8's companion table: the exact figures behind the bars. */
.berth-table { margin: -18px 0 28px; overflow-x: auto; }
.berth-table tfoot td { border-top: 2px solid var(--line); font-weight: 600; }
.chart { height: 380px; margin-bottom: 28px; }
.chart-head { display: flex; justify-content: space-between;
              align-items: baseline; margin-bottom: 4px; }
.chart-head h3 { margin: 0; font-size: 15px; }
.chart-head button { font-size: 12px; margin-left: 6px; }