/* File: template-page.css */

/* Wrapper container */
#wrapper {
	font-family: 'Inter', sans-serif;
}

/* Main container */
#wrapper .container {
	max-width: 1200px;
	margin: 0 auto; /* Căn giữa container */
	padding: 20px;
}

/* Title page - Tiêu đề */
#wrapper .title-page {
	font-size: 30px; /* Tăng kích thước font */
	color: #ffffff; /* Đổi màu text */
	/* Căn giữa text */
	margin-bottom: 30px;
	line-height: 1.3;
}

/* Content page - Nội dung */
#wrapper .content-page {
	font-size: 16px; /* Tăng kích thước font content */
	color: #ffffff; /* Đổi màu text content */
	line-height: 1.6;
	margin: 0 auto; /* Căn giữa content */
}
#wrapper .content-page h1, #wrapper .content-page h2, #wrapper .content-page h3, #wrapper .content-page h4, #wrapper .content-page h5, #wrapper .content-page h6 {
	color:#e2fe35;
	padding: 20px 0;
	font-weight: 700; /* Chữ mỏng */
}
#wrapper .content-page p{
	font-size: 16px; 
	color: #ffffff; 
	line-height: 1.6;
	padding-bottom: 1em;
}

#wrapper .content-page a {
	color: #e2fe35;
	text-decoration:none
}

#wrapper .content-page ul {
	margin-left:1.2em
}
#wrapper .content-page table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom:1em
}

#wrapper .content-page th, .article-content td {
	border: 1px solid #444; /* Viền tối */
	padding: 12px;
	text-align: left;
}

#wrapper .content-page th {
	background-color: #333; /* Màu nền tiêu đề cột */
	color: #f5a623; /* Màu chữ vàng cam cho tiêu đề */
	font-size: 16px;
}

#wrapper .content-page tr:nth-child(even) {
	background-color: #232323; 
}

#wrapper .content-page tr:nth-child(odd) {
	background-color: #1a1a1a; 
}

#wrapper .content-page tr:hover {
	background-color: #555; 
}

#wrapper .content-page td {
	color: #f5f5f5; /* Chữ màu sáng để dễ đọc */
	font-family: Arial, sans-serif;
	font-size: 14px;
	padding:15px
}
#wrapper .content-page .wp-caption {
	margin:0 auto
}

#wrapper .content-page .wp-caption-text {
	font-size: 14px !important;
	text-align:center;
	font-style:italic;
	color:#ddd;
	margin-bottom:1em
}


/* Responsive cho mobile */
@media (max-width: 768px) {
	#wrapper .title-page {
		font-size: 24px;
		margin-bottom: 20px;
	}

	#wrapper .content-page {
		font-size: 16px;
		padding: 0 15px;
	}

	#wrapper .container {
		padding: 15px;
	}
}
/* Table of Contents Styles */
.table-of-contents {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	padding: 20px;
	margin: 30px 0;
	backdrop-filter: blur(10px);
	position: relative;
}

.toc-title {
	color: #e2fe35 !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	margin: 0 0 15px 0 !important;
	padding: 0 !important;
	display: inline-block;
}

.toc-toggle {
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
	color: #ffffff;
	font-size: 14px;
	user-select: none;
	display: flex;
	align-items: center;
	gap: 5px;
}

.toc-toggle:hover {
	color: #e2fe35;
}

.toc-toggle-icon {
	font-size: 18px;
	font-weight: bold;
}

.toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.toc-item {
	margin: 8px 0;
}

.toc-link {
	color: #ffffff;
	text-decoration: none;
	display: block;
	padding: 8px 12px;
	border-radius: 4px;
	transition: all 0.3s ease;
	font-size: 14px;
	line-height: 1.4;
}

.toc-link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #e2fe35;
	text-decoration: none;
}

.toc-link.active {
	background: rgba(226, 254, 53, 0.2);
	color: #e2fe35;
	border-left: 3px solid #e2fe35;
	padding-left: 9px;
}

.toc-number {
	color: #e2fe35;
	font-weight: 600;
	margin-right: 8px;
}

/* Indentation for different heading levels */
.toc-h2 .toc-link { padding-left: 24px; }
.toc-h3 .toc-link { padding-left: 36px; }
.toc-h4 .toc-link { padding-left: 48px; }
.toc-h5 .toc-link { padding-left: 60px; }
.toc-h6 .toc-link { padding-left: 72px; }

/* Main content spacing */
.main-content {
	margin-top: 20px;
}

/* Responsive */
@media (max-width: 768px) {
	.table-of-contents {
		padding: 15px;
		margin: 20px 0;
	}

	.toc-toggle {
		top: 15px;
		right: 15px;
		font-size: 13px;
	}

	.toc-link {
		font-size: 13px;
		padding: 6px 10px;
	}

	.toc-h2 .toc-link { padding-left: 20px; }
	.toc-h3 .toc-link { padding-left: 30px; }
	.toc-h4 .toc-link { padding-left: 40px; }
	.toc-h5 .toc-link { padding-left: 50px; }
	.toc-h6 .toc-link { padding-left: 60px; }
}

/* Hide TOC by default, show only when content has headings */
.table-of-contents {
	display: none;
}