* { 	margin: 0; 	padding: 0; 	box-sizing: border-box; 	 	font-family: Arial }  :root { 	--primary: #4a90e2; 	--primary-dark: #3a7bc8; 	--secondary: #50e3c2; 	--light: #f8f9fa; 	--dark: #343a40; 	--success: #28a745; 	--danger: #dc3545; 	--warning: #ffc107; 	--info: #17a2b8; 	--border: #e0e0e0; 	--shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 	--shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.12); }  body { 	background-color: #f5f7fa; 	color: #333; 	line-height: 1.1;  }  h1 { 	font-size: 1.1rem; 	font-weight: 100;  	letter-spacing: 1px; }    header { 	 	top: 0; 	left: 0; 	width: 100%; 	 	box-shadow: var(--shadow); 	z-index: 1000; 	padding: 1px 0; 	 }		 .navbar { 	display: grid;  	grid-template-columns: auto 1fr;  	 	background-color: rgb(231,231,231); 	padding: 4px; } .navbar a { 	color: #000033; 	text-decoration: none; 	margin: 0 4px;  } .navbar img { 	height: 50px;  } .navbar-right {     display: grid;  	grid-template-columns: 1fr;  	gap: 10px;  	padding: 4px; } .navbar-right-row1 { 	justify-self: end;  } .navbar-right-row1 label { 	color: gray; 	font-size: 0.8rem; 	margin: 0 4px; } .navbar-right-row1 a { 	color: gray; 	font-size: 0.8rem; 	margin: 0; } .navbar-right-row2 { 	justify-self: start;  }    .sidebar { 	position: fixed; 	left: 0; 	top: 70px; 	width: 250px; 	height: calc(100vh - 70px); 	background-color: white; 	box-shadow: var(--shadow); 	padding: 20px 0; 	overflow-y: auto; 	z-index: 900; } .sidebar-menu { 	list-style: none; } .sidebar-menu li { 	margin-bottom: 5px; } .sidebar-menu a { 	display: flex; 	align-items: center; 	padding: 12px 20px; 	color: var(--dark); 	text-decoration: none; 	transition: all 0.3s; } .sidebar-menu a:hover, .sidebar-menu a.active { 	background-color: rgba(74, 144, 226, 0.1); 	color: var(--primary); 	border-left: 4px solid var(--primary); } .sidebar-menu i { 	margin-right: 10px; 	width: 24px; 	text-align: center; }    .main-content { 	margin-top: 8px; 	 	padding: 30px; 	min-height: calc(100vh - 8px); }  .page-title-test { 	 	margin-bottom: 10px; 	color: red; 	display: flex; 	justify-content: center; 	place-items: center; 	background-color: #FFF58B; 	min-height: 30px; } .page-title { 	 	margin-bottom: 10px; 	color: var(--dark); 	display: flex; 	justify-content: space-between; 	align-items: center; }  .btn { 	display: inline-flex; 	align-items: center; 	justify-content: center; 	padding: 10px 10px; 	border-radius: 6px; 	font-weight: 500; 	cursor: pointer; 	transition: all 0.3s; 	border: none; 	text-decoration: none; }  .btn-primary { 	background-color: var(--primary); 	color: white; }  .btn-primary:hover { 	background-color: var(--primary-dark); }  .btn-sm { 	padding: 6px 12px; 	font-size: 0.875rem; }   .search-container { 	background: white; 	border-radius: 12px; 	padding: 10px; 	margin-bottom: 10px; 	box-shadow: var(--shadow); } .search-form { 	display: flex; 	gap: 4px; 	flex-wrap: wrap; 	align-items: center;  } .search-form-control1 { 	width: 108px; 	padding: 10px 10px; 	border: 1px solid var(--border); 	border-radius: 8px; 	font-size: 1rem; } .search-form-control2 { 	width: 108px; 	padding: 10px 10px; 	border: 1px solid var(--border); 	border-radius: 8px; 	font-size: 1rem; }  .search-form a { 	background-color: #f0f0f0; 	color: #333; } .search-return-null { 	text-align: center; 	padding: 50px 20px; 	background: white; 	border-radius: 12px; 	box-shadow: var(--shadow); }    .houses-grid { 	display: grid; 	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 	gap: 25px; 	margin-bottom: 30px; }  .house-card { 	background: white; 	border-radius: 12px; 	overflow: hidden; 	box-shadow: var(--shadow); 	transition: transform 0.3s, box-shadow 0.3s; } .house-card:hover { 	transform: translateY(-5px); 	box-shadow: var(--shadow-hover); } .house-card a { 	text-decoration: none; 	 }  .house-card-top { 	position: relative; } .house-card-top img { 	width: 100%; 	height: 200px; 	object-fit: cover; 	display: block;  } .house-card-top-i-div { 	width: 100%; 	height: 200px; 	display: block; 	text-align: center;  	line-height: 200px;  } .house-card-top-i-div i { 	font-size: 60px; 	color: #fccada; } .house-card-top .top-badge { 	position: absolute; 	top: 15px; 	left: 15px; 	background-color: var(--warning); 	color: black; 	padding: 5px 10px; 	border-radius: 4px; 	font-size: 0.8rem; 	font-weight: 500; 	z-index: 10; } .house-tag-1 { 	position: absolute; 	top: 15px; 	left: 15px; 	display: grid;  	grid-template-columns: 1fr 1fr;  	 */ 	 	 	 	 	 	 	 	z-index: 11; } .house-tag-1 div { 	 	 		 	background-color: var(--warning); 	color: black; 	padding: 5px 10px; 	border-radius: 4px; 	font-size: 0.8rem; 	font-weight: 500; 	z-index: 12; }  .house-status { 	position: absolute; 	top: 15px; 	right: 15px; 	padding: 5px 10px; 	border-radius: 20px; 	font-size: 0.8rem; 	font-weight: 500; 	z-index: 10; } .status-已下架 { background-color: var(--danger); color: white; } .status-已租 { background-color: var(--info); color: white; } .status-在租 { background-color: var(--success); color: white; } .status-已售 { background-color: var(--info); color: white; } .status-在售 { background-color: #b02fba; color: white; } .overlay {      position: absolute;     top: 160px;     left: 0;     width: 100%;     height: 40px;      background-color: rgba(0, 0, 0, 0.5);      color: white; 	    	 	align-items: center;  	      	display: grid; 	    	     opacity: 1;      transition: opacity 0.5s ease;  	font-size: 0.8rem; 	overflow-y: auto;  	 	padding: 4px; } .show-test {      position: absolute;     top: 80px;     left: 0;     width: 100%;     height: 30px;          color: white;	    	place-items: center;  	display: grid; 	padding: 4px; }  .house-card-body { 	padding: 10px; }  .house-card-title { 	font-size: 1.1rem; 	margin-bottom: 10px; 	color: var(--dark); 	display: -webkit-box; 	-webkit-line-clamp: 1; 	-webkit-box-orient: vertical; 	overflow: hidden; }  .house-meta { 	display: flex; 	justify-content: space-between; 	margin-bottom: 10px; 	padding-bottom: 10px; 	border-bottom: 1px solid var(--border); } .house-meta div { 	text-align: center; 	flex: 1; } .house-meta div span { 	display: block; 	font-size: 0.9rem; 	color: #777; 	margin-bottom: 5px; } .house-meta div strong { 	font-size: 0.9rem; 	color: var(--primary); }  .house-region { 	display: flex; 	align-items: center; 	color: #555; 	font-size: 0.9rem; 	margin-bottom: 0px; } .house-region i { 	margin-right: 8px; 	color: var(--primary); }  .house-actions { 	display: flex; 	gap: 10px; }   .pagination { 	display: flex; 	justify-content: center; 	list-style: none; 	margin-top: 30px; }  .pagination li { 	margin: 0 5px; }  .pagination a { 	display: block; 	width: 40px; 	height: 40px; 	line-height: 40px; 	text-align: center; 	border-radius: 8px; 	background: white; 	color: var(--dark); 	text-decoration: none; 	box-shadow: var(--shadow); 	transition: all 0.3s; }  .pagination a:hover, .pagination a.active { 	background-color: var(--primary); 	color: white; }   .form-container { 	max-width: 800px; 	margin: 0 auto; 	background: white; 	border-radius: 12px; 	padding: 30px; 	box-shadow: var(--shadow); } .editform-div1 { 	border-top: 1px solid var(--border); 	 	 	margin-bottom: 30px; 	padding: 10px; 	background: rgb(236,225,236); } .editform-div2 { 	border-top: 1px solid var(--border); 	 	 	margin-bottom: 30px; 	padding: 10px; 	background: rgb(226,243,235); } .editform-div-radio { 	padding: 8px; } .editform-div-radio label { 	margin-right: 8px; } .form-group { 	margin-top: 10px; 	margin-bottom: 10px; } .form-group label { 	display: block; 	margin: 8px; 	font-weight: 500; 	color: var(--dark); }  .form-control { 	width: 100%; 	padding: 12px 15px; 	border: 1px solid var(--border); 	border-radius: 8px; 	font-size: 1rem; 	transition: border-color 0.3s; }  .form-control:focus { 	border-color: var(--primary); 	outline: none; 	box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2); }  textarea.form-control { 	min-height: 150px; 	resize: vertical; }  .form-row { 	display: flex; 	gap: 20px; } .form-row .form-group { 	flex: 1; }  .image-upload { 	border: 2px dashed var(--border); 	border-radius: 8px; 	padding: 30px; 	text-align: center; 	margin-bottom: 20px; 	background-color: #fafafa; 	cursor: pointer; 	transition: all 0.3s; }  .image-upload:hover { 	border-color: var(--primary); 	background-color: #f0f8ff; }  .image-upload i { 	font-size: 3rem; 	color: #ccc; 	margin-bottom: 15px; }  .image-preview { 	display: grid; 	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 	gap: 15px; 	margin-top: 20px; }  .preview-item { 	position: relative; 	border-radius: 8px; 	overflow: hidden; 	box-shadow: 0 3px 6px rgba(0,0,0,0.1); 	transition: all 0.3s; }  .preview-item:hover { 	transform: translateY(-3px); 	box-shadow: 0 6px 12px rgba(0,0,0,0.15); }  .preview-item img { 	width: 100%; 	height: 120px; 	object-fit: cover; 	display: block; }  .preview-item .remove-btn { 	position: absolute; 	top: 5px; 	right: 5px; 	width: 24px; 	height: 24px; 	background-color: rgba(220, 53, 69, 0.8); 	color: white; 	border-radius: 50%; 	display: flex; 	align-items: center; 	justify-content: center; 	cursor: pointer; 	opacity: 0.8; 	transition: opacity 0.3s; }  .preview-item .remove-btn:hover { 	opacity: 1; }  .preview-item .sort-handle { 	position: absolute; 	top: 5px; 	left: 5px; 	width: 24px; 	height: 24px; 	background-color: rgba(74, 144, 226, 0.8); 	color: white; 	border-radius: 50%; 	display: flex; 	align-items: center; 	justify-content: center; 	cursor: move; 	opacity: 0.8; 	transition: opacity 0.3s; }  .preview-item .sort-handle:hover { 	opacity: 1; }   .alert { 	padding: 15px 20px; 	margin-bottom: 20px; 	border-radius: 8px; 	display: flex; 	align-items: center; } .alert-success { 	background-color: #d4edda; 	color: #155724; 	border: 1px solid #c3e6cb; } .alert i { 	margin-right: 10px; 	font-size: 1.2rem; } .close-alert { 	margin-left: auto; 	cursor: pointer; 	font-size: 1.2rem; 	opacity: 0.7; 	transition: opacity 0.3s; } .close-alert:hover { 	opacity: 1; }   summary {      list-style: none;      cursor: pointer;      font-weight: bold;   color: #2c3e50;   padding: 8px 0;   border-bottom: 1px solid #eee; }  summary::before {   content: "▼";    display: inline-block;   margin-right: 8px;   font-size: 12px;   transition: transform 0.2s;  }  details[open] summary::before {   transform: rotate(180deg);  }      footer {     background-color: #333;      color: rgb(206,206,206);  	font-size: 0.8rem;     padding: 20px;      text-align: center;  }  .footer-content p {     margin: 10px 0;  }      @media (max-width: 992px) { 	.sidebar { 		 		width: 0px; 	} 	 	.main-content { 		 		margin-left: 0px; 	} }  @media (max-width: 768px) { 	.sidebar { 		 		 		width: 0px; 		padding: 0; 	} 	 	.sidebar-menu span { 		display: none; 	} 	 	.sidebar-menu i { 		margin-right: 0; 		font-size: 1.2rem; 	} 	 	.main-content { 		 		margin-left: 0px; 		padding: 20px 15px; 	} 	 	.houses-grid { 		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 	} 	 	.form-row { 		flex-direction: column; 		gap: 0; 	} 	 	 }  @media (max-width: 576px) { 	.sidebar { 		display: none; 	} 	 	.main-content { 		margin-left: 0; 	} 	 	 }