/* ============================================================
   BLOG CARDS, CATEGORY ARCHIVE, SINGLE POST & PAGINATION
   Đồng bộ chuẩn theo mẫu 3557_vatlieuxaydung cho VicUni Education
   ============================================================ */

/* 1. MỞ RỘNG KHUNG TRANG ARCHIVE / CATEGORY FULL WIDTH & CHỐNG TRÀN */
.blog-archive,
.archive.category,
#content.blog-archive {
	overflow-x: hidden;
}

.blog-archive .row.align-center > .large-10.col,
.archive .row.align-center > .large-10.col {
	flex-basis: 100% !important;
	max-width: 100% !important;
}

/* 1.1. HEADER TIÊU ĐỀ TRANG DANH MỤC / BLOG */
.archive-page-header {
	padding-top: 28px !important;
	padding-bottom: 16px !important;
	margin-bottom: 26px !important;
	text-align: center !important;
}

/* BREADCRUMB ĐIỀU HƯỚNG */
.archive-breadcrumb {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	font-size: 0.86rem !important;
	color: #64748b !important;
	margin-bottom: 12px !important;
}

.archive-breadcrumb a {
	color: #64748b !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

.archive-breadcrumb a:hover {
	color: var(--vue-primary, #11479b) !important;
}

.archive-breadcrumb .breadcrumb-separator {
	color: #cbd5e1 !important;
	font-size: 0.95rem !important;
	line-height: 1 !important;
}

.archive-breadcrumb .current {
	color: #0f172a !important;
	font-weight: 600 !important;
}

/* TIÊU ĐỀ CHÍNH TRANG */
.archive-page-header .page-title {
	font-size: clamp(1.65rem, 3.2vw, 2.3rem) !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	margin: 0 0 14px 0 !important;
	text-align: center !important;
	line-height: 1.3 !important;
}

/* BỘ NÚT CHUYỂN DANH MỤC NHANH (CATEGORY PILLS FILTER) */
.archive-category-pills-wrap {
	display: flex !important;
	justify-content: center !important;
	margin: 16px 0 10px 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.archive-category-pills {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	background: #f8fafc !important;
	padding: 6px 8px !important;
	border-radius: 50px !important;
	border: 1px solid #e2e8f0 !important;
	max-width: 100% !important;
}

.archive-category-pills .cat-pill {
	padding: 7px 18px !important;
	border-radius: 50px !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: #475569 !important;
	text-decoration: none !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	white-space: nowrap !important;
	display: inline-block !important;
	background: transparent !important;
}

.archive-category-pills .cat-pill:hover {
	color: var(--vue-primary, #11479b) !important;
	background: rgba(17, 71, 155, 0.08) !important;
}

.archive-category-pills .cat-pill.active {
	background: var(--vue-primary, #11479b) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(17, 71, 155, 0.3) !important;
}

/* 2. KHUNG THẺ CARD BÀI VIẾT (BLOG POST CARD - [blog_posts] & Archive) */
.box-blog-post {
	background: #ffffff !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.05) !important;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
	border: 1px solid #e2e8f0 !important;
	cursor: pointer !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}

.col.post-item:hover .box-blog-post,
.box-blog-post.has-hover:hover,
.box-blog-post:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 16px 32px -10px rgba(17, 71, 155, 0.12) !important;
	border-color: #93c5fd !important;
}

/* KHUNG ẢNH ĐẠI DIỆN BÀI VIẾT */
.box-blog-post .box-image {
	width: 100% !important;
	position: relative !important;
	overflow: hidden !important;
	display: block !important;
	background: #f8fafc !important;
	border-radius: 14px 14px 0 0 !important;
}

.box-blog-post .box-image .image-cover {
	position: relative !important;
	width: 100% !important;
	padding-top: 60% !important;
	height: 0 !important;
	overflow: hidden !important;
	display: block !important;
}

.box-blog-post .box-image img,
.box-blog-post .box-image .image-cover img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 14px 14px 0 0 !important;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.box-blog-post:hover .box-image img,
.box-blog-post:hover .box-image .image-cover img {
	transform: scale(1.08) !important;
}

/* KHUNG NỘI DUNG CHỮ TRONG CARD */
.box-blog-post .box-text {
	text-align: left !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
	background: #ffffff !important;
}

.box-blog-post .box-text-inner.blog-post-inner {
	padding: 20px 22px 22px 22px !important;
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
}

.box-blog-post .post-meta.is-small,
.box-blog-post .is-divider,
.box-blog-post .badge.post-date {
	display: none !important;
}

/* NHÃN DANH MỤC (CATEGORY BADGE) */
.fatraly-card-cat {
	display: inline-block !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	color: var(--vue-primary, #11479b) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin-bottom: 8px !important;
}

/* TIÊU ĐỀ BÀI VIẾT */
.box-blog-post .post-title {
	font-size: 1.08rem !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	line-height: 1.45 !important;
	margin-bottom: 10px !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	min-height: 46px !important;
}

.box-blog-post .post-title a {
	color: #0f172a !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

.box-blog-post .post-title a:hover,
.box-blog-post:hover .post-title a {
	color: var(--vue-primary, #11479b) !important;
}

/* MÔ TẢ TRÍCH DẪN (EXCERPT) */
.box-blog-post .from_the_blog_excerpt {
	font-size: 0.88rem !important;
	color: #475569 !important;
	line-height: 1.65 !important;
	margin-bottom: 16px !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.col.post-item,
.col.post-item > .col-inner,
.col.post-item > .col-inner > a.plain {
	overflow: visible !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.col.post-item > .col-inner,
.col.post-item > .col-inner > a.plain {
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}

.col.post-item .box-blog-post {
	height: 100% !important;
}

/* FOOTER META CARD (NGÀY ĐĂNG TRÁI + LƯỢT XEM PHẢI) */
.fatraly-card-meta {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	font-size: 0.82rem !important;
	color: #94a3b8 !important;
	margin-top: auto !important;
	padding-top: 12px !important;
	border-top: 1px solid #f1f5f9 !important;
	width: 100% !important;
	font-weight: 500 !important;
}

.fatraly-card-date,
.fatraly-card-views {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.fatraly-card-date i,
.fatraly-card-views i {
	font-size: 0.85rem !important;
	line-height: 1 !important;
	color: #94a3b8 !important;
	display: inline-block !important;
	transition: color 0.2s ease !important;
}

.box-blog-post:hover .fatraly-card-views i,
.box-blog-post:hover .fatraly-card-date i {
	color: var(--vue-primary, #11479b) !important;
}

/* 3. PHÂN TRANG TRÒN CHUẨN TAKESHI (PAGINATION) */
#post-list,
.nav-pagination-container,
.woocommerce-pagination {
	text-align: center !important;
	clear: both !important;
}

#post-list .nav-pagination,
.nav-pagination-container ul.page-numbers,
ul.page-numbers.nav-pagination,
.nav-pagination {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 100% !important;
	gap: 10px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 40px auto 30px auto !important;
	border: none !important;
	float: none !important;
	clear: both !important;
	text-align: center !important;
}

#post-list .nav-pagination li,
.nav-pagination-container ul.page-numbers li,
.nav-pagination li {
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	float: none !important;
}

.nav-pagination li a,
.nav-pagination li span,
.page-numbers a,
.page-numbers span {
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	min-height: 42px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	border: 1px solid #cbd5e1 !important;
	background: #ffffff !important;
	color: #334155 !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.nav-pagination li span.current,
.page-numbers.current {
	background: var(--vue-primary, #11479b) !important;
	color: #ffffff !important;
	border-color: var(--vue-primary, #11479b) !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 12px rgba(17, 71, 155, 0.35) !important;
}

.nav-pagination li a:hover,
.page-numbers a:hover {
	background: #ffffff !important;
	color: var(--vue-primary, #11479b) !important;
	border-color: var(--vue-primary, #11479b) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* 4. SINGLE POST HERO HEADER & TYPOGRAPHY */
.blog-featured-title.featured-title {
	position: relative !important;
	min-height: 360px !important;
	display: flex !important;
	align-items: flex-end !important;
	overflow: hidden !important;
}

.blog-featured-title .page-title-bg {
	position: absolute !important;
	inset: 0 !important;
}

.blog-featured-title .page-title-bg .title-bg {
	width: 100% !important;
	height: 100% !important;
	background-size: cover !important;
	background-position: center center !important;
}

.blog-featured-title .page-title-inner {
	position: relative !important;
	z-index: 2 !important;
	min-height: auto !important;
	padding-bottom: 40px !important;
	padding-top: 40px !important;
	justify-content: flex-start !important;
}

.blog-featured-title .page-title-inner .flex-col {
	text-align: left !important;
	align-items: flex-start !important;
	justify-content: flex-end !important;
}

.blog-featured-title .entry-title {
	font-size: clamp(1.8rem, 3.8vw, 2.65rem) !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	line-height: 1.3 !important;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4) !important;
	margin: 0 !important;
}

.tt-breadcrumb {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 0.88rem !important;
	color: #cbd5e1 !important;
	margin-bottom: 14px !important;
	flex-wrap: wrap !important;
	font-weight: 500 !important;
}

.tt-breadcrumb a {
	color: #60a5fa !important;
	transition: color 0.2s ease, opacity 0.2s ease !important;
	text-decoration: none !important;
	font-weight: 700 !important;
}

.tt-breadcrumb a:hover {
	color: var(--vue-gold, #d4a018) !important;
}

.tt-breadcrumb .sep {
	color: #94a3b8 !important;
	font-weight: bold !important;
}

.tt-breadcrumb .cur {
	color: #ffffff !important;
	font-weight: 600 !important;
}

.blog-featured-title .entry-category,
.blog-featured-title .entry-divider,
.blog-featured-title .entry-meta {
	display: none !important;
}

.single-post .entry-content p {
	font-size: 1.04rem !important;
	color: #334155 !important;
	line-height: 1.85 !important;
	margin-bottom: 20px !important;
}

.single-post .entry-content h2 {
	font-size: 1.55rem !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	margin: 36px 0 16px !important;
	padding-bottom: 10px !important;
	border-bottom: 3px solid var(--vue-primary, #11479b) !important;
	display: inline-block !important;
}

.single-post .entry-content h3 {
	font-size: 1.28rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 26px 0 12px !important;
}

.single-post .entry-content ul,
.single-post .entry-content ol {
	margin: 0 0 22px 0 !important;
	padding: 0 0 0 18px !important;
	color: #334155 !important;
	line-height: 1.8 !important;
	font-size: 1.02rem !important;
}

.single-post .entry-content li {
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
}

.single-post .entry-content blockquote {
	position: relative !important;
	margin: 30px 0 !important;
	padding: 20px 26px !important;
	background: #eef4fc !important;
	border-left: 4px solid var(--vue-primary, #11479b) !important;
	border-radius: 0 12px 12px 0 !important;
	font-style: italic !important;
	color: #1e293b !important;
	font-size: 1.04rem !important;
	line-height: 1.8 !important;
}

.single-post .entry-content blockquote p {
	margin: 0 !important;
	color: #1e293b !important;
}

.single-post .entry-content table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 24px 0 30px 0 !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05) !important;
}

.single-post .entry-content table th {
	background: var(--vue-primary, #11479b) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	padding: 12px 16px !important;
	border: 1px solid #1e56b3 !important;
	text-align: left !important;
}

.single-post .entry-content table td {
	padding: 12px 16px !important;
	border: 1px solid #e2e8f0 !important;
	color: #334155 !important;
	font-size: 0.96rem !important;
}

.single-post .entry-content table tbody tr:nth-child(even) {
	background: #f8fafc !important;
}