/* Skin 12 – Xanh dương hiện đại.
 * Sinh từ skin-11 (bố cục bth): GIỮ NGUYÊN toàn bộ template/logic (menu sticky,
 * dropdown, mega menu, slider, infinite scroll) — chỉ đổi bảng màu + biến tấu cuối file. */

/**
 * Giao diện 11 – Báo Thanh Hóa (chuẩn cấu trúc thật baothanhhoa.vn).
 *
 * Thông số lấy từ khảo sát CSS gốc:
 * - Khung 1170px (≥1200), gap 30px; cột nội dung 1fr + sidebar 300px.
 * - Màu: đỏ #1263b1 / #0b4d8c, chữ #212529, phụ #6c757d, nền nhạt #f8f9fa,
 *   dải tối #0e2233; menu NỀN TRẮNG viền trên đỏ 1px + bóng nhẹ.
 * - Font: Poppins (nội dung/tiêu đề bài), Oswald (menu), Barlow Condensed
 *   (heading khối, 25–30px in hoa + kẻ ngang chạy hết hàng).
 * - Card: thumb 3:2, tiêu đề 15px/500; bài lớn 24px/600 + sapo 3 dòng.
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600&family=Oswald:wght@400;500&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root {
	/* Biến base.css – đồng bộ cho các trang trong (bài viết, chuyên mục) */
	--c-primary: #1263b1;
	--c-primary-dark: #0b4d8c;
	--c-accent: #1263b1;
	--c-bg: #ffffff;
	--c-surface: #ffffff;
	--c-alt: #f8f9fa;
	--c-text: #212529;
	--c-muted: #6c757d;
	--c-border: #e9e9e9;
	--c-nav-bg: #ffffff;
	--c-nav-text: #212529;
	--c-topbar-bg: #fafafa;
	--c-topbar-text: #666666;
	--c-footer-bg: #0e2233;
	--c-footer-text: #cccccc;
	--c-title: #212529;
	--c-section-title: #212529;
	--font-body: Poppins, Roboto, -apple-system, "Segoe UI", Arial, sans-serif;
	--font-heading: Poppins, Roboto, Arial, sans-serif;
	--fs-base: 15px;
	--radius: 0;
	--radius-lg: 0;
	--shadow: none;
	--card-bg: transparent;
	--card-pad: 0px;
	--section-title-border: 1px solid rgba(0,0,0,.1);
	--container: 1170px;

	/* Biến riêng bth */
	--bth-dark: #0e2233;
	--bth-gap: 30px;
	--font-bar: "Barlow Condensed", Oswald, Arial, sans-serif;
	--font-menu: Oswald, "Barlow Condensed", Arial, sans-serif;
}

