/**
 * Kangnam Blog (archive) styles.
 * Extracted from production reference: tin-tuc/bai-viet-htlx
 */

:root {
	--color-primary: #003c77;
	--color-primary-light: #eaf2fa;
	--color-secondary: #1264ba;
	--primary-color: #003c77;
}

/* ---------- Offset for fixed Kangnam header ---------- */
.kn-blog {
	padding-top: 110px;
	padding-bottom: 100px;
}
@media (max-width: 1024px) { .kn-blog { padding-top: 70px; } }
@media (max-width: 600px) { .kn-blog { padding-top: 55px; } }

/* ---------- Minimal Bootstrap-like grid ---------- */
.kn-blog .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.kn-blog .row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.kn-blog .row > [class^="col-"] { padding: 0 15px; box-sizing: border-box; width: 100%; }
@media (min-width: 992px) {
	.kn-blog .col-lg-8 { width: 66.6667%; }
	.kn-blog .col-lg-4 { width: 33.3333%; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb_1_0_0 { width: 100%; background: var(--color-primary-light); padding: 8px 0; margin-bottom: 15px; }
.breadcrumb_1_0_0 .container { padding: 0 15px; max-width: 1200px; margin: 0 auto; }
.breadcrumb_1_0_0 p { margin: 0; }
.breadcrumb_1_0_0 span { color: #333; }
.breadcrumb_1_0_0 a { color: var(--primary-color); }
.breadcrumb_1_0_0 a:hover { opacity: .8; }
.breadcrumb_1_0_0 .sep { margin: 0 6px; color: #999; }

/* ---------- Category list (cate_1_0_0) ---------- */
.cate_1_0_0 { padding-bottom: 20px; }
.cate_1_0_0__box { padding: 10px 0 0; margin-bottom: 25px; border-bottom: 1px dotted #ddd; }
.cate_1_0_0__title {
	margin: 10px 0 5px; font-size: 22px; font-weight: 700;
	color: var(--color-primary); text-transform: uppercase;
}
.cate_1_0_0__info {
	font-size: 15px; text-align: justify; padding: 10px;
	background: #f8f9fd; border-radius: 4px;
}
.cate_1_0_0__info p { margin: 0; }

.cate_1_0_0__time { color: #9d9d9d; display: block; margin: 5px 0; font-size: 14px; font-style: italic; }
.cate_1_0_0__time a { color: #9d9d9d; }
.cate_1_0_0__time a:hover { color: var(--color-primary); text-decoration: underline; }

.cate_1_0_0__content .media {
	display: flex; align-items: flex-start;
	margin-bottom: 20px; padding-bottom: 20px;
	border-bottom: 1px dotted #d8d8d8;
}
.cate_1_0_0__contentPic { width: 250px; flex-shrink: 0; }
.cate_1_0_0__contentPic a { position: relative; display: block; }
.cate_1_0_0__contentPic img {
	width: 100%; height: 170px; object-fit: cover; border-radius: 4px; display: block;
}
.cate_1_0_0__contentBody { flex: 1; padding-left: 15px; min-width: 0; }
.cate_1_0_0__contentTitle {
	font-weight: 600; color: #000; font-size: 18px; margin: 0;
	line-height: 1.4;
}
.cate_1_0_0__contentTitle a { color: inherit; }
.cate_1_0_0__contentTitle a:hover { color: var(--color-secondary); }
.cate_1_0_0__contentDesc {
	margin: 8px 0 0; text-align: justify; font-size: 15px;
	color: #555; line-height: 1.55;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cate_1_0_0__contentMore { padding-top: 10px; }
.cate_1_0_0__contentMore a {
	background: #fff; color: #c2c2c2;
	padding: 5px 15px; border-radius: 8px; border: 1px solid #ccc;
	font-size: 13px;
}
.cate_1_0_0__contentMore a:hover { border-color: var(--color-secondary); color: var(--color-secondary); }

@media (max-width: 600px) {
	.cate_1_0_0__title { color: var(--color-primary); font-size: 18px; }
	.cate_1_0_0__contentTitle { font-size: 15px; }
	.cate_1_0_0__contentPic { width: 130px; }
	.cate_1_0_0__contentPic img { height: 90px; }
	.cate_1_0_0__contentDesc { display: none; }
	.cate_1_0_0__time { font-size: 12px; margin: 2px; }
}

/* ---------- Pagination ---------- */
.kn-pagination { display: flex; gap: 6px; justify-content: center; margin: 24px 0; flex-wrap: wrap; }
.kn-pagination .page-numbers {
	min-width: 38px; height: 38px; padding: 0 12px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid #d8d8d8; border-radius: 4px;
	color: #333; font-size: 14px; text-decoration: none;
	background: #fff;
}
.kn-pagination .page-numbers:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.kn-pagination .page-numbers.current {
	background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.kn-pagination .page-numbers.dots { border: none; background: transparent; }

/* ---------- Sidebar: Hot Q&A ---------- */
.hot_knhd_1_0_0 {
	background: #f8f9fd; border-radius: 14px; padding: 14px 16px; margin-bottom: 20px;
	font-family: var(--primary-font, "Montserrat", sans-serif);
}
.hot_knhd_1_0_0__head {
	font-weight: 700; color: var(--color-primary);
	font-size: 16px; margin-bottom: 10px;
	text-transform: uppercase; letter-spacing: .02em;
}
.hot_knhd_1_0_0__list { display: flex; flex-direction: column; gap: 4px; }
.hot_knhd_1_0_0__item {
	display: flex; gap: 6px; padding: 8px 0;
	border-bottom: 1px solid #e6e8ef;
}
.hot_knhd_1_0_0__item:last-child { border-bottom: none; }
.hot_knhd_1_0_0__item > span { color: var(--color-secondary); font-weight: 700; flex-shrink: 0; }
.hot_knhd_1_0_0__itemText { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.45; }
.hot_knhd_1_0_0__itemText a { color: #202124; }
.hot_knhd_1_0_0__itemText a:hover { color: var(--color-secondary); text-decoration: underline; }

/* ---------- Sidebar: Related list ---------- */
.sidebarTag_kn_2_0_0 {
	list-style: none; margin: 0 0 15px; padding: 12px;
	background: #f8f9fd; border-radius: 14px;
	font-family: var(--primary-font, "Montserrat", sans-serif);
}
.sidebarTag_kn_2_0_0__head {
	font-weight: 700; color: var(--color-primary);
	font-size: 16px; margin-bottom: 8px; text-transform: uppercase;
}
.sidebarTag_kn_2_0_0__item {
	padding: 12px 0; border-bottom: 1px solid #e6e8ef;
}
.sidebarTag_kn_2_0_0__item:last-of-type { border-bottom: none; }
.sidebarTag_kn_2_0_0__link {
	display: flex; gap: 12px; text-decoration: none; color: inherit;
}
.sidebarTag_kn_2_0_0__link:hover .sidebarTag_kn_2_0_0__title { text-decoration: underline; color: var(--color-secondary); }
.sidebarTag_kn_2_0_0__thumb { width: 88px; flex-shrink: 0; }
.sidebarTag_kn_2_0_0__thumb img {
	width: 100%; height: 66px; object-fit: cover; border-radius: 8px; display: block;
}
.sidebarTag_kn_2_0_0__content { flex: 1; min-width: 0; }
.sidebarTag_kn_2_0_0__title {
	font-size: 14px; line-height: 1.45; margin: 0 0 4px; color: #202124;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-weight: 500;
}
.sidebarTag_kn_2_0_0__meta {
	font-size: 12px; color: #5f6368; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}

@media (max-width: 991px) {
	.kn-blog aside.col-lg-4 { margin-top: 30px; }
}

/* ---------- Single post: sticky sidebar ---------- */
@media (min-width: 992px) {
	.kn-blog--single .container > .row {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		column-gap: 30px;
		margin-left: 0;
		margin-right: 0;
		align-items: start;
	}
	.kn-blog--single .container > .row > .col-lg-8,
	.kn-blog--single .container > .row > .col-lg-4 {
		width: 100%;
		max-width: 100%;
	}
	/* CSS sticky fallback when JS is unavailable */
	.kn-blog--single:not(.kn-blog--sticky-js) .kn-blog-sidebar--sticky {
		position: sticky;
		top: 110px;
	}
	.kn-blog--single .kn-blog-sidebar--sticky {
		width: 100%;
		box-sizing: border-box;
		max-height: calc(100vh - 130px);
		overflow-y: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		z-index: 5;
	}
	.kn-blog--single .kn-blog-sidebar--sticky::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
}
.kn-blog--single .kn-blog__aside {
	position: relative;
}
@media (max-width: 991px) {
	.kn-blog--single .kn-blog__aside { position: static; }
	.kn-blog--single .kn-blog-sidebar--sticky {
		max-height: none;
		overflow: visible;
	}
}

/* ---------- Sidebar blocks (single post) ---------- */
.kn-sidebar-block {
	background: #f8f9fd;
	border-radius: 14px;
	padding: 14px 16px;
	margin-bottom: 20px;
	font-family: var(--primary-font, "Montserrat", sans-serif);
}
.kn-sidebar-block__head {
	font-weight: 700;
	color: var(--color-primary);
	font-size: 16px;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* Sidebar search — full width, compact */
.kn-search-form--sidebar {
	max-width: none;
	margin: 0;
	border-radius: 8px;
}
.kn-search-form--sidebar input[type="search"] {
	height: 42px;
	font-size: 14px;
	padding: 0 14px;
}
.kn-search-form--sidebar button {
	padding: 0 14px;
}
.kn-search-form--sidebar button span { display: none; }

/* Featured services list */
.kn-sidebar-services__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.kn-sidebar-services__item {
	border-bottom: 1px solid #e6e8ef;
	padding: 8px 0;
}
.kn-sidebar-services__item:last-child { border-bottom: none; }
.kn-sidebar-services__link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}
.kn-sidebar-services__link:hover .kn-sidebar-services__title {
	color: var(--color-secondary);
	text-decoration: underline;
}
.kn-sidebar-services__thumb {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
}
.kn-sidebar-services__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kn-sidebar-services__title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #202124;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Sidebar lead form — reuse footer form styles from home.css */
.kn-sidebar-form { padding: 0; background: transparent; }
.kn-sidebar-form__box {
	margin: 0;
	border-radius: 14px;
}
.kn-sidebar-form .lien-he__form-title { font-size: 15px; }
.kn-sidebar-form .lien-he__submit { width: 100%; }

/* Latest posts — title only (no date meta) */
.kn-sidebar-latest .sidebarTag_kn_2_0_0__meta { display: none; }

/* ============================================================
   SINGLE POST  (post_1_0_0 + post_author_1_0_0 + postOther)
   ============================================================ */

.post_1_0_0__title {
	margin: 10px 0 12px;
	font-size: 26px;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1.3;
}
@media (max-width: 600px) { .post_1_0_0__title { font-size: 20px; } }

/* Author / date row */
.post_author_1_0_0 {
	display: flex; flex-wrap: wrap; gap: 4px 18px;
	font-size: 14px; padding: 0; margin: 0 0 18px;
	color: #555; list-style: none;
}
.post_author_1_0_0 li { display: flex; align-items: center; gap: 6px; }
.post_author_1_0_0 p { margin: 0; }
.post_author_1_0_0 a { color: #105496; font-weight: 600; }
.post_author_1_0_0 a:hover { text-decoration: underline; }
.post_author_1_0_0__iconDate,
.post_author_1_0_0__iconPerson,
.post_author_1_0_0__iconView {
	width: 18px; height: 18px; flex-shrink: 0;
	background: center/contain no-repeat;
}
.post_author_1_0_0__iconDate   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23105496' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); }
.post_author_1_0_0__iconPerson { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23105496' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
.post_author_1_0_0__iconView   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23105496' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>"); }

/* Article body */
.post_1_0_0 {
	color: #000;
	line-height: 1.8;
	font-size: 17px;
	padding-top: 10px;
	font-family: var(--primary-font, "Montserrat", sans-serif);
}
.post_1_0_0 p { margin: 10px 0; text-align: justify; }
.post_1_0_0 h2 { font-size: 22px; font-weight: 700; color: var(--color-primary); margin: 24px 0 12px; }
.post_1_0_0 h3 { font-size: 19px; font-weight: 700; margin: 20px 0 10px; }
.post_1_0_0 h4 { font-size: 17px; font-weight: 700; margin: 18px 0 8px; }
.post_1_0_0 a  { color: var(--color-secondary); font-weight: 700; }
.post_1_0_0 a:hover { text-decoration: underline; }
.post_1_0_0 ul, .post_1_0_0 ol { padding-left: 24px; margin: 12px 0; }
.post_1_0_0 li { margin: 6px 0; }
.post_1_0_0 img { max-width: 100%; height: auto; }
.post_1_0_0 iframe { width: 100%; border: none; }

.post_1_0_0 .aligncenter {
	margin: 20px auto; text-align: center; display: block;
	max-width: 100%;
}
.post_1_0_0 .aligncenter img { margin: 0 auto; display: block; border-radius: 4px; }
.post_1_0_0 p.wp-caption-text {
	text-align: center; font-style: italic; font-size: 14px; color: #666; margin-top: 4px;
}

.post_1_0_0 blockquote {
	border: 2px dashed #25c757;
	background: #f5fff7;
	margin: 18px 0;
	padding: 12px 20px;
	border-radius: 6px;
	font-size: 16px;
}
.post_1_0_0 blockquote p { margin: 6px 0; }

.post_1_0_0 table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 16px 0;
	font-size: 15px;
}
.post_1_0_0 table tr:first-child {
	background: var(--color-primary);
	color: #fff;
	font-weight: 600;
	text-align: center;
}
.post_1_0_0 table td {
	border: 1px solid #dedede;
	padding: 8px 12px;
}

@media (max-width: 600px) {
	.post_1_0_0 { font-size: 15px; line-height: 1.7; }
	.post_1_0_0 h2 { font-size: 18px; }
	.post_1_0_0 h3 { font-size: 16px; }
}

/* CTA banner image (top/bottom of post) */
.cta-img { display: block; margin: 16px 0; }
.cta-img img {
	max-width: 100%; height: auto; display: block; border-radius: 8px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.cta-img:hover img {
	transform: scale(1.02);
	box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* "Bài viết được quan tâm" related grid */
.postOther_mz_1_3_0 { margin-top: 40px; }
.postOther_mz_1_3_0__titleOther {
	text-transform: uppercase;
	color: var(--color-primary);
	font-size: 22px; font-weight: 700;
	margin: 30px 0 20px; text-align: center;
}
.postOther_mz_1_3_0__box {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
@media (max-width: 768px) { .postOther_mz_1_3_0__box { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .postOther_mz_1_3_0__box { grid-template-columns: 1fr; } }
.postOther_mz_1_3_0__item { display: flex; flex-direction: column; }
.postOther_mz_1_3_0__pic {
	display: block; border-radius: 6px; overflow: hidden; position: relative;
	margin-bottom: 8px;
}
.postOther_mz_1_3_0__pic img {
	width: 100%; height: 160px; object-fit: cover; display: block;
}
.postOther_mz_1_3_0__text { flex: 1; }
.postOther_mz_1_3_0__title {
	font-size: 15px; font-weight: 600; margin: 8px 0 0; line-height: 1.4;
}
.postOther_mz_1_3_0__title a { color: #202124; }
.postOther_mz_1_3_0__title a:hover { color: var(--color-secondary); }

/* Sidebar sticky banner (banner_knsb) */
.banner_knsb_1_0_0 {
	position: sticky;
	top: 180px;
	margin: 20px 0;
	border-radius: 8px;
	overflow: hidden;
}
.banner_knsb_1_0_0 img { width: 100%; display: block; border-radius: 8px; }
@media (max-width: 991px) { .banner_knsb_1_0_0 { position: static; margin: 40px auto; } }

/* ============================================================
   SEARCH RESULTS  (kn-search-head / form / empty)
   ============================================================ */

/* Search page: full-width column, content centered */
.kn-search-main { max-width: 760px; margin: 0 auto; }
@media (min-width: 992px) {
	.kn-blog .col-lg-12 { width: 100%; }
}

.kn-search-head {
	padding: 26px 20px;
	margin-bottom: 28px;
	text-align: center;
	background: linear-gradient(135deg, var(--color-primary-light) 0%, #f8f9fd 100%);
	border: 1px solid #e1e9f3;
	border-radius: 10px;
}
.kn-search-head__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1.35;
}
.kn-search-head__title span {
	color: var(--color-secondary);
	font-style: italic;
}
.kn-search-head__count {
	margin: 8px 0 0;
	font-size: 14px;
	color: #5f6368;
}
.kn-search-head__count strong { color: var(--color-primary); }

/* Inline search form */
.kn-search-form {
	display: flex;
	max-width: 460px;
	margin: 18px auto 0;
	background: #fff;
	border: 1px solid #d8e0ea;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 60, 119, .06);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.kn-search-form:focus-within {
	border-color: var(--color-secondary);
	box-shadow: 0 4px 14px rgba(18, 100, 186, .15);
}
.kn-search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	padding: 0 18px;
	height: 48px;
	font-size: 15px;
	color: #202124;
	background: transparent;
	font-family: inherit;
}
.kn-search-form input[type="search"]::placeholder { color: #9aa0a6; }
.kn-search-form button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: none;
	cursor: pointer;
	padding: 0 22px;
	background: var(--color-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	transition: background .2s ease;
}
.kn-search-form button:hover { background: var(--color-secondary); }
.kn-search-form button svg { display: block; }

/* Empty state */
.kn-search-empty {
	text-align: center;
	padding: 40px 20px 50px;
	color: #5f6368;
}
.kn-search-empty svg { color: #c4ccd6; margin-bottom: 16px; }
.kn-search-empty p {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	color: #3c4043;
}
.kn-search-empty span { font-size: 14px; color: #80868b; }

@media (max-width: 600px) {
	.kn-search-head { padding: 14px 16px; }
	.kn-search-head__title { font-size: 18px; }
	.kn-search-form button span { display: none; }
	.kn-search-form button { padding: 0 16px; }
}