/* === Reset & Body === */
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	cursor: default;
}

/* === Logo === */
header {
	background: #003366;
}
.logo-container {
	width: 100%;
	margin: 0 auto;
}
.logo-container img {
	width: 100%;
	height: 80px;
	display: block;
}

/* === Map === */
#map {
	height: calc(100% - 80px);
	width: 100%;
}

/* === Panel KCHT === */
#panel-kcht {
	position: absolute;
	top: 100px;
	left: 10px;
	width: 260px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	z-index: 1000;
	transition: width 0.3s, height 0.3s;
}
#panel-kcht.collapsed {
	width: 260px;
	height: 32px;
	overflow: hidden;
}

/* Header của panel */
#panel-kcht .header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #003366;
	color: #fff;
	padding: 6px 10px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
#panel-kcht .header .title {
	font-weight: bold;
	font-size: 14px;
}
#panel-kcht .header .toggle {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 16px;
	cursor: default;
}

/* Nội dung panel */
#panel-kcht .content {
	padding: 10px;
	max-height: 400px;
	overflow-y: auto;
}

/* === Cây tài sản === */
.asset-tree {
	list-style: none;
	margin: 0;
	padding: 0;
}
.asset-tree ul.sub-tree {
	list-style: none;
	margin: 0;
	padding: 0 0 0 15px;
}
.asset-tree .hidden {
	display: none;
}
.asset-tree .group-header {
	display: flex;
	align-items: center;
	cursor: default;
	margin: 4px 0;
}
.asset-tree .label {
	font-weight: bold;
	color: #003366;
}

/* Icon */
.asset-tree .toggle-icon, .asset-tree .folder-icon {
	color: #003366;
	margin-right: 5px;
}
.asset-tree .toggle-icon {
	font-size: 14px; /* kích thước mũi tên */
}
.asset-tree .folder-icon {
	font-size: 16px; /* kích thước thư mục */
}

.asset-tree .item {
	margin: 4px 0;
	font-size: 14px;
}
.asset-tree input[type="checkbox"] {
	accent-color: #003366;
	margin-right: 4px;
}
.asset-tree input[type="checkbox"]:checked + label {
	font-weight: bold;
	color: green;
}
.asset-tree label {
	cursor: default;
}

/* === Search Icon & Panel === */
#search-icon {
	position: absolute;
	top: 100px;
	right: 10px;
	width: 45px;
	height: 45px;
	background: #fff;
	border: 2px solid #003366;
	border-radius: 5px;
	text-align: center;
	line-height: 45px;
	font-size: 24px;
	font-weight: bold;
	cursor: default;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
	z-index: 2000;
}
#search-icon:hover {
	background: #003366;
	color: #fff;
}
#search-panel {
	position: absolute;
	top: 150px;
	right: 10px;
	width: 280px; 
	background: #fff;
	padding: 10px;
	border: 2px solid #003366;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	z-index: 2000;
}
#search-panel.hidden {
	display: none;
}
#search-panel label {
	display: block;
	margin-top: 8px;
		font-size: 12px;
		font-weight: bold; 
		color: #003366; 
}
.search-options {
		display: flex;
		align-items: center;
		margin-top: 10px;
		width: 100%;
		justify-content: flex-start;
}
.search-options label {
		display: inline;
		margin-top: 0;
		margin-right: 5px;
		white-space: nowrap; 
		font-weight: normal; 
		color: initial; 
		font-size: 12px;
}
#search-panel input,
#search-panel select {
	box-sizing: border-box; 
	width: 100%;
	padding: 5px;
	margin-top: 3px;
		font-size: 12px;
}
#search-panel button {
	margin-top: 10px;
	width: 100%;
	padding: 6px;
	background: #003366;
	color: #fff;
	border: none;
	cursor: default;
}
#search-panel button:hover {
	background: #0055aa;
}

.search-options {
		background-color: #e6f7ff; 
		padding: 5px 8px; /* 5px trên/dưới, 8px trái/phải */
		display: flex;
		align-items: center;
		justify-content: space-between; /* Đẩy label và checkbox ra hai phía */
		margin-top: 10px;
		margin-bottom: 10px; /* Giảm margin bottom để không bị "dày" */
		
		/* Đảm bảo nó nằm gọn trong form */
		box-sizing: border-box; 
		width: 100%; /* Đảm bảo nó chiếm đúng 100% của form cha */
}
.search-options label {
		font-weight: normal; 
		margin-bottom: 0; 
		/* Đảm bảo label chiếm hết không gian còn lại */
		flex-grow: 1; 
}

