:root {
			--secondary-color: #3498db;
			--accent-color: #e74c3c;
			--light-color: #ecf0f1;
			--dark-color: #2c3e50;
			--success-color: #2ecc71;
		}

		.hero {
			background: linear-gradient(135deg, #ffffff00, #3498db52), url(/upload/images/2025/7/9da2f6cb1a86998e.png) no-repeat;
			background-size: cover;
			color: white;
			padding: 3rem 0;
			text-align: center;
		}

		.hero h1 {
			font-size: 2.5rem;
			margin-bottom: 1rem;
		}

		.hero p {
			font-size: 1.2rem;
			max-width: 700px;
			margin: 0 auto;
		}

		.search-container {
			max-width: 600px;
			margin: 2rem auto 0;
			position: relative;
		}

		.search-container input {
			width: 100%;
			padding: 12px 20px;
			border-radius: 30px;
			border: none;
			font-size: 1rem;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		}

		.search-container button {
			position: absolute;
			right: 5px;
			top: 5px;
			background: var(--secondary-color);
			border: none;
			color: white;
			padding: 7px 20px;
			border-radius: 30px;
			cursor: pointer;
			transition: background 0.3s;
		}

		.search-container button:hover {
			background: #2980b9;
		}

		.section-title::after {
			content: none;
		}

		.main-content {
			display: flex;
			margin: 2rem 0;
			gap: 2rem;
		}

		.sidebar {
			flex: 0 0 250px;
			background: white;
			border-radius: 8px;
			padding: 1.5rem;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		}

		.categories h3,
		.popular-questions h3 {
			margin-bottom: 1rem;
			padding-bottom: 0.5rem;
			border-bottom: 2px solid var(--light-color);
		}

		.categories ul,
		.popular-questions ul {
			list-style: none;
		}

		.categories li,
		.popular-questions li {
			margin-bottom: 0.8rem;
		}

		.categories a,
		.popular-questions a {
			color: var(--dark-color);
			text-decoration: none;
			display: block;
			padding: 0.5rem 0;
			transition: color 0.3s;
		}

		.categories a:hover,
		.popular-questions a:hover {
			color: var(--secondary-color);
		}

		.categories a.active {
			color: var(--secondary-color);
			font-weight: bold;
		}

		.content {
			flex: 1;
		}

		.section-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 1.5rem;
		}

		.section-title h2 {
			font-size: 1.5rem;
			color: var(--primary-color);
		}

		.sort-options select {
			padding: 8px 12px;
			border-radius: 4px;
			border: 1px solid #ddd;
		}

		.question-list {
			background: white;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		}

		.question-item {
			border-bottom: 1px solid var(--light-color);
			padding: 1.5rem;
			cursor: pointer;
			transition: background 0.3s;
		}

		.question-item:last-child {
			border-bottom: none;
		}

		.question-item:hover {
			background: #f9f9f9;
		}

		.question-item:hover .question-title {
			color: var(--primary-color);
		}

		.question-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 0.5rem;
		}

		.question-title {
			font-size: 1.1rem;
			font-weight: 600;
		}

		.question-date {
			color: #7f8c8d;
			font-size: 0.9rem;
		}

		.question-preview {
			color: #666;
			margin-bottom: 1rem;
		}

		.question-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;
		}

		.tag {
			background: var(--light-color);
			padding: 4px 10px;
			border-radius: 20px;
			font-size: 0.8rem;
			color: var(--dark-color);
		}

		.tag.design {
			background: #e1f5fe;
			color: #0277bd;
		}

		.tag.manufacturing {
			background: #e8f5e9;
			color: #2e7d32;
		}

		.tag.materials {
			background: #fff3e0;
			color: #ef6c00;
		}

		.tag.troubleshooting {
			background: #fce4ec;
			color: #ad1457;
		}

		.question-detail {
			display: none;
			margin-top: 1rem;
			padding-top: 1rem;
			border-top: 1px dashed #ddd;
		}

		.question-detail.active {
			display: block;
		}

		.answer {
			background: #f8f9fa;
			padding: 1rem;
			border-radius: 6px;
			margin-top: 1rem;
		}

		.answer-header {
			display: flex;
			align-items: center;
			margin-bottom: 0.5rem;
		}

		.expert-badge {
			background: var(--success-color);
			color: white;
			padding: 2px 8px;
			border-radius: 4px;
			font-size: 0.7rem;
			margin-left: 0.5rem;
		}

		.pagination {
			display: flex;
			justify-content: center;
			margin-top: 2rem;
			gap: 0.5rem;
		}

		.pagination button {
			background: white;
			border: 1px solid #ddd;
			padding: 8px 15px;
			border-radius: 4px;
			cursor: pointer;
			transition: all 0.3s;
		}

		.pagination button.active {
			background: var(--secondary-color);
			color: white;
			border-color: var(--secondary-color);
		}

		.pagination button:hover:not(.active) {
			background: #f1f1f1;
		}



		@media (max-width: 768px) {
			.main-content {
				flex-direction: column;
			}

			.sidebar {
				flex: 1;
			}


		}