/* =========================================================
   TechFlow Theme — Main Stylesheet
   ========================================================= */

:root {
	--tf-blue: #2563eb;
	--tf-blue-dark: #1d4ed8;
	--tf-blue-light: #3b82f6;
	--tf-accent: #dbeafe;
	--tf-accent-2: #eff6ff;
	--tf-fg: #0f172a;
	--tf-text-2: #475569;
	--tf-muted: #94a3b8;
	--tf-border: #e2e8f0;
	--tf-surface: #f8fafc;
	--tf-radius: 14px;
}

* { box-sizing: border-box; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.site-main { padding-bottom: 3rem; }

/* ---------- Brand / Logo ---------- */
.site-brand { align-items: center; }
.brand-logo-icon {
	width: 32px; height: 32px;
	border-radius: 9px;
	background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
	position: relative;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(37,99,235,.35);
}
.brand-logo-icon::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 13px; height: 13px;
	transform: translate(-50%, -50%);
	border: 2.5px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
}
.brand-logo-icon::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 5px; height: 5px;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 50%;
}
.wp-block-site-title a { text-decoration: none; color: var(--tf-fg) !important; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; }
/* Ép phần ruột header rộng tối đa, căn logo trái — menu phải */
.site-header > .site-header__inner,
.site-header .wp-block-group__inner-container > .site-header__inner {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	flex-wrap: nowrap;
}
.site-header__inner { width: 100%; }
.site-header__nav { align-items: center; flex-wrap: nowrap; }
.main-nav { flex-wrap: nowrap; }
.main-nav a { color: var(--tf-text-2); text-decoration: none; transition: color .15s; white-space: nowrap; }
.main-nav a:hover { color: var(--tf-blue); }

.header-search .wp-block-search__button {
	background: var(--tf-surface);
	border: 1px solid var(--tf-border);
	border-radius: 10px;
	padding: 8px;
	color: var(--tf-text-2);
}
.header-search .wp-block-search__button svg { fill: currentColor; }

.header-back-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 10px;
	background: var(--tf-surface); color: var(--tf-fg);
	text-decoration: none; font-size: 20px;
	border: 1px solid var(--tf-border);
}
.header-actions { display: flex; gap: .4rem; }
.icon-btn {
	width: 38px; height: 38px; border-radius: 10px;
	background: var(--tf-surface); border: 1px solid var(--tf-border);
	cursor: pointer; font-size: 16px; color: var(--tf-text-2);
	display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--tf-accent); color: var(--tf-blue); }

