﻿.curriculumDetail {
	
}
.curriculumDetail td{
	border: 1px solid #EBE9E1;
}
	.curriculumDetail thead tr {
		background-color: #a62823;
	}
.curriculumDetail thead tr th{
	padding: 10px 5px;
	color: #fff;
	font-family: "Roboto Bold", Helvetica Neue, Helvetica, Arial, sans-serif;
	border: 1px solid #EBE9E1;
}
.curriculumDetail tbody tr.toptitle{
	background-color: #EEEEEA;
}
.curriculumDetail tbody tr.toptitle td{
	padding: 7px 5px;	
	font-family: "Roboto Bold", Helvetica Neue, Helvetica, Arial, sans-serif;
	border: 1px solid #EBE9E1;
}
.curriculumDetail tbody tr.level2 td{
	padding: 7px 5px 7px 15px;	
	font-family: "Roboto Bold", Helvetica Neue, Helvetica, Arial, sans-serif;
	border: 1px solid #EBE9E1;
}
.curriculumDetail tbody tr.level3 td{
	padding: 7px 5px 7px 25px;	
	border: 1px solid #EBE9E1;
}
.curriculumDetail tbody tr.level4 td{
	padding: 7px 5px 7px 35px;	
	border: 1px solid #EBE9E1;
}
.curriculumDetail tbody tr td{
	padding: 7px 5px 7px 5px;	
	border: 1px solid #EBE9E1;
}
.course-detail {
	padding: 0 0 10px 0;	
}
.course-detail span{
	font-family: "Roboto Bold", Helvetica Neue, Helvetica, Arial, sans-serif;
}
.course-detail span:first-child{
	display: inline-block;
	width: 150px;
}
.course-detail span:last-child{
	color: #b00;
}
#selectedCurrId {
	font-size: 14px;
}

.ui-widget-header {
	border: none;
	background: none;
	padding: 0;
	margin: 0;
}

.ui-tabs .ui-tabs-nav {
	padding: 0;
	margin: 0;
	margin-bottom: 20px;
}

.ui-tabs .ui-tabs-panel {
	padding: 10px 0;
	border: 1px solid #BB0000;
}

.ui-tabs .ui-tabs-nav li {
	display: inline-block;
	margin: 0;
	padding: 8px 15px;
	background-color:#f5f5f5;
}

	.ui-tabs .ui-tabs-nav li:before {
		content: '';
	}
	.ui-tabs .ui-tabs-nav li.ui-state-active {
		background-color: #BB0000;
	}
	.ui-tabs .ui-tabs-nav li a {
		text-decoration: none;
	}
	.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
		color: #fff !important;
		background-color: #BB0000;
	}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
	border: 1px solid #BB0000;
	background: #BB0000;
}

.semeter thead tr th.nobd {
	border: 0 solid #fff;
}

.semeter thead tr th.nobg {
	background: none;
	color: #333;
	font-weight: 700;
	text-align: left;
}

.semeter thead tr th {
	background-color: #f8f8f4;
	border: 1px solid #EBE9E1;
	color: #333;
	text-align: center;
	padding: 5px;
}

.semeter tbody tr td {
	border: 1px solid #EBE9E1;
	color: #333;
	padding: 5px;
}

.user-markup a.actived {
	color: red;
	-webkit-text-decoration-color: red;
	-moz-text-decoration-color: red;
	text-decoration-color: red;
}
.tb_course {
	width: 100%;
}

/*.tabNavigation {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	gap: 16px;
	border-bottom: 1px solid #e5e7eb;
}

	.tabNavigation li {
		margin: 0;
	}

		.tabNavigation li a {
			display: inline-block;
			padding: 8px 0;
			color: #111;
			text-decoration: none;
		}

		.tabNavigation li.active a {
			font-weight: 600;
			border-bottom: 2px solid #c62828;
		}
*/

/* ===== Tabs – Clearer UI (works with/without jQuery UI) ===== */
:root {
	--tabs-accent: #c62828; /* màu nhấn (đỏ) */
	--tabs-text: #1f2937; /* chữ */
	--tabs-muted: #6b7280; /* chữ nhạt */
	--tabs-border: #e5e7eb; /* viền nhạt */
	--tabs-bg: #f9fafb; /* nền thanh tabs */
	--tabs-bg-active: #ffffff; /* nền tab active */
}

