:root {
  --primary:#2a5bd7;
  --text:#1a1a1a;
  --muted:#5b5b5b;
  --bg:#f7f9fc;
  --card:#ffffff4f;
	--card2:#ffffff7a;
  --border:#e6eaf2;
}

nav.year-tabs {
	width: 90%;
	/* background: #ffffff81; */
	background: none;
	border-bottom: 1px solid var(--border);
}
nav.year-tabs .wrap {
	max-width: 1024px;
	margin: 0 auto;
	display: flex;
	gap: 12px;
	padding: 12px 24px;
}
nav.year-tabs button {
	appearance: none;
	border: 1px solid var(--border);
	background: #fff;
	color: var(--text);
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	font-weight: 600;
	box-shadow: #555 0px 1px 9px -3px;
	transition: 0.3s;
}
nav.year-tabs button:hover{
	background: #6ec3fc;
	border: 1px solid #6cb5e6;
}
nav.year-tabs button.active {
	background: var(--primary);
	color: #fff;
	border-color: transparent;
}

.div-article-main {
	max-width: 1024px;
	margin: 24px auto;
	padding: 0 24px;
}
.div-article-main2 {
	margin: 24px auto;
	padding: 0 30px;
}

.release-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}
.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	display: flex;
	flex-direction: column;
	max-width: 330px;
	transition: 0.2s;
}
.card:hover{
	transform: scale(1.03);
}

.thumb {
	aspect-ratio: 16/9;
	background: #c4d6ff47;
	display: flex;
	align-items: center;
	justify-content: center;
}
.thumb svg {
	width: 60%;
	height: 60%;
}
.thumb img {
	width: 14%;
}

.card .content {
	padding: 16px;
}
.card .meta {
	color: var(--muted);
	font-size: 10px;
	margin-bottom: 8px;
}
.card .meta2 {
	color: var(--muted);
	font-size: 14px;
	margin-bottom: 10px;
}
.card h3 {
	margin: 6px 0 8px;
	font-size: 12px;
}
.card p {
	margin: 0 0 10px;
	color: #333;
	min-height: 82px;
}
.card .quote {
	font-style: italic;
	color: #444;
	border-left: 3px solid var(--border);
	padding-left: 10px;
}
.card .cta {
	margin-top: auto;
	padding: 12px 16px;
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.card .cta a {
	color: var(--primary);
	font-weight: 600;
	text-decoration: none;
}

.pagination {
	margin: 20px 0 8px;
	display: flex;
	gap: 6px;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.pagination .page-info {
	color: var(--muted);
	font-size: 12px;
	margin-right: auto;
}
.pagination button.page, .pagination span.ellipsis {
	appearance: none;
	border: 1px solid var(--border);
	background: #fff;
	color: #1a1a1a;
	padding: 6px 10px;
	border-radius: 8px;
	min-width: 36px;
}
.pagination button.page {
	cursor: pointer;
}
.pagination span.ellipsis {
	cursor: default;
	color: var(--muted);
}
.pagination button.page.active {
	background: var(--primary);
	color: #fff;
	border-color: transparent;
	font-weight: 700;
}

section.year {
	display: none;
}
section.year.active {
	display: block;
}



/* Announcement */

.release-grid2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
	gap: 12px;
}
.card2 {
	background: var(--card2);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	display: flex;
	flex-direction: column;
	max-width: 500px;
	transition: 0.2s;
}
.card2:hover{
	transform: scale(1.03);
}
.card2 a{
	text-decoration: none;
}
.card2 a div p{
	color: #337ab7;
}

.card2 .content {
	padding: 16px;
}
.card2 .meta {
	color: var(--muted);
	font-size: 10px;
	margin-bottom: 8px;
}
.card2 .meta2 {
	color: var(--muted);
	font-size: 14px;
	margin-bottom: 10px;
}
.card2 h3 {
	margin: 6px 0 8px;
	font-size: 12px;
}
.card2 p {
	margin: 0 0 10px;
	color: #333;
}
.card2 .quote {
	font-style: italic;
	color: #444;
	border-left: 3px solid var(--border);
	padding-left: 10px;
}
.card2 .cta {
	margin-top: auto;
	padding: 12px 16px;
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.card2 .cta a {
	color: var(--primary);
	font-weight: 600;
	text-decoration: none;
}


/* Mobile View */

@media screen and (max-width: 450px){
nav.year-tabs{
	width: unset;
}
nav.year-tabs .wrap {
	padding: 0;
}
.div-article-main{
	margin: 0;
	padding: 0;
}
.div-article-main2{
	margin: 0;
	padding: 0;
}
.pagination .page-info {
	display: none;
}

.pagination{
	margin: 10px 0 8px;
	align-items: center;
	justify-content: center;
}

.release-grid{
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.release-grid2{
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card{
	max-width: unset;
}
.thumb{
	aspect-ratio: 5 / 2;
}
.thumb img{
	width: 10%;
}

.card .content{
	padding: 10px 7px;
}
.card p{
	font-size: 12px;
	min-height: 69px;
}
.card .cta a {
	font-size: 12px;
}

.card2 p{
	font-size: 12px;
	margin: 0;
}

}