/* === 1. NỀN TẢNG (BASE) & RESET === */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Loại bỏ viền cuộn toàn trang */
}

body {
  display: flex;
  flex-direction: row;
  background: #7b0000;
  font-family: Arial, Helvetica, sans-serif;
}


/* === 2. BẢN ĐỒ (MAP) === */
/* Hiệu ứng phóng to mượt mà dựa trên mức zoom của bản đồ */
.dynamic-cam-icon {
    width: 100%;
    height: 100%;
    transition: transform 0.2s ease-out;
}

/* Khi bản đồ ở mức zoom sâu (từ 16 trở lên), icon sẽ tự phóng to 1.5 - 2 lần */
.leaflet-zoom-16 .dynamic-cam-icon { transform: scale(1.5); }
.leaflet-zoom-17 .dynamic-cam-icon { transform: scale(1.8); }
.leaflet-zoom-18 .dynamic-cam-icon { transform: scale(2.2); }
.leaflet-zoom-19 .dynamic-cam-icon { transform: scale(2.5); }
#map {
  flex: 1 1 auto;
  width: auto;
  position: relative;
  background: transparent;
  z-index: 1;
}

/* Hiệu ứng trống đồng quay */
#map::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 190vmin; height: 190vmin;
  background: url("../img/trongdong.png") no-repeat center / contain;
  opacity: 0.2;
  pointer-events: none;
  animation: spin 80s linear infinite;
  z-index: 0;
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* === 3. THANH BÊN (SIDEBAR) === */
#sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  overflow: auto;
  background: #fafafa;
  z-index: 9;
  border-right: 2px solid #333;
  transition: flex-basis 0.25s ease, width 0.25s ease, transform 0.25s ease;
}

/* Trạng thái ẩn sidebar (Desktop) */
body.sidebar-hidden #sidebar, 
#sidebar.hidden {
  flex-basis: 0 !important;
  width: 0 !important;
  border-right: 0 !important;
  overflow: hidden;
  display: none; /* Giữ tương thích bản cũ */
}

body.sidebar-hidden #map {
  flex: 1 1 100%;
}

/* === 4. THÀNH PHẦN GIAO DIỆN (UI COMPONENTS) === */
/* Văn bản & Liên kết */
a.trichdan { color: #fff; font-size: 8px; text-decoration: none; }
.thangtv_chuyentrang { text-align: center; color: #fff; text-transform: uppercase; }
p.thangtv_0976961169 { margin: 0 !important; font-size: 10px; color: #ffee00; }
.header-content { font-size: 14px; }

/* Tiện ích */
.color-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border: 1px solid #666; border-radius: 3px;
  margin-right: 6px; vertical-align: middle;
}

.btn-export {
  margin-left: 8px; padding: 6px 12px;
  border: 1px solid #666; border-radius: 6px;
  cursor: pointer; background: #fafafa;
}
.btn-export:hover { background: #eee; }

.ftmp { border-bottom: 1px dashed #f00; margin-top: 12px; }
.read-more { cursor: pointer; text-decoration: underline; }

/* Thông báo (Alert Box) */
#alert-box {
  position: fixed;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  background: #ffefef; color: #8a0000;
  border: 1px solid #e3a3a3; border-radius: 8px;
  padding: 10px 14px;
  z-index: 2000;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  max-width: min(92vw, 720px);
  display: none;
  animation: alertFade 0.25s ease;
}
@keyframes alertFade {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Toolbox */
.toolbox-content {
  display: none; opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toolbox-content.open { display: flex; opacity: 1; transform: translateY(0); }


/*Sytle Popup thông tin xã*/
/*Form xem chi tiết ngoài site Tiêu đề Popup có thể kéo được*/
#sidebar.collapsed {
    left: -320px; /* Hoặc độ rộng sidebar của bạn */
    transition: left 0.3s ease;
}
.leaflet-popup-content-wrapper {
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.leaflet-popup-header-drag {
    cursor: move;
    background: #f8f9fa;
    padding: 5px;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    text-align: center;
}
/* Nút ghim trong popup */
/* Chỉ báo khi nút ghim được kích hoạt */
.pin-toggle.active {
    color: #da251d !important; /* Đỏ cờ Đảng */
    text-shadow: 0 0 5px rgba(218, 37, 29, 0.5);
}

.leaflet-popup-dragging .leaflet-popup-content-wrapper {
    cursor: move;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4) !important;
    opacity: 0.85;
}
.toggle-btn {
    padding: 8px 12px; /* Tăng diện tích chạm */
    margin: 4px 0;
    display: inline-block;
    color: #da251d;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}


/* Style cho nút Xem thêm/Rút gọn */
.toggle-btn {
    color: #0056b3;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85em;
    cursor: pointer;
    display: inline-block;
    margin-top: 4px;
}

.toggle-btn:hover {
    color: #da251d;
    text-decoration: underline;
}

/* Đảm bảo ảnh không ngăn cản sự kiện click vào nút hoặc vùng chứa */
.map-layer-btn img, #openChartBtn img {
    pointer-events: none;
}


@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.less-btn {
    color: #da251d; /* Màu đỏ cho nút rút gọn để dễ phân biệt */
    margin-top: 8px;
}
.truncate-wrapper {
    position: relative;
    z-index: 10;
    max-height: none !important; /* Cho phép nội dung mở rộng tự nhiên */
    overflow: visible !important;
}

.content-full {
    word-break: break-word; /* Đảm bảo văn bản dài (danh sách bản) không bị tràn ngang */
    
}
/* Tối ưu vùng chạm cho mobile */

@media (max-width: 767px) {
    .toggle-btn {
        display: inline-block;
        padding: 10px 5px; /* Tăng diện tích chạm */
        min-width: 80px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
}
/*END Form xem chi tiết ngoài site Tiêu đề Popup có thể kéo được*/
/*END Sytle Popup thông tin xã*/

/* === 5. THANH CUỘN (SCROLLBAR) === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f3f3f3; border-radius: 10px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d4a94f 0%, #c0943c 100%);
  border-radius: 10px; border: 2px solid #f3f3f3;
}
::-webkit-scrollbar-corner { background: #f3f3f3; }
* { scrollbar-color: #d4a94f #f3f3f3; scrollbar-width: thin; }

/* Tùy chỉnh nút chọn lớp bản đồ */
.leaflet-control-layers-toggle {
    background-image: none !important; /* Bỏ biểu tượng bị lỗi 404 */
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* Thêm chữ hoặc biểu tượng thay thế bằng mã hiệu */
.leaflet-control-layers-toggle::after {
    content: "🗺️"; /* Biểu tượng bản đồ */
    font-size: 18px;
}

.leaflet-control-layers {
    z-index: 1000 !important; /* Luôn nằm trên cùng */
    border: 2px solid #da251d !important; /* Viền đỏ theo tông màu chủ đạo */
}