/* =========================================================
   TMH Content Layout & Ads Manager — Frontend styles
   Áp dụng cho theme Newswiz (Newsup) trên TienMaHoa.Net
   ========================================================= */

:root {
	--tmh-grid-cols: 4;
	--tmh-grid-rows: 4;
	--tmh-accent: #d4202c;
	--tmh-bg: #ffffff;
	--tmh-text: #1a1a1a;
	--tmh-card-bg: #ffffff;
	--tmh-border: #eaeaea;
}

/* Dark mode variables */
body.tmh-dark {
	--tmh-bg: #14161a;
	--tmh-text: #eaeaea;
	--tmh-card-bg: #1d2025;
	--tmh-border: #2a2e35;
}
body.tmh-dark {
	background: var(--tmh-bg) !important;
	color: var(--tmh-text) !important;
}
body.tmh-dark a { color: #7fb2ff; }
body.tmh-dark .mg-sidebar,
body.tmh-dark .mg-posts-sec-post,
body.tmh-dark article,
body.tmh-dark .tmh-related-card,
body.tmh-dark .tmh-toc,
body.tmh-dark .tmh-newsletter-box {
	background: var(--tmh-card-bg) !important;
	border-color: var(--tmh-border) !important;
	color: var(--tmh-text) !important;
}

/* ---------------- Grid layout (4x4 / 5x5 / 4x5) ---------------- */
.tmh-grid {
	display: grid !important;
	grid-template-columns: repeat(var(--tmh-grid-cols), 1fr);
	gap: 20px;
}
.tmh-grid > * { width: auto !important; float: none !important; }

@media (max-width: 992px) {
	.tmh-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
	.tmh-grid { grid-template-columns: 1fr !important; }
}

/* ---------------- Khối "Dưới Latest Post": ép lưới đều cột ----------------
   Theme mặc định dùng float/inline-block hoặc grid auto-fit cho khối này,
   nên khi số bài không lấp đầy hết số cột thiết kế sẵn sẽ để lại khoảng
   trắng thừa (VD: chọn 4 bài nhưng theme chỉ chừa chỗ cho 3). Class dưới
   đây ép container cha thành CSS Grid đều cột thực sự, khớp đúng số bài
   đã cấu hình, và mọi thẻ con giãn đều lấp đầy chiều rộng. */
.tmh-below-latest-grid {
	display: grid !important;
	gap: 20px;
}
.tmh-below-latest-grid > * {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
.tmh-below-latest-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.tmh-below-latest-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.tmh-below-latest-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.tmh-below-latest-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.tmh-below-latest-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
.tmh-below-latest-cols-6 { grid-template-columns: repeat(6, 1fr) !important; }

@media (max-width: 992px) {
	.tmh-below-latest-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
	.tmh-below-latest-grid { grid-template-columns: 1fr !important; }
}

/* Chuẩn hoá tỷ lệ ảnh đại diện trong lưới bài viết — tránh ảnh bị méo/kéo dãn
   khi ảnh gốc có tỷ lệ khung hình khác nhau (VD: ảnh dọc, ảnh vuông, ảnh chụp
   màn hình biểu đồ...). Ép 16:9 + object-fit:cover để mọi thẻ đồng đều, sắc nét. */
.tmh-grid img,
.tmh-below-latest-grid img {
	width: 100% !important;
	aspect-ratio: 16 / 9;
	object-fit: cover !important;
	height: auto;
}
/* Trình duyệt cũ không hỗ trợ aspect-ratio: ép height cố định làm phương án dự phòng. */
@supports not (aspect-ratio: 16 / 9) {
	.tmh-grid img,
	.tmh-below-latest-grid img {
		height: 220px !important;
	}
}

/* Card hover effects */
body[style*="--tmh-hover-mode"] .mg-posts-sec-post,
.mg-posts-sec-post {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tmh-hover-zoom img { transition: transform 0.4s ease; overflow: hidden; }
.tmh-hover-zoom:hover img { transform: scale(1.06); }
.tmh-hover-lift:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }

/* ---------------- Banner ad slots ---------------- */
.tmh-ad-slot {
	position: relative;
	margin: 16px 0;
	text-align: center;
	overflow: hidden;
}
.tmh-ad-label {
	position: absolute;
	top: 4px;
	left: 4px;
	font-size: 10px;
	letter-spacing: .5px;
	text-transform: uppercase;
	background: rgba(0,0,0,.55);
	color: #fff;
	padding: 2px 6px;
	border-radius: 3px;
	z-index: 2;
}
.tmh-ad-img { max-width: 100%; height: auto; display: inline-block; }
.tmh-hide-mobile { display: block; }
.tmh-hide-desktop { display: none; }
@media (max-width: 782px) {
	.tmh-hide-mobile { display: none; }
	.tmh-hide-desktop { display: block; }
}

/* Sticky mobile footer ad */
.tmh-ad-tmh-ad-sticky_footer_mobile {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9999;
	background: #fff;
	box-shadow: 0 -2px 10px rgba(0,0,0,.15);
	padding: 6px 30px 6px 6px;
	margin: 0;
}
.tmh-ad-tmh-ad-sticky_footer_mobile::after {
	content: "\2715";
	position: absolute;
	right: 6px; top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	width: 22px; height: 22px;
	line-height: 22px;
	background: rgba(0,0,0,.08);
	border-radius: 50%;
	font-size: 12px;
}
body.tmh-dark .tmh-ad-tmh-ad-sticky_footer_mobile { background: var(--tmh-card-bg); }

/* ---------------- Reading progress bar ---------------- */
.tmh-reading-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	z-index: 99999;
	background: transparent;
}
.tmh-reading-progress span {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--tmh-accent);
	transition: width .1s linear;
}