body { color: #212529; }

/* ============================= TOPBAR ============================= */
.bth-topbar {
	background: #fafafa;
	border-bottom: 1px solid #eee;
	font-size: 13px;
	color: #666;
}
.bth-topbar-inner {
	display: flex; align-items: center; justify-content: space-between;
	height: 40px; gap: 16px;
}
.bth-topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.bth-date { color: #666; text-transform: capitalize; font-family: Poppins, sans-serif; }
.bth-topbar-menu { display: flex; gap: 16px; list-style: none; }
.bth-topbar-menu a { color: #6c757d; font-family: Poppins, sans-serif; font-size: 13px; }
.bth-topbar-menu a:hover { color: #1263b1; }
.bth-topbar-social { display: flex; align-items: center; gap: 14px; list-style: none; }
.bth-topbar-social a { display: flex; align-items: center; }
.bth-topbar-social a:hover svg { opacity: .75; }

/* ============================= MASTHEAD ============================= */
.site-header.bth-header { background: #fff; }
.bth-hdr {
	position: relative;
	display: grid; place-items: center;
	padding: 18px 16px;
}
.bth-logoslogan { text-align: center; }
.bth-logo {
	font-family: var(--font-bar);
	font-size: 52px; font-weight: 600; line-height: 1;
	letter-spacing: 1px; text-transform: uppercase;
	color: #1263b1; display: inline-block;
}
.bth-logo:hover { color: #0b4d8c; }
.bth-logoslogan .custom-logo { max-height: 75px; width: auto; }
.bth-slogan {
	margin: 4px 0 0;
	font-size: 10.5px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 2px; color: #6c757d;
}
.bth-topad { position: absolute; right: 16px; bottom: 12px; text-align: right; }
.bth-hmnu { display: flex; gap: 18px; }
.bth-hmnu a {
	font-family: Poppins, sans-serif; font-size: 14px;
	color: #112233; text-transform: uppercase;
}
.bth-hmnu a:hover { color: #1263b1; }

/* ============================= MENU TRẮNG ============================= */
.bth-nav {
	background: #fff;
	border-top: 1px solid #1263b1;
	box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
	position: relative; z-index: 200;
}
.bth-menu-wrap {
	display: flex; align-items: stretch; list-style: none;
}
.bth-menu-wrap::-webkit-scrollbar { display: none; }
/* Chỉ mobile mới cuộn ngang — desktop phải overflow visible để dropdown hiện được */
@media (max-width: 1023px) {
	.bth-menu-wrap { overflow-x: auto; scrollbar-width: none; }
}
.bth-menu-wrap > li { position: relative; flex: none; }
.bth-menu-wrap > li > a {
	display: flex; align-items: center; height: 46px; padding: 0 9px;
	font-family: var(--font-menu);
	font-size: 15px; font-weight: 400; text-transform: uppercase;
	color: #212529; white-space: nowrap;
}
.bth-menu-wrap > li > a:hover,
.bth-menu-wrap > li.current-menu-item > a,
.bth-menu-wrap > li.current-cat > a { color: #1263b1; background: #f8f9fa; }
.bth-menu-wrap > li.current-menu-item > a,
.bth-menu-wrap > li.current-cat > a { box-shadow: inset 0 -2px 0 #1263b1; }
.bth-home a { padding: 0 12px; }

/* Menu con thả xuống */
.bth-menu-wrap .sub-menu, .bth-menu-wrap .children {
	position: absolute; top: 100%; left: 0; z-index: 300;
	min-width: 250px; list-style: none;
	background: #fff; border: 1px solid #f0f0f0;
	box-shadow: 0 10px 24px rgba(0,0,0,.14);
	padding: 8px 0;
	display: none;
}
.bth-menu-wrap li:hover > .sub-menu,
.bth-menu-wrap li:focus-within > .sub-menu,
.bth-menu-wrap li:hover > .children,
.bth-menu-wrap li:focus-within > .children { display: block; }
.bth-menu-wrap .sub-menu a, .bth-menu-wrap .children a {
	display: block; padding: 11px 22px;
	font-family: Poppins, sans-serif;
	font-size: 15px; color: #212529;
}
.bth-menu-wrap .sub-menu a:hover, .bth-menu-wrap .children a:hover { color: #1263b1; background: #f8f9fa; }

/* Nút tìm kiếm + mega bên phải */
.bth-search { margin-left: auto; }
.bth-search-btn, .bth-mega-btn {
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border: 0; background: none;
	color: #212529; border-left: 1px solid #eee;
}
.bth-search-btn:hover, .bth-mega-btn:hover { color: #1263b1; background: #f8f9fa; }
.bth-mega-btn span { display: block; width: 18px; height: 2px; background: currentColor; margin: 2px auto; }
.bth-mega-btn { flex-direction: column; }
.bth-dropdown { display: none; }
li.open > .bth-dropdown { display: block; }
.bth-search-drop {
	position: absolute; top: 100%; right: 0; z-index: 300;
	background: #fff; border: 1px solid #eee; border-top: 2px solid #1263b1;
	box-shadow: 0 8px 20px rgba(0,0,0,.12); padding: 14px; min-width: 300px;
}
/* li.bth-mega phải THẮNG rule ".bth-menu-wrap > li {position:relative}"
   nếu không panel sẽ định vị theo cái li 46px và vỡ thành cột hẹp. */
.bth-menu-wrap > li.bth-mega { position: static; }
.bth-mega-drop {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 300;
	background: #fff; border-top: 2px solid #1263b1;
	box-shadow: 0 14px 28px rgba(0,0,0,.15);
	padding: 26px 0;
}
/* Mở mega bằng cả hover lẫn click */
.bth-menu-wrap > li.bth-mega:hover > .bth-dropdown { display: block; }
.bth-mega-grid {
	display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px 20px;
}
.bth-mega-cat {
	display: block; padding: 8px 10px;
	font-family: var(--font-menu); font-size: 15px; text-transform: uppercase;
	color: #212529; border-left: 3px solid #1263b1; background: #f8f9fa;
}
.bth-mega-cat:hover { color: #fff; background: #1263b1; }

/* ============================= TICKER ============================= */
.bth-ticker {
	background: #fff;
	border-bottom: 1px solid #eee;
	box-shadow: 0 1px 3px rgba(0,0,0,.05);
	padding: 10px 0;
}
.bth-ticker-wrap { max-width: var(--container); margin: 0 auto; overflow: hidden; white-space: nowrap; }
.bth-ticker-move {
	display: inline-block; white-space: nowrap;
	animation: bth-ticker 90s linear infinite;
	padding-left: 100%;
}
.bth-ticker-wrap:hover .bth-ticker-move { animation-play-state: paused; }
.bth-ticker-item { display: inline-block; padding: 0 26px; font-size: 15px; }
.bth-ticker-item::before { content: "•"; color: #1263b1; margin-right: 12px; }
.bth-ticker-item a { color: #333; }
.bth-ticker-item a:hover { color: #c81e25; text-decoration: underline; }
@keyframes bth-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .bth-ticker-move { animation: none; padding-left: 0; } }

/* ============================= KHUNG TRANG CHỦ ============================= */
.bth-body { padding: 24px 0 0; }
.bth-body .container { padding-left: 16px; padding-right: 16px; }
.bth-cols {
	display: grid; grid-template-columns: minmax(0,1fr) 300px;
	gap: var(--bth-gap); margin-bottom: 34px;
}
.bth-main, .bth-sidebar { min-width: 0; }

/* ============================= CARD BÀI (story) ============================= */
.story { position: relative; }
.story::after { content: ""; display: block; clear: both; }
.story__thumb {
	position: relative; overflow: hidden; border-radius: 0; background: #f2f2f2;
}
.story__thumb::before { content: ""; display: block; padding-bottom: 66.667%; }
.story__thumb a { position: absolute; inset: 0; }
.story__thumb a:hover { opacity: .85; }
.story__thumb img, .story__thumb .thumb-placeholder {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
}
.story__body { margin-top: 8px; }
.story__heading {
	font-family: Poppins, sans-serif;
	font-size: 15px; font-weight: 500; line-height: 1.4;
	color: #212529; margin: 0;
}
.story__heading a:hover { color: #1263b1; }
.story .cate {
	display: inline-block;
	font-size: 12px; font-weight: 500; text-transform: uppercase;
	color: #1263b1; margin-bottom: 4px;
}
.story .cate:hover { color: #0b4d8c; }
.story time { display: block; font-size: 13px; color: #6c757d; margin-top: 6px; }
.story__summary {
	color: #303030; font-size: 14px; line-height: 1.6; margin-top: 8px;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* Bài dạng dòng nhỏ (hero trái, box-aside): thumb 120px nổi trái + kẻ đứt */
.story--line { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px dashed #eee; }
.story--line:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.story--line .story__thumb { width: 120px; float: left; margin: 0 10px 4px 0; }
.story--line .story__body { margin-top: 0; overflow: hidden; }
.story--line .story__heading { font-size: 14px; }

/* Bài lớn hero giữa */
.story--big .story__heading { font-size: 24px; font-weight: 600; line-height: 1.25; margin: 4px 0 8px; }
.story--big .story__body { margin-top: 12px; }

/* Bài focus trong zone/dải */
.story--focus .story__heading { font-size: 22px; font-weight: 600; line-height: 1.3; }

/* Bài dạng hàng ngang (timeline) */
.story--row {
	display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 18px;
	padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,.1);
}
.story--row .story__body { margin-top: 0; }
.story--row .story__heading { font-size: 18px; font-weight: 600; }

/* ============================= HERO ============================= */
.bth-highlight {
	display: grid; grid-template-columns: 1fr 2fr;
	gap: var(--bth-gap); margin-bottom: 25px;
}
.bth-hl-left, .bth-hl-center { min-width: 0; }

/* ============================= HEADING KHỐI ============================= */
.bth-heading {
	display: grid; grid-template-columns: min-content auto; align-items: center; gap: 0 20px;
	font-family: var(--font-bar);
	font-size: 28px; font-weight: 600; line-height: 1.2;
	text-transform: uppercase; color: #212529;
	margin-bottom: 20px;
}
.bth-heading a, .bth-heading span { font-weight: 600; }
.bth-heading a, .bth-heading span { color: #212529; white-space: nowrap; }
.bth-heading a:hover { color: #1263b1; }
.bth-heading::after { content: ""; display: block; height: 1px; background: rgba(0,0,0,.1); }
.bth-heading--light, .bth-heading--light a, .bth-heading--light span { color: #fff; }
.bth-heading--light::after { background: rgba(255,255,255,.2); }
.bth-heading--light a:hover { color: #1263b1; }

/* ============================= SIDEBAR ============================= */
.bth-feature { margin-bottom: 28px; }
.bth-feature .story:not(:last-child) { margin-bottom: 20px; }
.bth-feature .story__heading { font-size: 16px; }

.bth-popular { margin-bottom: 28px; }
.bth-popular .bth-heading { font-size: 24px; }
.bth-popular-list { list-style: none; counter-reset: bthpop; }
.bth-popular-list li {
	counter-increment: bthpop;
	display: flex; gap: 14px; align-items: baseline;
	padding: 12px 0; border-bottom: 1px dashed rgba(0,0,0,.1);
	font-family: Poppins, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4;
}
.bth-popular-list li:last-child { border-bottom: 0; }
.bth-popular-list li::before {
	content: counter(bthpop);
	font-family: var(--font-bar); font-size: 30px; font-weight: 600; font-style: italic;
	color: #1263b1; opacity: .8; line-height: 1; min-width: 22px; flex: none;
}
.bth-popular-list a:hover { color: #1263b1; }

.bth-box-aside {
	background: #f8f9fa; padding: 14px; border-top: 1px solid #fff;
	margin-bottom: 28px;
}
.bth-box-aside .bth-heading {
	display: block; font-size: 22px;
	border-left: 2px solid #1263b1; padding-left: 8px; margin-bottom: 16px;
}
.bth-box-aside .bth-heading::after { content: none; }
.bth-box-aside .story--focus .story__heading { font-size: 16px; font-weight: 600; }
.bth-box-aside .story--focus { margin-bottom: 16px; }

/* Widget mặc định trong rail phải */
.bth-sidebar .widget { margin-bottom: 28px; }
.bth-sidebar .widget-title {
	font-family: var(--font-bar); font-size: 22px; font-weight: 400;
	text-transform: uppercase; color: #212529;
	border-left: 2px solid #1263b1; padding-left: 8px; margin-bottom: 14px; border-bottom: 0;
}

/* ============================= DẢI TỐI MULTI-PACK ============================= */
.bth-area {
	background: var(--bth-dark);
	background-image: radial-gradient(circle at 15% 50%, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 120px, transparent 121px),
		radial-gradient(circle at 85% 50%, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 120px, transparent 121px);
	padding: 30px 0; margin-bottom: 34px;
}
.bth-area .story__heading, .bth-area .story__heading a { color: #fff; }
.bth-area .story__heading a:hover { color: rgba(255,255,255,.7); }
.bth-area .story__summary { color: rgba(255,255,255,.75); }
.bth-area .story time { color: rgba(255,255,255,.55); }
.bth-area--bottom { margin-bottom: 0; }

.bth-mp-grid {
	display: grid; grid-template-columns: 570px 1fr 1fr;
	gap: 24px var(--bth-gap);
}
.bth-mp-grid .story--focus { grid-row: 1 / 3; }
.bth-mp-grid .story--focus .story__heading { font-size: 26px; font-weight: 700; line-height: 1.3; }

.bth-col3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--bth-gap); }

/* ============================= ZONE CHUYÊN MỤC ============================= */
.bth-zone { margin-bottom: 34px; }
.bth-zone .bth-heading { font-size: 25px; }
.bth-zone--dcv1 .bth-zone-grid {
	display: grid; grid-template-columns: 2fr 1fr 1fr;
	gap: 24px var(--bth-gap);
}
.bth-zone--dcv1 .story--focus { grid-row: 1 / 3; }
.bth-zone--dcv0 .bth-zone-grid {
	display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
	gap: var(--bth-gap);
}

/* ============================= TIMELINE ============================= */
.bth-timeline .bth-heading { font-size: 28px; }
.bth-timeline-list .story--row:last-child { border-bottom: 0; }

/* ============================= FOOTER ============================= */
.bth-footer {
	background: var(--bth-dark);
	border-top: 2px solid #1263b1;
	color: #fff; margin-top: 40px;
}
.bth-footer-info {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
	padding-top: 30px; padding-bottom: 24px;
}
.bth-footer-info * { font-size: 14px; line-height: 1.7; color: #fff; }
.bth-footer-logo {
	display: inline-block;
	font-family: var(--font-bar); font-size: 44px; line-height: 1;
	text-transform: uppercase; letter-spacing: 1px; color: #1263b1 !important;
	font-weight: 700;
	margin-bottom: 8px;
}
.bth-footer-logo:hover { color: #4d9fe6 !important; }
/* Tagline dạng chip đỏ dưới logo (như dải đỏ trong logo bản gốc) */
.bth-footer-slogan {
	display: inline-block;
	background: #1263b1; color: #fff;
	font-size: 11.5px !important; font-weight: 700;
	text-transform: uppercase; letter-spacing: 1.5px;
	padding: 4px 12px; margin-bottom: 14px;
}
.bth-footer-line { margin: 0 0 4px; opacity: .92; }
.bth-footer-right { text-align: right; }
.bth-footer-org { font-weight: 700; margin-bottom: 6px; }
.bth-footer-org, .bth-footer-org * { font-weight: 700; }
.bth-footer-links { margin-top: 10px; }
.bth-footer-links .sep { color: rgba(255,255,255,.4); margin: 0 6px; }
.bth-footer-links a:hover { text-decoration: underline; }
.bth-footer-strip { border-top: 1px solid rgba(255,255,255,.15); }
.bth-footer-strip-inner {
	display: flex; justify-content: space-between; align-items: center;
	padding-top: 14px; padding-bottom: 14px; font-size: 13px;
}
.bth-footer-strip-inner * { color: rgba(255,255,255,.7); font-size: 13px; }
.bth-backtop:hover { color: #fff; }

/* ============================= TRANG TRONG (bài viết, chuyên mục) ============================= */
.section-title, .archive-title, .widget-title {
	font-family: var(--font-bar); font-weight: 400;
}
.section-header { border-bottom: 0; }
.section-title {
	display: grid; grid-template-columns: min-content auto; align-items: center; gap: 0 20px;
	width: 100%; padding-bottom: 0;
}
.section-title::after { content: ""; display: block; height: 1px; background: rgba(0,0,0,.1); }
.archive-header { border-bottom: 1px solid rgba(0,0,0,.1); }
.entry-title { font-family: Poppins, sans-serif; font-weight: 600; }
.pagination .page-numbers.current { background: #1263b1; border-color: #1263b1; }
.pagination a.page-numbers:hover { border-color: #1263b1; color: #1263b1; }
.search-submit { background: #1263b1; }
.search-submit:hover { background: #0b4d8c; }
.button, .comment-form .submit { background: #1263b1; }
.button:hover, .comment-form .submit:hover { background: #0b4d8c; }
.entry-content a { color: #1263b1; }
.entry-content a:hover { color: #0b4d8c; }

/* ============================= SLIDER NGANG (svod) ============================= */
.bth-svod { margin-bottom: 34px; }
.bth-svod-wrap { position: relative; }
.bth-svod-track {
	display: flex; gap: var(--bth-gap);
	overflow-x: auto; scroll-snap-type: x proximity;
	scrollbar-width: none; padding-bottom: 4px;
}
.bth-svod-track::-webkit-scrollbar { display: none; }
.bth-svod-slide {
	flex: 0 0 218px; scroll-snap-align: start;
}
.bth-svod-slide .story__heading { font-size: 14.5px; }
.bth-svod-btn {
	position: absolute; top: 70px; z-index: 5;
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid #e5e5e5; background: #fff; color: #212529;
	font-size: 16px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 3px 10px rgba(0,0,0,.15); cursor: pointer;
}
.bth-svod-btn:hover { background: #1263b1; color: #fff; border-color: #1263b1; }
.bth-svod-prev { left: -14px; }
.bth-svod-next { right: -14px; }

/* ============================= DẢI TIÊU ĐIỂM 4 CARD ============================= */
.bth-topicstrip { margin-bottom: 34px; }
.bth-col4 {
	display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
	gap: var(--bth-gap);
}

/* ============================= DCV3: HÀNG 2 BÀI KHÔNG HEADING ============================= */
.bth-dcv3 {
	display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 24px var(--bth-gap);
	margin-bottom: 30px; padding-bottom: 6px;
	border-bottom: 1px solid rgba(0,0,0,.08);
}
.bth-dcv3 .story { padding-bottom: 18px; border-bottom: 1px dashed rgba(0,0,0,.1); }
.bth-dcv3 .story:nth-last-child(-n+2) { border-bottom: 0; }
.bth-dcv3 .story__heading { font-size: 16px; }

/* ============================= 4 CỘT CON TRONG DẢI TỐI CUỐI ============================= */
.bth-minicols {
	display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
	gap: var(--bth-gap);
	margin-top: 32px; padding-top: 26px;
	border-top: 1px solid rgba(255,255,255,.15);
}
.bth-minicol-head {
	font-family: var(--font-bar);
	font-size: 18px; font-weight: 500; text-transform: uppercase;
	border-left: 3px solid #1263b1; padding-left: 8px; margin-bottom: 14px;
}
.bth-minicol-head a { color: #fff; }
.bth-minicol-head a:hover { color: #a8cdf0; }
.bth-minicol .story__heading { font-size: 14.5px; }
.bth-minicol-links { list-style: none; margin-top: 12px; }
.bth-minicol-links li { padding: 8px 0; border-top: 1px dashed rgba(255,255,255,.15); }
.bth-minicol-links a { font-size: 13.5px; color: rgba(255,255,255,.85); }
.bth-minicol-links a:hover { color: #fff; }

/* ============================= LIÊN KẾT HỮU ÍCH (sidebar bài viết) ============================= */
.bth-links-box { margin-bottom: 28px; }
.bth-links-list { list-style: none; }
.bth-links-list li { border-bottom: 1px dashed rgba(0,0,0,.1); }
.bth-links-list a {
	position: relative; display: block;
	padding: 9px 0 9px 16px;
	font-size: 14px; font-weight: 500; color: #212529;
}
.bth-links-list a::before {
	content: "›"; position: absolute; left: 2px; top: 50%;
	transform: translateY(-54%);
	color: #1263b1; font-weight: 700;
}
.bth-links-list a:hover { color: #1263b1; }

/* ============================= MENU DÍNH (fixed khi cuộn qua header) ============================= */
.bth-nav.is-fixed {
	position: fixed; top: 0; left: 0; right: 0; width: 100%;
	z-index: 1000;
	box-shadow: 0 3px 8px rgba(0,0,0,.14);
}
.admin-bar .bth-nav.is-fixed { top: 32px; }

/* ============================= VỊ TRÍ BANNER ============================= */
.bth-banner { margin: 14px auto; text-align: center; }
.bth-banner img { margin: 0 auto; }
.bth-banner--empty {
	display: flex; align-items: center; justify-content: center;
	min-height: 90px;
	background: repeating-linear-gradient(45deg, #fafafa, #fafafa 12px, #f3f4f6 12px, #f3f4f6 24px);
	border: 1px dashed #d9d9d9; border-radius: 0;
}
.bth-banner--empty span {
	font-size: 12px; font-weight: 600; letter-spacing: 1px;
	text-transform: uppercase; color: #b0b6bd;
}
.bth-banner--banner-side-1, .bth-banner--banner-side-2 { margin: 0 0 28px; }
.bth-banner--banner-side-1.bth-banner--empty, .bth-banner--banner-side-2.bth-banner--empty { min-height: 250px; }

/* ============================= KHỐI TIÊU ĐIỂM 4 ẢNH TRÒN ============================= */
.bth-strip {
	background: #e9f2fb;
	background-image: linear-gradient(180deg, rgba(215,32,39,.04), rgba(253,243,227,0) 40%);
	border: 1px solid #cfe0f2;
	padding: 26px 0 30px; margin-bottom: 34px;
}
.bth-strip-title {
	font-family: var(--font-bar);
	font-size: 26px; font-weight: 500; line-height: 1.2;
	text-transform: uppercase; text-align: center; color: #1263b1;
	margin: 0 0 24px;
}
.bth-strip-grid {
	display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
	gap: var(--bth-gap);
}
.bth-strip-item { text-align: center; }
.bth-strip-photo {
	display: block; width: 170px; height: 170px; margin: 0 auto 16px;
	border-radius: 50%; overflow: hidden;
	border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.12);
	background: #eee;
}
.bth-strip-photo img, .bth-strip-photo .thumb-placeholder {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.bth-strip-caption { font-size: 14px; line-height: 1.5; color: #212529; }
.bth-strip-name {
	display: block; font-weight: 700; color: #1263b1; margin-bottom: 4px;
	text-transform: uppercase; font-size: 13px; letter-spacing: .5px;
}
.bth-strip-desc { display: block; color: #212529; font-family: Poppins, sans-serif; font-weight: 500; }
.bth-strip-desc:hover, .bth-strip-name:hover { color: #0b4d8c; }

/* ============================= BREADCRUMB + TRANG DANH MỤC ============================= */
.bth-breadcrumb {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 600; color: #6c757d;
	margin-bottom: 16px;
}
.bth-breadcrumb a { color: #6c757d; }
.bth-breadcrumb a:hover { color: #1263b1; }
.bth-breadcrumb strong { color: #1263b1; text-transform: uppercase; }
.bth-breadcrumb .sep { color: #ccc; }
.bth-breadcrumb-sub { display: flex; flex-wrap: wrap; gap: 14px; margin-left: 12px; }
.bth-breadcrumb-sub a {
	position: relative; padding-left: 12px; font-weight: 500;
}
.bth-breadcrumb-sub a::before {
	content: ""; position: absolute; left: 0; top: 50%;
	width: 4px; height: 4px; border-radius: 50%;
	background: #1263b1; transform: translateY(-50%);
}
.bth-catpage { padding-top: 20px; }
.bth-abfcate {
	display: grid; grid-template-columns: 2fr 1fr 1fr;
	gap: 24px var(--bth-gap); margin-bottom: 10px;
}
.bth-abfcate .story--focus { grid-row: 1 / 3; }
.bth-abfcate .story--focus .story__heading { font-size: 24px; }
.bth-divider {
	height: 3px; margin: 30px auto;
	background: linear-gradient(90deg, transparent, #1263b1 20%, #1263b1 80%, transparent);
	opacity: .25; border-radius: 2px;
}
.bth-childcats {
	display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
	gap: var(--bth-gap); margin-bottom: 34px;
}
.bth-childcat .bth-heading { font-size: 22px; }
.bth-childcat .story { margin-bottom: 18px; }

/* ============================= TRANG BÀI VIẾT ============================= */
.bth-artpage { padding-top: 12px; }
.bth-article { position: relative; margin: 0 0 34px; }
/* Cột bài bên trái có kẻ phân cách dọc với sidebar (như bản gốc).
   Kẻ nằm GIỮA khoảng gap: cách chữ bài 15px và cách sidebar 15px. */
@media (min-width: 1024px) {
	.bth-art-main {
		padding-right: calc(var(--bth-gap) / 2);
		margin-right: calc(-1 * var(--bth-gap) / 2);
		border-right: 1px solid rgba(0,0,0,.1);
	}
}
.bth-art-cate-top {
	display: inline-block;
	font-size: 13px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .5px; color: #1263b1; margin-bottom: 6px;
}
.bth-art-cate-top:hover { color: #0b4d8c; }
.bth-art-title {
	font-family: Poppins, sans-serif;
	font-size: 30px; font-weight: 600; line-height: 1.3;
	color: #212529; margin: 0 0 12px;
}
.bth-art-meta {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	padding-bottom: 14px; margin-bottom: 16px;
	border-bottom: 1px dashed rgba(0,0,0,.15);
}
.bth-art-meta-left { display: flex; align-items: center; flex-wrap: wrap; color: #6c757d; font-size: 14px; }
.bth-art-meta-left > :not(:first-child)::before { content: "|"; color: #ddd; padding: 0 10px; }
.bth-art-time { display: inline-flex; align-items: center; gap: 6px; }
.bth-art-time svg { color: #6c757d; }
/* Nút "Theo dõi trên Google News" — viền vàng nét đứt, bo tròn (như bản gốc) */
.bth-ggnews {
	display: inline-flex; align-items: center; gap: 7px;
	height: 30px; padding: 0 16px;
	background: #fff3cd; border: 1px dashed #ffc107; border-radius: 20px;
	font-size: 12.5px; font-weight: 500; color: #212529; flex: none;
}
.bth-ggnews:hover { background: #ffe9a8; color: #212529; }
.bth-art-share { display: flex; gap: 8px; flex: none; }
/* Thanh share DỌC bên trái bài (chỉ màn hình rộng — nằm trong rãnh trống) */
.bth-art-social {
	position: absolute; left: -64px; top: 4px;
	display: none; flex-direction: column; align-items: center; gap: 8px;
	width: 44px;
}
.bth-art-social-label {
	font-size: 11px; font-weight: 600; text-transform: uppercase;
	color: #6c757d; letter-spacing: .5px;
}
@media (min-width: 1440px) { .bth-art-social { display: flex; left: -80px; } }
@media (min-width: 1280px) and (max-width: 1439px) { .bth-art-social { display: flex; } }
@media (min-width: 1280px) { .bth-art-share--inline { display: none; } }
.bth-art-share--inline { margin-bottom: 16px; }
.bth-share-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	border: 1px solid #e2e2e2; background: #fff; color: #6c757d; cursor: pointer;
}
.bth-share-btn:hover { color: #fff; background: #1263b1; border-color: #1263b1; }
.bth-copylink.copied { color: #fff; background: #1a9c46; border-color: #1a9c46; }
.bth-art-sapo {
	font-size: 18px; font-weight: 700; line-height: 1.6;
	text-align: justify; color: #212529; margin: 0 0 18px;
}
.bth-art-thumb { margin: 0 0 20px; }
.bth-art-thumb img { border-radius: 0; width: 100%; height: auto; }
.bth-art-thumb figcaption {
	font-size: 15px; color: #6c757d; text-align: center; padding: 10px 0 0; font-style: italic;
}
.bth-art-content { font-size: 17px; line-height: 1.8; }
.bth-art-tags { margin-top: 24px; }
.bth-suggest { margin-top: 10px; }
.bth-artnew { margin-top: 34px; }
.bth-artnew .bth-timeline-list .story--row:last-child { border-bottom: 0; }

/* Mega menu: cột cha + danh sách con */
.bth-mega-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 22px 26px; align-items: start; }
.bth-mega-col { min-width: 0; }
.bth-mega-cat {
	border-left: 0; background: none; padding: 0 0 6px;
	font-size: 16px; font-weight: 500; color: #212529;
	border-bottom: 1px solid #f0f0f0;
}
.bth-mega-cat:hover { background: none; color: #1263b1; }
.bth-mega-sub { list-style: none; margin-top: 8px; }
.bth-mega-sub li { padding: 3px 0; }
.bth-mega-sub a { font-family: Poppins, sans-serif; font-size: 13.5px; color: #495057; }
.bth-mega-sub a:hover { color: #1263b1; }
.bth-mega-drop { max-height: 75vh; overflow-y: auto; }

/* ============================= WEATHER: CHỌN TỈNH ============================= */
.bth-weather-select {
	display: block; width: 100%;
	padding: 9px 12px; margin-bottom: 10px;
	font-family: Poppins, sans-serif; font-size: 14px; color: #212529;
	background: #fff; border: 1px solid #e2e2e2; border-radius: 0;
	cursor: pointer;
}
.bth-weather-select:focus { outline: 2px solid #1263b1; outline-offset: -1px; }

/* ============================= DẢI 4 BÀI DƯỚI HERO ============================= */
.bth-hero-bottom {
	display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
	gap: var(--bth-gap);
	margin-top: 24px; padding-top: 22px;
	border-top: 1px solid rgba(0,0,0,.1);
}
.bth-hero-bottom .story__heading { font-size: 14.5px; }

/* Danh sách 6 bài 2 cột dưới hero — cân cột trái với sidebar */
.bth-hero-list {
	display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 0 var(--bth-gap);
	margin-top: 22px; padding-top: 20px;
	border-top: 1px solid rgba(0,0,0,.1);
}
.bth-hero-list .story--line .story__heading { font-size: 15px; }
@media (max-width: 767px) {
	.bth-hero-list { grid-template-columns: minmax(0,1fr); }
}

/* ============================= HEADER CHUYÊN MỤC (khung viền) ============================= */
.bth-cat-header {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	border: 1px solid #ececec; background: #fff;
	padding: 14px 18px; margin-bottom: 22px;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.bth-cat-title {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--font-bar);
	font-size: 26px; font-weight: 600; line-height: 1;
	text-transform: uppercase; color: #212529; margin: 0;
}
.bth-cat-title svg { color: #1263b1; flex: none; }
.bth-cat-subnav { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; }
.bth-cat-subnav a {
	position: relative; padding-left: 16px;
	font-family: var(--font-bar); font-size: 15px; font-weight: 500;
	text-transform: uppercase; color: #212529;
}
.bth-cat-subnav a::before {
	content: "»"; position: absolute; left: 0; top: 50%;
	transform: translateY(-52%); color: #1263b1; font-weight: 700;
}
.bth-cat-subnav a:hover { color: #1263b1; }

/* ============================= TICKER ★ TRANG DANH MỤC ============================= */
.bth-ticker--star { border: 1px solid #ececec; margin-bottom: 22px; }
.bth-ticker--star .bth-ticker-item::before { content: "★"; color: #f0a500; margin-right: 12px; }

/* ============================= INFINITE SCROLL ============================= */
.bth-infinite {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 22px 0; color: #6c757d; font-size: 14px;
	visibility: hidden;
}
.bth-infinite.is-loading { visibility: visible; }
.bth-infinite-spin {
	width: 18px; height: 18px; flex: none;
	border: 2px solid #eee; border-top-color: #1263b1; border-radius: 50%;
	animation: bth-spin .8s linear infinite;
}
@keyframes bth-spin { to { transform: rotate(360deg); } }

/* ============================= RESPONSIVE ============================= */
@media (max-width: 1199px) {
	:root { --container: 980px; --bth-gap: 20px; }
	.bth-mp-grid { grid-template-columns: 1.6fr 1fr 1fr; }
	.bth-logo { font-size: 44px; }
}

@media (max-width: 1023px) {
	.bth-cols { grid-template-columns: minmax(0,1fr); }
	.bth-topad { display: none; }
	.bth-mp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.bth-mp-grid .story--focus { grid-column: 1 / 3; grid-row: auto; }
	.bth-zone--dcv1 .bth-zone-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.bth-zone--dcv1 .story--focus { grid-column: 1 / 3; grid-row: auto; }
	.bth-mega-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.bth-abfcate { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.bth-abfcate .story--focus { grid-column: 1 / 3; grid-row: auto; }
	.bth-strip-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
	.bth-childcats { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.bth-col4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.bth-minicols { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 767px) {
	.bth-highlight { grid-template-columns: minmax(0,1fr); }
	.bth-hl-center { order: -1; }
	.bth-zone--dcv0 .bth-zone-grid, .bth-col3 { grid-template-columns: minmax(0,1fr); }
	.bth-mp-grid { grid-template-columns: minmax(0,1fr); }
	.bth-mp-grid .story--focus { grid-column: auto; }
	.story--row { grid-template-columns: minmax(0,1fr); gap: 10px; }
	.bth-footer-info { grid-template-columns: minmax(0,1fr); }
	.bth-footer-right { text-align: left; }
	.bth-mega-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.bth-logo { font-size: 36px; }
	.bth-topbar-left .bth-topbar-menu { display: none; }
	.bth-abfcate, .bth-strip-grid, .bth-childcats, .bth-col4, .bth-minicols, .bth-dcv3 { grid-template-columns: minmax(0,1fr); }
	.bth-abfcate .story--focus { grid-column: auto; }
	.bth-dcv3 .story:nth-last-child(-n+2) { border-bottom: 1px dashed rgba(0,0,0,.1); }
	.bth-dcv3 .story:last-child { border-bottom: 0; }
	.bth-svod-prev { left: 4px; }
	.bth-svod-next { right: 4px; }
	.bth-strip-photo { width: 140px; height: 140px; }
	.bth-art-title { font-size: 25px; }
	.bth-art-meta { flex-direction: column; align-items: flex-start; }
}


/* ====== BIẾN TẤU SKIN 12: hero bài lớn bên TRÁI, ảnh bo nhẹ, card nổi ====== */
.bth-highlight { grid-template-columns: 2fr 1fr; }
.bth-hl-center { order: -1; }
.story__thumb, .bth-art-thumb img { border-radius: 6px; }
.bth-hero-bottom .story__thumb, .bth-col4 .story__thumb, .bth-svod-slide .story__thumb {
	box-shadow: 0 3px 12px rgba(18, 99, 177, .12);
}
.bth-strip-photo { border-color: #fff; }
@media (max-width: 767px) { .bth-hl-center { order: 0; } }