.search-options input[type="checkbox"] {
		margin: 0; /* Loại bỏ mọi margin xung quanh checkbox */
		padding: 0;
}

/*
 * Thiết lập màu nền và màu chữ riêng cho phần tiêu đề (header) của bảng 
 * kết quả tìm kiếm.
 */
#results-table-popup table thead tr {
		/* Màu nền xanh nhạt, thường dùng cho tiêu đề */
		background-color: #d9edf7; 
		/* Màu chữ đậm hơn để dễ đọc trên nền sáng */
		color: #31708f; 
		/* Đảm bảo chữ in đậm (nếu chưa có) */
		font-weight: bold;
}

/* Tùy chọn: Thêm viền dưới cho tiêu đề để phân tách rõ ràng hơn với nội dung */
#results-table-popup table thead {
		border-bottom: 2px solid #bce8f1;
}

/* --- Quy tắc sọc ngựa vằn đã có ở bước trước (giữ lại) --- */

#results-table-popup table tbody tr:nth-child(odd) {
		background-color: #f5f5f5; /* Màu xám rất nhạt cho hàng lẻ */
}

#results-table-popup table tbody tr:hover {
		background-color: #e0e0e0; /* Hiệu ứng hover */
		cursor: default;
}
/* Đảm bảo các trường range nằm trên một dòng và chia đều không gian */
.range-inputs {
		display: flex;
		gap: 8px; /* Khoảng cách giữa hai ô input */
}

/* Đảm bảo input bên trong chia đều không gian */
.range-inputs input[type="number"] {
		flex: 1;
		min-width: 0; /* Cho phép co lại trong flex container */
}

/* === Popup kết quả và chi tiết === */
.popup {
		position: absolute;
		max-width: 400px;
		max-height: 80vh;
		background: #ffffff; /* Đảm bảo nền trắng cho nội dung popup */
		border: 2px solid #003366;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.4);
		z-index: 3000;
		display: flex;
		flex-direction: column;
}
.popup.hidden {
		display: none;
}

/* HEADER STYLE (áp dụng cho tất cả pop-up) */
.popup-header {
		background: #003366; /* Mặc định */
		color: #fff;
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		cursor: grab;
}

/* ĐIỀU CHỈNH: Màu nền tiêu đề cho "Kết quả tìm kiếm" (Sáng hơn #003366) */
#results-table-popup .popup-header {
		background: #0055aa; 
}

/* ĐIỀU CHỈNH: Màu nền tiêu đề cho "Chi tiết tài sản" (Sáng nhất) */
#details-popup .popup-header {
		background: #4682b4;
}

.popup-header h3 {
		margin: 0;
}
.popup-header .close-btn {
		background: transparent;
		border: none;
		color: #fff;
		font-size: 24px;
		cursor: default;
}
.popup-content {
		padding: 15px;
		overflow-y: auto;
		flex-grow: 1;
}

/* Popup bảng kết quả */
#results-table-popup table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 10px;
}
#results-table-popup th,
#results-table-popup td {
		border: 1px solid #ccc;
		padding: 4px;
		text-align: left;
		font-size: 11px;
}

#results-table-popup th:nth-child(2),
#results-table-popup td:nth-child(2),
#results-table-popup th:nth-child(3),
#results-table-popup td:nth-child(3) {
		text-align: right;
		width: 100px;
}
/* Tùy chọn: Đảm bảo cột Tên sử dụng phần còn lại và ngắt chữ */
#results-table-popup td:nth-child(1) {
		max-width: 250px;
		word-wrap: break-word;
}

#results-table-popup th {
		background: #f2f2f2;
}
#results-table-popup tbody tr {
		cursor: default;
}
#results-table-popup tbody tr:hover {
		background: #f0f0f0; /* Màu hover sáng trên nền trắng */
}

/* Popup chi tiết tài sản */
#details-popup .popup-content {
		font-size: 11px;
}
#details-popup .popup-content b {
		font-size: 11px;
}

.popup table th {
		/* Đảm bảo tiêu đề cột dễ click */
		cursor: default;
		user-select: none; /* Ngăn chọn văn bản khi click liên tục */
		white-space: nowrap; /* Giữ tiêu đề trên 1 dòng */
}

