/* =========================================================
   BlogSite Pro - Khối chủ đề trang chủ (front-page.php)
   Mỗi khối = 1 chuyên mục: 1 bài mới nhất (to) + 4 bài cũ hơn (nhỏ)
   ========================================================= */

/* =========================================================
   Banner tuỳ chỉnh trang chủ (Tuỳ chỉnh > Homepage)
   ========================================================= */
.homepage-custom-banner{
	margin:24px 0 8px;
}
.homepage-custom-banner a{
	display:block;
}
.homepage-custom-banner img{
	display:block;
	width:100%;
	height:auto;
	border-radius:6px;
}

.topic-blocks-home{
	width:100%;
	padding:0;
}

.topic-block{
	margin-top:52px;
}
.topic-block:first-child{
	margin-top:10px;
}

.topic-block-head{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:20px;
	margin-bottom:22px;
}
.topic-block-head-left{
	display:flex;
	align-items:baseline;
	gap:12px;
}
.topic-block-code{
    display:none;
	font-family:'JetBrains Mono', Consolas, monospace;
	font-weight:700;
	font-size:12px;
	color:#fff;
	background:var(--tb-accent, #0389ff);
	padding:3px 8px;
	border-radius:3px;
	letter-spacing:.04em;
	white-space:nowrap;
}
.topic-block-title{
	font-family:'Roboto', Arial, sans-serif;
	font-size:24px;
	font-weight:700;
	color:#20242c;
	margin:0;
}
.topic-block-title a{
	color:inherit;
	text-decoration:none;
}
.topic-block-rule{
	flex:1;
	height:1px;
	background:#e5e1d7;
	margin:0 6px;
}
.topic-block-more{
	font-size:13px;
	font-weight:700;
	color:var(--tb-accent, #0389ff);
	white-space:nowrap;
	text-decoration:none;
}
.topic-block-more:hover{
	text-decoration:underline;
}

.topic-block-grid{
	display:grid;
	grid-template-columns:1.55fr 1fr;
	gap:28px;
	align-items:start;
}

/* ---- Bài mới nhất (to) ---- */
.topic-featured{
	position:relative;
}
.topic-featured-thumb{
	position:relative;
	display:block;
	width:100%;
	aspect-ratio:16/9;
	border-radius:6px;
	overflow:hidden;
	background:var(--tb-accent, #0389ff);
}
.topic-featured-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.topic-featured-code-tag{
    display:none;
	position:absolute;
	top:0;
	left:20px;
	background:var(--tb-accent, #0389ff);
	color:#fff;
	font-family:'JetBrains Mono', Consolas, monospace;
	font-weight:700;
	font-size:12px;
	padding:6px 10px 5px;
	letter-spacing:.05em;
	clip-path:polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
	z-index:2;
}
.topic-featured-meta{
	display:flex;
	gap:10px;
	align-items:center;
	margin-top:16px;
	font-size:12.5px;
	color:#7a7d84;
	font-family:'JetBrains Mono', Consolas, monospace;
}
.topic-featured-meta .sep{
	width:3px;
	height:3px;
	border-radius:50%;
	background:#7a7d84;
	flex:none;
}
.topic-featured-title{
	font-family:'Roboto', Arial, sans-serif;
	font-size:25px;
	line-height:1.3;
	font-weight:700;
	margin:10px 0 0;
}
.topic-featured-title a{
	color:#20242c;
	text-decoration:none;
	transition:color .15s;
}
.topic-featured-title a:hover{
	color:var(--tb-accent, #0389ff);
}
.topic-featured-excerpt{
	font-size:15px;
	line-height:1.65;
	color:#5b5f68;
	margin-top:12px;
	max-width:58ch;
}
.topic-featured-readmore{
	display:inline-block;
	margin-top:14px;
	font-size:13px;
	font-weight:700;
	color:var(--tb-accent, #0389ff);
	border-bottom:1.5px solid var(--tb-accent, #0389ff);
	padding-bottom:2px;
	text-decoration:none;
}

/* ---- 4 bài cũ hơn (nhỏ) ---- */
.topic-minor-list{
	display:flex;
	flex-direction:column;
}
.topic-minor-item{
	display:flex;
	gap:14px;
	align-items:flex-start;
	padding:14px 0;
	border-bottom:1px solid #e5e1d7;
}
.topic-minor-item:first-child{
	padding-top:2px;
}
.topic-minor-item:last-child{
	border-bottom:none;
}
.topic-minor-thumb{
	flex:none;
	display:block;
	width:76px;
	height:76px;
	border-radius:5px;
	overflow:hidden;
	background:#eee;
	border:1px solid #e5e1d7;
}
.topic-minor-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.topic-minor-body{
	min-width:0;
}
.topic-minor-title{
	font-size:14.5px;
	font-weight:600;
	line-height:1.4;
	margin:0;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.topic-minor-title a{
    font-size: medium;
	color:#20242c;
	text-decoration:none;
}
.topic-minor-title a:hover{
	color:var(--tb-accent, #0389ff);
}
.topic-minor-date{
	font-family:'JetBrains Mono', Consolas, monospace;
	font-size:11px;
	color:#7a7d84;
	margin-top:6px;
	letter-spacing:.02em;
}

@media (max-width:860px){
	.topic-block-grid{
		grid-template-columns:1fr;
	}
}
@media (max-width:600px){
	.topic-block-title{
		font-size:20px;
	}
	.topic-featured-title{
		font-size:21px;
	}
}