/* ---------------- Back to top ---------------- */
.tmh-back-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tmh-accent);
	color: #fff;
	border: none;
	font-size: 18px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all .25s ease;
	z-index: 9998;
}
.tmh-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------------- Dark mode toggle ---------------- */
.tmh-dark-toggle {
	position: fixed;
	right: 18px;
	bottom: 70px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #22252b;
	color: #fff;
	border: none;
	font-size: 18px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
	z-index: 9998;
}

/* ---------------- Font size switch (single post) ---------------- */
.tmh-font-switch {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 18px;
	font-size: 13px;
}
.tmh-font-switch-label { opacity: .7; margin-right: 4px; }
.tmh-font-switch button {
	border: 1px solid var(--tmh-border);
	background: var(--tmh-card-bg);
	color: var(--tmh-text);
	border-radius: 4px;
	padding: 3px 9px;
	cursor: pointer;
}
.tmh-font-switch button.is-active { border-color: var(--tmh-accent); color: var(--tmh-accent); }

.entry-content.tmh-font-sm, .single .content.tmh-font-sm { font-size: 15px !important; line-height: 1.7; }
.entry-content.tmh-font-md, .single .content.tmh-font-md { font-size: 17px !important; line-height: 1.8; }
.entry-content.tmh-font-lg, .single .content.tmh-font-lg { font-size: 20px !important; line-height: 1.9; }

/* ---------------- Reading time & TOC ---------------- */
.tmh-read-time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	opacity: .75;
	margin-bottom: 12px;
}

.tmh-toc {
	border: 1px solid var(--tmh-border);
	border-radius: 8px;
	padding: 14px 18px;
	margin: 12px 0 22px;
	background: var(--tmh-card-bg);
}
.tmh-toc-toggle {
	background: none;
	border: none;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	color: inherit;
}
.tmh-toc-arrow { transition: transform .2s ease; }
.tmh-toc.is-collapsed .tmh-toc-arrow { transform: rotate(-90deg); }
.tmh-toc-list { margin: 10px 0 0; padding-left: 18px; }
.tmh-toc.is-collapsed .tmh-toc-list { display: none; }
.tmh-toc-list li { margin-bottom: 6px; }
.tmh-toc-list a { text-decoration: none; }
.tmh-toc-level-3 { margin-left: 14px; font-size: .95em; opacity: .9; }