.popup table th .sort-indicator {
		/* Mũi tên sắp xếp */
		display: inline-block;
		margin-left: 5px;
		font-size: 0.8em;
		color: #444; /* Màu xám */
}

/* Kiểu cho cột đang được sắp xếp (Tùy chọn) */
.popup table th.active-sort {
		background-color: #f0f0f0;
}
/* === Basemap Control (Leaflet Layers) === */
.leaflet-control-zoom {
	margin-bottom: 20px;
	margin-right: 10px;
	z-index: 1000;
}
.leaflet-control-layers {
	margin-bottom: 90px;
	margin-right: 10px;
	z-index: 2000;
}

/* Marker Highlight (for flashing) */
.highlight-marker {
		background-color: green;
		border-radius: 50%;
		border: 2px solid white;
		box-shadow: 0 0 5px green;
		width: 15px;
		height: 15px;
		transform: translate(-50%, -50%);
}
/* === POPUP TITLE STYLING (Tiêu đề THÔNG TIN CHI TIẾT KCHT) === */

/* Áp dụng cho tiêu đề trong Pop-up chi tiết tài sản (từ Search) */
#details-popup .popup-content h4 {
		color: #003366; /* Màu xanh đậm */
		font-size: 14px; /* Kích thước lớn hơn */
		text-transform: uppercase;
		margin-top: 0; 
		border-bottom: 1px solid #ddd;
		padding-bottom: 5px;
		margin-bottom: 10px;
}

/* Áp dụng cho tiêu đề trong Pop-up của Leaflet (từ GetFeatureInfo/Click bản đồ) */
.leaflet-popup-content h4 {
		color: #003366; /* Màu xanh đậm */
		font-size: 14px; /* Kích thước lớn hơn */
		text-transform: uppercase;
		margin: 0 0 10px 0; /* Thiết lập margin cho Leaflet popup */
		padding-bottom: 5px;
		border-bottom: 1px solid #ddd;
}


/* === POPUP IMAGE STYLING (Slideshow) === */
/* Style cho row Tổng số ảnh và nút Xem ảnh */
.image-summary-row {
		border-top: 1px solid #ccc;
}

.image-summary-row td {
		font-weight: bold;
		padding-top: 5px !important;
}

.image-summary-row .view-images-btn {
		margin-left: 10px;
		padding: 3px 8px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: default;
		font-size: 0.9em;
		font-weight: normal;
}

.image-summary-row .view-images-btn:hover {
		background-color: #0056b3;
}

/* #image-popup: Cấu hình mặc định cho Desktop (ĐÃ SỬA ĐỔI VỊ TRÍ) */
#image-popup {
		position: fixed;
		z-index: 5000;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 8px;
		box-shadow: 0 4px 10px rgba(0,0,0,0.3);
		overflow: hidden;

		bottom: 10px;
		right: 10px;
		top: auto;
		left: auto;
		transform: none;

		max-width: 90vw;
		max-height: 90vh;

		/* Cố định kích thước ban đầu, không cho tự thay đổi */
		width: 600px;
		height: 450px;

		/* Vô hiệu hóa resize mặc định của trình duyệt */
		resize: none;
}

/* ĐIỀU CHỈNH: Màu nền tiêu đề cho "Ảnh) */
#image-popup .popup-header {
		background: #007bff; 
}

/* Header và nút đóng */
#image-popup .header {
		background-color: #007bff;
		color: white;
		padding: 8px 15px;
		cursor: move; /* Cho phép kéo */
		display: flex;
		justify-content: space-between;
		align-items: center;
}

#image-popup .content {
		padding: 15px;
		overflow-y: auto; /* Cho phép cuộn nếu nội dung (ảnh) quá lớn */
		max-height: calc(90vh - 40px); /* Điều chỉnh max-height cho nội dung */
}

#image-popup img {
		/* Đảm bảo ảnh không bị tràn ra ngoài pop-up */
		max-width: 100%; 
		height: auto;
		display: block;
}

/* Container cho Slideshow */
.slideshow-container {
	position: relative;
	width: 100%;
	height: auto; /* Chiều cao tự động theo nội dung */
	max-height: 400px; /* Giới hạn chiều cao tối đa (tùy chọn) */
	text-align: center;
}

