.tcnn-wrap {
	max-width: 100%;
	font-family: inherit;
	box-sizing: border-box;
}
.tcnn-wrap * { box-sizing: border-box; }

.tcnn-search-row { margin-bottom: 12px; }
.tcnn-input {
	width: 100%;
	padding: 10px 12px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.tcnn-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
	align-items: flex-end;
}
.tcnn-filter-group { display: flex; flex-direction: column; min-width: 200px; flex: 1; }
.tcnn-filter-group label { font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.tcnn-filter-group select {
	height: 180px;
	padding: 4px;
	overflow-y: auto;
}
.tcnn-filter-hint { color: #777; font-size: 12px; margin-top: 4px; }

.tcnn-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tcnn-btn {
	padding: 8px 16px;
	border: 1px solid #ccc;
	background: #f7f7f7;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
}
.tcnn-btn:hover { background: #eee; }
.tcnn-btn-primary { background: #2271b1; color: #fff; border-color: #2271b1; }
.tcnn-btn-primary:hover { background: #135e96; }

.tcnn-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.tcnn-table th, .tcnn-table td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; font-size: 14px; }
.tcnn-table th { background: #f0f0f1; }
.tcnn-table tr:nth-child(even) { background: #fafafa; }

#tcnn-hint-msg, #tcnn-empty-msg { color: #666; font-style: italic; }

@media (max-width: 600px) {
	.tcnn-filter-row { flex-direction: column; align-items: stretch; }
	.tcnn-filter-group { width: 100%; }

	.tcnn-table, .tcnn-table thead, .tcnn-table tbody, .tcnn-table th, .tcnn-table td, .tcnn-table tr {
		display: block;
	}
	.tcnn-table thead tr { position: absolute; top: -9999px; left: -9999px; }
	.tcnn-table tr { margin-bottom: 12px; border: 1px solid #ddd; }
	.tcnn-table td {
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 45%;
	}
	.tcnn-table td:before {
		position: absolute;
		left: 10px;
		width: 40%;
		white-space: nowrap;
		font-weight: 600;
	}
	.tcnn-table td:nth-of-type(1):before { content: "Tiếng Anh"; }
	.tcnn-table td:nth-of-type(2):before { content: "Tiếng Việt"; }
	.tcnn-table td:nth-of-type(3):before { content: "Ghi chú"; }
	.tcnn-table td:nth-of-type(4):before { content: "Chuyên ngành phụ"; }
	.tcnn-table td:nth-of-type(5):before { content: "Chuyên ngành chính"; }
}