.tabs {
	margin-top: 12px;
}

	/* Thanh tabs: reset & layout */
	.tabs .tabNavigation,
	.ui-tabs .ui-tabs-nav {
		list-style: none;
		margin: 0 0 8px 0;
		padding: 10px;
		display: flex;
		gap: 8px;
		align-items: center;
		border: 1px solid var(--tabs-border);
		border-radius: 10px;
		background: var(--tabs-bg);
		overflow: auto; /* mobile: kéo ngang */
		-webkit-overflow-scrolling: touch; /* mượt trên iOS */
	}

/* Ẩn viền/màu mặc định của jQuery UI */
.ui-tabs .ui-tabs-nav {
	border: 1px solid var(--tabs-border) !important;
	background: var(--tabs-bg) !important;
}

	/* Mục tab */
	.tabs .tabNavigation li,
	.ui-tabs .ui-tabs-nav li {
		margin: 0;
		padding: 0;
		white-space: nowrap; /* không xuống dòng chữ tab */
	}

		/* Link tab */
		.tabs .tabNavigation a,
		.ui-tabs .ui-tabs-nav li a {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 10px 14px;
			border-radius: 8px;
			text-decoration: none;
			color: var(--tabs-muted);
			font-weight: 500;
			transition: background-color .2s ease, color .2s ease;
		}

			/* Hover/Focus */
			.tabs .tabNavigation a:hover,
			.ui-tabs .ui-tabs-nav li a:hover {
				background: rgba(0,0,0,0.04);
				color: var(--tabs-text);
			}

			.tabs .tabNavigation a:focus-visible,
			.ui-tabs .ui-tabs-nav li a:focus-visible {
				outline: 2px solid rgba(198,40,40,.35);
				outline-offset: 2px;
				border-radius: 8px;
			}

		/* Active state – Fallback script (li.active) */
		.tabs .tabNavigation li.active a {
			color: var(--tabs-accent);
			background: var(--tabs-bg-active);
			position: relative;
		}

			.tabs .tabNavigation li.active a::after {
				content: "";
				position: absolute;
				left: 10px;
				right: 10px;
				bottom: -9px; /* nằm ngay dưới thanh tabs */
				height: 2px;
				background: var(--tabs-accent);
				border-radius: 2px;
			}

		/* Active state – jQuery UI (.ui-tabs-active) */
		.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
		.ui-tabs .ui-tabs-nav li.ui-state-active a {
			color: var(--tabs-accent) !important;
			background: var(--tabs-bg-active) !important;
			position: relative;
		}

			.ui-tabs .ui-tabs-nav li.ui-tabs-active a::after,
			.ui-tabs .ui-tabs-nav li.ui-state-active a::after {
				content: "";
				position: absolute;
				left: 10px;
				right: 10px;
				bottom: -9px;
				height: 2px;
				background: var(--tabs-accent);
				border-radius: 2px;
			}

/* Panel nội dung tab */
.tabs .tab-panel,
.ui-tabs .ui-tabs-panel {
	border: 1px solid var(--tabs-border);
	border-radius: 10px;
	background: #fff;
	padding: 16px;
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

	/* Nếu bạn có table bên trong panel: làm mượt viền, khoảng cách */
	.tabs .tab-panel table,
	.ui-tabs .ui-tabs-panel table {
		margin-bottom: 0;
		border-collapse: collapse;
	}

		.tabs .tab-panel table th,
		.tabs .tab-panel table td,
		.ui-tabs .ui-tabs-panel table th,
		.ui-tabs .ui-tabs-panel table td {
			border-top: 1px solid var(--tabs-border);
		}

		.tabs .tab-panel table thead th,
		.ui-tabs .ui-tabs-panel table thead th {
			border-top: none;
		}

/* Mobile tinh chỉnh */
@media (max-width: 767.98px) {
	.tabs .tabNavigation,
	.ui-tabs .ui-tabs-nav {
		gap: 6px;
		padding: 6px;
	}

		.tabs .tabNavigation a,
		.ui-tabs .ui-tabs-nav li a {
			padding: 8px 12px;
			font-size: 14px;
		}
}

/* Tuỳ chọn: “dính” thanh tabs phía trên khi cuộn (bỏ comment nếu muốn) */
/*
.tabs .tabNavigation,
.ui-tabs .ui-tabs-nav {
  position: sticky;
  top: 64px; 
  z-index: 10;
  backdrop-filter: saturate(140%) blur(6px);
}
*/