/* Thêm hoặc kiểm tra quy tắc này để ảnh có thể co giãn */
.slideshow-container img {
	width: 100%; /* Đảm bảo ảnh chiếm hết chiều rộng 400px của popup */
	height: auto; /* Quan trọng: Đảm bảo chiều cao ảnh tự động theo tỷ lệ */
	max-height: 400px; /* Giới hạn chiều cao ảnh bên trong (tùy chọn) */
	object-fit: contain; 
	border-radius: 4px;
}

/* Các Slide (mặc định ẩn) */
.mySlides {
		display: none;
}

.mySlides img {
		max-width: 100%;
		height: auto;
		display: block; 
		border-radius: 4px;
}

/* Nút Previous & Next */
.prev, .next {
		cursor: default;
		position: absolute;
		top: 50%;
		width: auto;
		padding: 16px;
		margin-top: -22px;
		color: white;
		font-weight: bold;
		font-size: 18px;
		transition: 0.6s ease;
		border-radius: 0 3px 3px 0;
		user-select: none;
		background-color: rgba(0,0,0,0.4);
		z-index: 10;
}

.next {
		right: 0;
		border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
		background-color: rgba(0,0,0,0.8);
}

/* Caption Text */
.slide-caption {
		color: #444;
		font-size: 15px;
		padding: 8px 12px;
		position: relative;
		text-align: center;
		margin-top: 5px;
		display: none !important;
}
/* Dots/Bullets/Indicators */
.dot {
		cursor: default;
		height: 15px;
		width: 15px;
		margin: 0 2px;
		background-color: #bbb;
		border-radius: 50%;
		display: inline-block;
		transition: background-color 0.6s ease;
}

.active, .dot:hover {
		background-color: #717171;
}

/* Animation Fade */
.fade {
		animation-name: fade;
		animation-duration: 1.5s;
}

@keyframes fade {
		from {opacity: .4} 
		to {opacity: 1}
}

/* Style cho thông báo loading/lỗi */
.loading-message, .error-message {
		text-align: center;
		padding: 20px;
		color: #555;
		font-style: italic;
}
/* Bộ đếm ảnh (Ví dụ: 1 / 5) */
.numbertext {
		color: #f2f2f2;
		font-size: 14px;
		padding: 6px 10px;
		position: absolute;
		bottom: 0px; /* Đặt ở dưới cùng */
		right: 0px;	/* Đặt ở góc phải */
		background-color: rgba(0, 0, 0, 0.7); /* Nền tối trong suốt */
		border-radius: 4px 0 0 0; /* Bo góc trên trái cho đẹp */
		z-index: 10;
}

/* Quan trọng: Định vị relative cho slide để .numbertext hoạt động đúng */
.mySlides {
		display: none;
		position: relative; 
}

@media (max-width: 600px) {
    /* Áp dụng cho TẤT CẢ các pop-up (Chi tiết, Kết quả, Ảnh) */
    .popup {
        /* Ghi đè lại các thuộc tính vị trí tuyệt đối/cố định */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        /* Chiếm toàn bộ màn hình */
        width: 100% !important;
        height: 100% !important;

        /* Đảm bảo nằm trên mọi thứ */
        z-index: 10000;

        /* Đảm bảo nội dung cuộn được */
        overflow-y: auto;

        /* Đảm bảo pop-up nằm ở vị trí cố định trên màn hình */
        position: fixed !important;

        /* Khử viền bo tròn nếu có */
        border-radius: 0;
    }
    /* Đảm bảo Image Popup luôn ở trên cùng trên mobile */
    #image-popup {
        z-index: 10001 !important;
    }
    /* Đảm bảo nội dung bên trong cũng giãn ra */
    .popup-content,
    .leaflet-popup-content, /* Cửa sổ Chi tiết */
    #results-table-popup .popup-content { /* Cửa sổ Kết quả */
        height: auto;
        max-height: none;
        padding: 10px;
    }

    /* Làm cho header nổi bật để dễ đóng */
    .popup-header {
        background-color: #f1f1f1;
        position: sticky; /* Giữ header ở trên cùng khi cuộn */
        top: 0;
        z-index: 10001;
    }

    /* Định vị lại thanh tìm kiếm cho phone */
    #search-container {
        width: 95%;
        left: 2.5%;
        right: 2.5%;
        margin: 0;
    }
}