/* ---------- Badges & Categories ---------- */
.tf-badge {
	display: inline-block; padding: 5px 12px; border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.tf-badge--hot { background: var(--tf-blue); color: #fff; }

.tf-cat {
	display: inline-block; padding: 3px 10px; border-radius: 6px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
	text-transform: uppercase;
}
.tf-cat--news  { background: #dbeafe; color: #1d4ed8; }
.tf-cat--tip   { background: #e0f2fe; color: #0369a1; }
.tf-cat--exp   { background: #ede9fe; color: #6d28d9; }
.tf-cat--share { background: #dcfce7; color: #15803d; }

.tf-meta { font-size: 13px; color: var(--tf-text-2); font-weight: 500; }

/* ---------- Hero (trang chủ) ---------- */
.home-hero__columns { align-items: stretch; }
.hero-card {
	border-radius: 16px;
	background: linear-gradient(135deg, #eef4ff 0%, #f5f9ff 60%, #eaf1fe 100%);
	border: 1px solid #e4ecfb;
	overflow: hidden;
	gap: 1rem;
	min-height: 420px;
}
.hero-card__text { flex: 1 1 52%; min-width: 0; }
.hero-card__title {
	font-size: 2.1rem !important;
	color: var(--tf-fg) !important;
	font-weight: 700;
}
.hero-card__img {
	flex: 1 1 48%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero-card__img img {
	width: 100%;
	height: auto;
	border-radius: 12px;
}
.home-hero__list { display: flex; flex-direction: column; gap: 0; }
.mini-post { transition: background .15s; border-radius: 8px; }
.mini-post:hover { background: var(--tf-accent-2); }
.mini-post__thumb img { border-radius: 8px; }
.mini-post p { margin: 0; }

/* ---------- Section titles ---------- */
.section-title {
	font-size: 1.1rem !important; font-weight: 700;
	color: var(--tf-fg); position: relative; padding-left: 14px;
}
.section-title::before {
	content: ""; position: absolute; left: 0; top: 50%;
	transform: translateY(-50%);
	width: 4px; height: 20px; border-radius: 3px;
	background: var(--tf-blue);
}

/* ---------- Post grid (card) ---------- */
.post-grid { gap: 1.25rem !important; }
.post-card {
	overflow: hidden; height: 100%;
	transition: transform .18s, box-shadow .18s;
}
.post-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(37,99,235,.12);
}
.post-card__thumb img { width: 100%; display: block; }
.post-card__body p { margin: 0; }
.post-card__title { color: var(--tf-fg); }

/* ---------- Tags / Trending ---------- */
.tag-cloud { gap: .55rem; }
.tf-tag {
	display: inline-block; padding: 7px 14px; border-radius: 999px;
	background: var(--tf-surface); border: 1px solid var(--tf-border);
	color: var(--tf-text-2); font-size: 13px; font-weight: 500;
	text-decoration: none; transition: all .15s;
}
.tf-tag:hover { background: var(--tf-blue); color: #fff; border-color: var(--tf-blue); }

/* ---------- Single article ---------- */
.breadcrumb a { color: var(--tf-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--tf-blue); }
.bc-sep { color: var(--tf-muted); margin: 0 4px; }
.bc-current { color: var(--tf-text-2); }

.article-meta { align-items: center; }
.article-meta p { margin: 0; }
.author-avatar {
	width: 34px; height: 34px; border-radius: 50%;
	background: linear-gradient(135deg, #2563eb, #3b82f6);
	color: #fff; font-size: 12px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
}
.article-hero img { width: 100%; }
.article-body h2 { margin-top: 2rem; }

.tf-quote {
	border-left: 4px solid var(--tf-blue);
	background: var(--tf-accent-2);
	padding: 1rem 1.25rem; border-radius: 0 10px 10px 0;
	margin: 1.5rem 0;
}
.tf-quote p { margin: 0; font-style: italic; color: var(--tf-text-2); }

.article-share { align-items: center; }
.share-label { font-size: 14px; color: var(--tf-text-2); font-weight: 600; }
.share-btn {
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--tf-surface); border: 1px solid var(--tf-border);
	display: inline-flex; align-items: center; justify-content: center;
	text-decoration: none; color: var(--tf-text-2); font-weight: 700;
}
.share-btn:hover { background: var(--tf-blue); color: #fff; }

/* ---------- Sidebar ---------- */
.site-sidebar { position: sticky; top: 90px; }
.widget-title {
	font-size: 13px !important; font-weight: 700;
	color: var(--tf-fg); margin-bottom: 1rem;
}
.sidebar-widget { margin-bottom: 1.75rem; }
.side-post { padding: .6rem 0; border-bottom: 1px solid var(--tf-border); }
.side-post:last-child { border-bottom: none; }
.side-post p { margin: 0; }
.side-post__thumb img { border-radius: 8px; }
.side-post__title { color: var(--tf-fg); transition: color .15s; }
.side-post:hover .side-post__title { color: var(--tf-blue); }

.toc-widget .tf-toc { margin: 0; padding-left: 1.1rem; }
.tf-toc li { margin-bottom: .5rem; font-size: 14px; }
.tf-toc a { color: var(--tf-text-2); text-decoration: none; }
.tf-toc a:hover { color: var(--tf-blue); }

/* ---------- Category list ---------- */
.category-list { display: flex; flex-direction: column; gap: .85rem; }
.cat-card {
	display: flex; align-items: center; gap: 1rem;
	padding: 1rem 1.25rem; border-radius: var(--tf-radius);
	background: #fff; border: 1px solid var(--tf-border);
	text-decoration: none; transition: all .18s;
}
.cat-card:hover {
	border-color: var(--tf-blue-light);
	box-shadow: 0 6px 18px rgba(37,99,235,.1);
	transform: translateX(2px);
}
.cat-card__icon {
	flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
	background: linear-gradient(135deg, #dbeafe, #eff6ff);
	color: var(--tf-blue);
	display: inline-flex; align-items: center; justify-content: center;
}
.cat-card:hover .cat-card__icon { background: var(--tf-blue); color: #fff; }
.cat-card__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cat-card__name { font-weight: 700; color: var(--tf-fg); font-size: 15px; }
.cat-card__count { font-size: 12px; color: var(--tf-blue); font-weight: 600; }
.cat-card__desc { font-size: 13px; color: var(--tf-muted); }
.cat-card__arrow { color: var(--tf-muted); font-size: 22px; flex-shrink: 0; }
.cat-card:hover .cat-card__arrow { color: var(--tf-blue); }

/* ---------- Search page ---------- */
.search-bar {
	display: flex; align-items: center; gap: .6rem;
	background: var(--tf-surface); border: 1px solid var(--tf-border);
	border-radius: 12px; padding: 12px 16px; margin: 2rem 0 1.25rem;
}
.search-bar__icon { color: var(--tf-muted); flex-shrink: 0; }
.search-bar__input {
	flex: 1; border: none; background: transparent;
	font-size: 15px; color: var(--tf-fg); outline: none;
	font-family: inherit;
}
.search-bar__clear {
	border: none; background: none; cursor: pointer;
	font-size: 20px; color: var(--tf-muted);
}
.search-tabs {
	display: flex; gap: .5rem; flex-wrap: wrap;
	border-bottom: 1px solid var(--tf-border);
	padding-bottom: 0; margin-bottom: 1.25rem;
}
.search-tab {
	border: none; background: none; cursor: pointer;
	padding: 8px 4px; font-size: 14px; font-weight: 500;
	color: var(--tf-text-2); position: relative;
	font-family: inherit; margin-right: .75rem;
}
.search-tab.is-active { color: var(--tf-blue); font-weight: 600; }
.search-tab.is-active::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
	height: 2px; background: var(--tf-blue);
}
.search-count { font-size: 14px; color: var(--tf-text-2); margin-bottom: 1rem; }
.search-count strong { color: var(--tf-fg); }

.search-results { display: flex; flex-direction: column; }
.search-item {
	display: flex; gap: 1rem; padding: 1rem 0;
	border-bottom: 1px solid var(--tf-border);
	text-decoration: none; align-items: flex-start;
}
.search-item:hover .search-item__title { color: var(--tf-blue); }
.search-item__thumb {
	width: 96px; height: 72px; border-radius: 10px;
	object-fit: cover; flex-shrink: 0;
}
.search-item__body { display: flex; flex-direction: column; gap: 6px; }
.search-item__title { font-weight: 700; color: var(--tf-fg); line-height: 1.4; }
.search-item__meta { font-size: 12.5px; color: var(--tf-muted); }
.search-item-wrap { padding: 1rem 0; border-bottom: 1px solid var(--tf-border); }

/* ---------- Redirect page ---------- */
.redirect-page { text-align: center; }
.redirect-circle {
	position: relative; width: 120px; height: 120px; margin: 0 auto;
}
.redirect-ring { transform: rotate(-90deg); width: 120px; height: 120px; }
.redirect-ring__bg { fill: none; stroke: var(--tf-accent); stroke-width: 6; }
.redirect-ring__fg {
	fill: none; stroke: var(--tf-blue); stroke-width: 6; stroke-linecap: round;
	stroke-dasharray: 339.292; stroke-dashoffset: 0;
	animation: tf-ring 2s linear forwards;
}
@keyframes tf-ring { to { stroke-dashoffset: 339.292; } }
.redirect-count {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	font-size: 36px; font-weight: 800; color: var(--tf-fg);
}
.redirect-count small { font-size: 12px; font-weight: 500; color: var(--tf-muted); }
.redirect-notice {
	display: flex; gap: .6rem; align-items: flex-start; text-align: left;
	background: var(--tf-accent-2); border: 1px solid var(--tf-accent);
	border-radius: 12px; padding: 1rem; margin-top: 1.75rem;
	font-size: 13px; color: var(--tf-text-2);
}
.redirect-notice svg { color: var(--tf-blue); flex-shrink: 0; margin-top: 1px; }

/* ---------- Footer ---------- */
.footer-links { list-style: none; padding: 0; margin: .5rem 0 0; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: var(--tf-text-2); text-decoration: none; font-size: 14px; }
.footer-links a:hover { color: var(--tf-blue); }

/* ---------- Pagination ---------- */
.tf-pagination .wp-block-query-pagination-numbers a,
.tf-pagination .wp-block-query-pagination-numbers .current {
	padding: 6px 12px; border-radius: 8px; border: 1px solid var(--tf-border);
	margin: 0 3px; text-decoration: none;
}
.tf-pagination .current { background: var(--tf-blue); color: #fff; border-color: var(--tf-blue); }

/* ---------- Mobile bottom nav ---------- */
.mobile-bottom-nav { display: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 781px) {
	/* Hero xếp dọc */
	.home-hero__columns,
	.single-layout,
	.category-layout { flex-direction: column; }
	.home-hero__feature,
	.home-hero__list,
	.single-layout > .wp-block-column,
	.category-layout > .wp-block-column { flex-basis: 100% !important; width: 100% !important; }

	/* Ẩn sidebar mục lục/liên quan & bài nổi bật trên mobile cho gọn */
	.single-aside-col,
	.category-aside-col { display: none; }

	/* Lưới bài viết -> 1 cột */
	.post-grid { flex-direction: column; }
	.post-grid .wp-block-column { flex-basis: 100% !important; }

	.section-title { font-size: 1rem !important; }
	.article-title { font-size: 1.8rem !important; }
	.hero-card__title { font-size: 1.7rem !important; }

	/* Mobile bottom nav hiện */
	.mobile-bottom-nav {
		display: flex; position: fixed; bottom: 0; left: 0; right: 0;
		background: #fff; border-top: 1px solid var(--tf-border);
		padding: 8px 0 max(8px, env(safe-area-inset-bottom));
		z-index: 200; justify-content: space-around;
		box-shadow: 0 -2px 12px rgba(15,23,42,.06);
	}
	.mobile-bottom-nav__item {
		display: flex; flex-direction: column; align-items: center; gap: 3px;
		text-decoration: none; color: var(--tf-muted); font-size: 11px;
		flex: 1; padding: 2px 0;
	}
	.mobile-bottom-nav__item.is-active { color: var(--tf-blue); }
	.mobile-bottom-nav__label { font-weight: 500; }

	/* Chừa chỗ cho bottom nav */
	.site-footer { margin-bottom: 64px; }
	.redirect-main { margin-bottom: 64px; }

	/* Footer xếp dọc */
	.footer-columns { flex-direction: column; gap: 1.5rem !important; }
	.footer-columns .wp-block-column { flex-basis: 100% !important; }

	/* Header: ẩn menu chữ trên mobile (overlay menu của WP lo phần này) */
	.search-item__thumb { width: 80px; height: 60px; }
}

@media (min-width: 782px) {
	.mobile-bottom-nav { display: none !important; }
}