/* ---------------- Share buttons ---------------- */
.tmh-share-box {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 24px 0;
	padding: 12px 0;
	border-top: 1px solid var(--tmh-border);
	border-bottom: 1px solid var(--tmh-border);
}
.tmh-share-label { font-weight: 600; margin-right: 4px; }
.tmh-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
}
.tmh-share-fb { background: #1877f2; }
.tmh-share-tw { background: #14171a; }
.tmh-share-tg { background: #229ed9; }
.tmh-share-copy { background: #6b7280; }
.tmh-share-copy.copied::after {
	content: "Đã sao chép!";
	position: absolute;
	margin-left: 8px;
	font-size: 11px;
	background: #333;
	color: #fff;
	padding: 2px 6px;
	border-radius: 4px;
	white-space: nowrap;
}

/* ---------------- Newsletter box ---------------- */
.tmh-newsletter-box {
	margin: 26px 0;
	padding: 22px;
	border-radius: 10px;
	background: linear-gradient(135deg, #fff4f4, #fff);
	border: 1px solid var(--tmh-border);
	text-align: center;
}
body.tmh-dark .tmh-newsletter-box { background: linear-gradient(135deg, #1d2025, #14161a); }
.tmh-newsletter-box h4 { margin: 0 0 6px; font-size: 18px; }
.tmh-newsletter-box p { margin: 0 0 14px; opacity: .8; font-size: 13px; }
.tmh-newsletter-form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tmh-newsletter-form input[type="email"] {
	flex: 1 1 260px;
	max-width: 320px;
	padding: 10px 14px;
	border-radius: 6px;
	border: 1px solid var(--tmh-border);
}
.tmh-newsletter-form button {
	padding: 10px 20px;
	border-radius: 6px;
	border: none;
	background: var(--tmh-accent);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}
.tmh-newsletter-note { font-size: 11px; opacity: .55; margin-top: 10px; }

/* ---------------- Related posts ---------------- */
.tmh-related-posts { margin: 30px 0; }
.tmh-related-title { font-size: 20px; margin-bottom: 16px; border-left: 4px solid var(--tmh-accent); padding-left: 10px; }
.tmh-related-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
@media (max-width: 992px) { .tmh-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tmh-related-grid { grid-template-columns: 1fr; } }

.tmh-related-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--tmh-border);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.tmh-related-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.tmh-related-thumb img { width: 100%; height: 140px; object-fit: cover; display: block; }
.tmh-related-cat { font-size: 11px; text-transform: uppercase; color: var(--tmh-accent); font-weight: 700; padding: 8px 10px 0; }
.tmh-related-headline { font-size: 14px; font-weight: 600; padding: 6px 10px 12px; line-height: 1.4; }

/* ---------------- Breaking news bar ---------------- */
.tmh-breaking-bar {
	display: flex;
	align-items: center;
	background: #1a1a1a;
	color: #fff;
	padding: 8px 14px;
	gap: 12px;
	font-size: 13px;
	position: relative;
}
.tmh-breaking-label {
	background: var(--tmh-accent);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 4px;
	white-space: nowrap;
	flex-shrink: 0;
}
.tmh-breaking-track-wrap { overflow: hidden; flex: 1; }
.tmh-breaking-track {
	display: flex;
	gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	animation: tmh-marquee 30s linear infinite;
}
.tmh-breaking-track li a { color: #fff; text-decoration: none; }
.tmh-breaking-track:hover { animation-play-state: paused; }
@keyframes tmh-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}
.tmh-breaking-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	flex-shrink: 0;
}
.tmh-breaking-bar.is-hidden { display: none; }

/* ---------------- Lazyload placeholder ---------------- */
img.tmh-lazy { opacity: 0; transition: opacity .3s ease; }
img.tmh-lazy.tmh-loaded { opacity: 1; }

/* ---------------- Infinite scroll loader ---------------- */
.tmh-infinite-loader {
	text-align: center;
	padding: 20px;
	font-size: 13px;
	opacity: .7;
	display: none;
}
.tmh-infinite-loader.is-active { display: block; }