/**
 * Bố cục "tb" (Nhật Báo) — khung dùng chung cho skin 19–21.
 *
 * Dựng theo gói thiết kế `tenbao-design` (DESIGN_SPEC.md + 6 bản preview):
 * măng-sét căn giữa kiểu báo in, container 1280px, lề 80px, chữ tiêu đề Noto
 * Serif, chữ giao diện Be Vietnam Pro, logo Noto Serif Display.
 *
 * Quy ước giống layout-nt.css:
 * - File này CHỈ có khung và số đo. Màu và font nằm trong skin-19..21.css dưới
 *   dạng biến `--tb-*`, nên thêm một tông màu mới là thêm ~40 dòng, không phải
 *   chép lại cả nghìn dòng như thời skin 11–14.
 * - Không đụng tới `.bth-*` (trừ `.bth-shell` và ba class banner nằm trong
 *   `.tb-ad`), để quảng cáo nền và hub vẫn bám đúng tên cũ.
 * - Mọi nếp dọn viết dạng `.tb <tag>` đều NẶNG HƠN class đơn (0,1,1 so với
 *   0,1,0). Cái bẫy này đã làm lệch thanh menu của bố cục nt, nên ở đây các
 *   wrapper là thẻ danh sách đều được khai lại kèm `.tb` đứng trước.
 *
 * Breakpoint: < 768px theo bản mobile, ≥ 1200px theo bản desktop, khoảng giữa
 * dùng bố cục desktop với lề 32px và cột phải tụt xuống dưới.
 */

/* ========================================================================== */
/* 1. Nền tảng                                                                 */
/* ========================================================================== */

.tb {
	position: relative;
	--tb-max: 1280px;
	--tb-pad: 80px;
	--tb-gap: 32px;

	background: var(--tb-bg);
	color: var(--tb-ink);
	font-family: var(--tb-font);
	font-size: 15px;
	line-height: 1.55;
}

/* Gỡ mấy nếp của base.css để số đo trong file này là số đo cuối cùng. */
.tb h1, .tb h2, .tb h3, .tb h4, .tb h5, .tb h6 { margin: 0; font-weight: 700; line-height: 1.3; color: var(--tb-ink); }
.tb p { margin: 0; }
.tb ul, .tb ol { margin: 0; padding: 0; list-style: none; }
.tb a { color: inherit; text-decoration: none; }
/* Nếp trên nặng (0,1,1) nên đè mọi rule một class: thẻ <a> nào cần màu
   riêng (măng-sét, kicker, tab…) phải khai kèm `.tb` đứng trước. */
.tb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tb img { max-width: 100%; display: block; }
.tb figure { margin: 0; }
.tb [hidden] { display: none !important; }
/* Không có JS thì nút Danh mục chỉ là link neo — nếp này mở bảng ra. */
.tb .tb-panel:target { display: block !important; }

/*
 * --tb-max là bề ngang NỘI DUNG (1280px = 1440 − 2×80 của bản thiết kế), nên
 * max-width phải cộng thêm hai lề. Lấy thẳng 1280px làm max-width là nội dung
 * chỉ còn 1120px — hụt đúng 160px so với artboard.
 */
.tb-wrap {
	width: 100%;
	max-width: calc(var(--tb-max) + var(--tb-pad) * 2);
	margin: 0 auto;
	padding: 0 var(--tb-pad);
}

/* Thanh cuộn ngang: cuộn được nhưng không hiện thanh xám. */
.tb-scroll {
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x proximity;
}
.tb-scroll::-webkit-scrollbar { display: none; }

/* Khung ảnh: luôn là thẻ <a> nên phải blockify, không thì aspect-ratio vô tác
   dụng và ảnh giữ nguyên tỉ lệ gốc (bẫy đã vấp ở bố cục nt). */
.tb-thumb {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--tb-band);
}
.tb-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Ô ảnh có đủ tỉ lệ từ ô dọc 300:380 tới 16:9, còn ảnh là bản cắt 16:9 → cover cắt
   hai bên, mà trình duyệt (sizes="auto") chọn ảnh theo bề ngang thẻ img nên lấy
   thiếu — ô dọc thiếu tới 2,25 lần. Nới thẻ img theo khổ 16:9, canh giữa: nhìn y hệt
   cover, nhưng bề ngang thẻ img giờ chính là bề rộng ảnh cần. Tỉ lệ ô khai ở --tb-r
   ngay cạnh từng aspect-ratio (thêm ô mới thì nhớ khai kèm, thiếu thì coi như 16:9).
   PHẢI là bề rộng phần trăm, KHÔNG dùng width:auto + aspect-ratio: ở các hàng cuộn
   ngang trên điện thoại, khung ảnh lấy bề rộng theo nội dung → vòng lặp kích thước,
   ảnh phình tới 3.467px (đã vấp ở baotinh, bản 1.22.1). Lớp baochi-169: inc/images.php. */
.tb-thumb img.baochi-169 {
	--tb-w: max(100%, 100% * 16 / 9 / var(--tb-r, calc(16 / 9)));
	width: var(--tb-w);
	max-width: none;
	margin-left: calc((100% - var(--tb-w)) / 2);
}
.tb-thumb--empty::after {
	content: "";
	position: absolute; inset: 0;
	background: repeating-linear-gradient(45deg, var(--tb-band), var(--tb-band) 10px, var(--tb-line) 10px, var(--tb-line) 20px);
	opacity: .5;
}

.tb-clamp-2, .tb-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tb-clamp-2 { -webkit-line-clamp: 2; }
.tb-clamp-3 { -webkit-line-clamp: 3; }

/* ========================================================================== */
/* 2. Đầu đề mục                                                               */
/* ========================================================================== */

.tb-sechead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.tb-sechead__title {
	font-family: var(--tb-serif);
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .01em;
}
/* Vạch 40×3 dưới đầu đề, cách 8px — dấu nhận biết của bộ thiết kế này. */
.tb-sechead__title::after {
	content: "";
	display: block;
	width: 40px; height: 3px;
	margin-top: 8px;
	background: var(--tb-accent);
}
.tb .tb-sechead__more {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--tb-muted);
}
.tb-sechead__more:hover { color: var(--tb-accent); }

/* Vạch ngăn giữa các dải nội dung. */
.tb-band-sep { border-top: 6px solid var(--tb-band); }
/* Chỉ khai padding DỌC: khối này hay đi kèm .tb-wrap, mà viết `padding: 40px
   0 48px` là xoá luôn lề ngang 80px của khung — cả dải tràn ra sát mép. */
.tb-section { padding-top: 40px; padding-bottom: 48px; }

/* ========================================================================== */
/* 3. Header desktop                                                           */
/* ========================================================================== */

.tb-header { background: var(--tb-bg); }

/* --- Thanh trên cùng 44px nền accent, DÍNH khi cuộn --- */
/*
 * Cuộn trang thì chỉ thanh này ở lại (đúng nhandan.vn): măng-sét và hàng ngày
 * tháng trôi đi, còn lối vào Danh mục + tìm kiếm luôn trong tầm tay. Chiều cao
 * 44px được khai thành biến vì ngăn kéo Danh mục bám đúng số đó.
 */
.tb { --tb-top-h: 44px; }
/*
 * Cái DÍNH là khối .tb-bar (thanh đỏ + thanh điện thoại + hai bảng), không phải
 * riêng thanh đỏ: hai bảng treo dưới khối này nên luôn bám đúng mép dưới thanh.
 */
.tb-bar { position: sticky; top: 0; z-index: 90; }
.tb-top { background: var(--tb-accent); color: #fff; }
.tb-top-inner {
	position: relative;
	height: var(--tb-top-h);
	display: flex; align-items: center; gap: 16px;
	font-size: 13px; font-weight: 500;
}

/* Tên báo thu nhỏ: chỉ hiện khi đã cuộn qua măng-sét. */
.tb .tb-top__brand {
	display: none;
	position: absolute; left: 50%; transform: translateX(-50%);
	font-family: var(--tb-display);
	font-size: 21px; font-weight: 900; line-height: 1;
	letter-spacing: -.02em;
	color: #fff;
}
body.tb-scrolled .tb-top__brand { display: block; }
/* Logo đổi trắng (baochi_logo_trang) thay cho tên báo bằng chữ. */
/* Cao ĐÚNG bằng ô viền của nút DANH MỤC (.tb-btn-ghost 32px) — logo đã cắt sát
   chữ trong baochi_logo_cat_vien() nên 32px này là chiều cao chữ thật. */
.tb .tb-top__brand .baochi-logo-trang { display: block; height: 32px; width: auto; max-width: 260px; }

/*
 * Người trong toà soạn đang đăng nhập thì WordPress chèn thanh quản trị cao
 * 32px (điện thoại 46px) và đẩy cả trang xuống. Thanh đỏ dính và ngăn kéo phải
 * trừ đúng chừng đó, không thì chúng nằm khuất dưới thanh quản trị.
 */
body.admin-bar .tb-bar { top: 32px; }
body.admin-bar .tb-panel--menu { height: calc(100vh - var(--tb-top-h) - 32px - var(--bgad-top, 0px)); }
@media (max-width: 782px) {
	body.admin-bar .tb-bar { top: 46px; }
	body.admin-bar .tb-panel--menu { height: calc(100vh - var(--tb-top-h) - 46px); }
}
.tb-top__left, .tb-top__right { display: flex; align-items: center; gap: 10px; }
.tb-top__right { margin-left: auto; }

.tb-btn-ghost {
	height: 32px;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 0 12px;
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 4px;
	font-family: inherit;
	font-size: 12px; font-weight: 700; letter-spacing: .06em;
	cursor: pointer;
}
.tb-btn-ghost:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.tb-btn-icon {
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 4px;
	cursor: pointer;
}
.tb-btn-icon:hover { background: rgba(255, 255, 255, .12); }

.tb .tb-top__link {
	font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em;
	color: rgba(255, 255, 255, .92);
}
.tb-top__sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .35); }

/* --- Khối măng-sét cao 150px --- */
.tb-masthead {
	min-height: 150px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px;
	padding: 22px 0;
	text-align: center;
}
.tb .tb-masthead__name {
	font-family: var(--tb-display);
	font-size: 64px; font-weight: 900; line-height: 1;
	letter-spacing: -.02em;
	color: var(--tb-accent);
}
.tb-masthead__name:hover { text-decoration: none; }
.tb-masthead__tagline {
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .12em;
	color: var(--tb-muted);
}
.tb-masthead .custom-logo { max-height: 84px; width: auto; }

/* --- Hàng ngày tháng + vài link nhanh --- */
/*
 * Bố cục này KHÔNG có thanh chuyên mục ngang (đúng lối nhandan.vn): mọi chuyên
 * mục nằm trong bảng "Danh mục". Hàng này chỉ còn ngày tháng và ít link nhanh.
 */
.tb-navrow { border-top: 1px solid var(--tb-line); border-bottom: 1px solid var(--tb-line); }
.tb-navrow-inner {
	min-height: 46px;
	display: flex; align-items: center; gap: 24px;
}
.tb-navrow__date {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--tb-muted);
}
.tb-quick {
	margin-left: auto;
	display: flex; align-items: center; flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 22px;
}
.tb .tb-quick__item {
	padding: 12px 0;
	font-size: 13.5px; font-weight: 500;
	color: var(--tb-muted);
}
.tb .tb-quick__item:hover { color: var(--tb-accent); }
/* --- Dải tin chạy ngang --- */
.tb-ticker { border-bottom: 1px solid var(--tb-line); }
.tb-ticker__view { overflow: hidden; }
.tb-ticker__track {
	display: flex; align-items: center;
	width: max-content;
	height: 42px;
	animation: tb-chay 60s linear infinite;
}
.tb-ticker__view:hover .tb-ticker__track { animation-play-state: paused; }
.tb .tb-ticker__item {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 7px;
	padding-right: 38px;
	font-size: 13.5px; font-weight: 500;
	color: var(--tb-ink);
	white-space: nowrap;
}
.tb .tb-ticker__item:hover { color: var(--tb-accent); }
.tb-ticker__star { flex: 0 0 auto; color: var(--tb-accent); }
/* Băng in nội dung hai lần nên trượt đúng một nửa là về chỗ cũ, liền mạch. */
@keyframes tb-chay {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.tb-ticker__track { animation: none; }
	.tb-ticker__view { overflow-x: auto; scrollbar-width: none; }
	.tb-ticker__view::-webkit-scrollbar { display: none; }
}

/* ========================================================================== */
/* 4. Header mobile                                                            */
/* ========================================================================== */

.tb-mobhead { display: none; }
.tb-mobbar {
	height: 56px;
	display: flex; align-items: center;
	background: var(--tb-accent);
	color: #fff;
}
.tb-mobbar__btn {
	width: 48px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	background: transparent; border: 0; color: #fff;
	cursor: pointer;
}
.tb-mobbar__name {
	flex: 1 1 auto;
	text-align: center;
	font-family: var(--tb-display);
	font-size: 30px; font-weight: 900; line-height: 1;
	letter-spacing: -.02em;
	color: #fff;
}
.tb-mobbar__name:hover { text-decoration: none; }
.tb-mobbar__name .baochi-logo-trang { display: block; height: 30px; width: auto; max-width: 190px; margin: 0 auto; }
.tb-mobbar__right { display: flex; }
.tb-mobbar__right .tb-mobbar__btn { width: 44px; }

.tb-panel {
	border-bottom: 1px solid var(--tb-line);
	background: var(--tb-bg);
	padding: 16px 0 20px;
}
/*
 * Bảng "Danh mục" — ngăn kéo dọc bên trái, đúng kiểu nhandan.vn.
 *
 * Treo NGAY DƯỚI khối dính .tb-bar (absolute, top: 100%) chứ không ghim theo
 * màn hình: ghim theo màn hình thì khi bật quảng cáo nền, trang bị bó vào giữa
 * và đẩy xuống, còn bảng vẫn chạy hết bề ngang và nằm đè lên thanh.
 *
 * Khung phủ phần còn lại của màn hình (nền tối mờ) và chính khung này cuộn dọc
 * — KHÔNG cho ngăn kéo tự cuộn, vì khung cuộn hẹp sẽ cắt mất cột con trượt
 * ngang. Khung rộng bằng cả khung trang thì cột con luôn lọt.
 */
.tb-panel--menu {
	position: absolute;
	top: 100%; left: 0; right: 0;
	height: calc(100vh - var(--tb-top-h) - var(--bgad-top, 0px));
	z-index: 80;
	padding: 0;
	background: rgba(16, 13, 11, .38);
	border: 0;
	overflow-y: auto;
}
.tb-panel--search {
	position: absolute;
	top: 100%; left: 0; right: 0;
	z-index: 80;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}
/* Ngăn kéo mang đúng màu thanh header — nhìn như một khối liền với nó. */
.tb-drawer {
	width: 320px; max-width: 86vw;
	background: var(--tb-accent);
	color: #fff;
	border: 0;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
	/*
	 * KHÔNG cho ngăn kéo tự cuộn: `overflow-y: auto` kéo theo overflow-x và
	 * CẮT mất cột con trượt ngang. Danh sách dài thì để ngăn kéo cao ra, bạn
	 * đọc cuộn cả trang — mất cột con mới là hỏng.
	 */
	overflow: visible;
}
.tb-drawer__search { display: flex; gap: 8px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .16); }

/* Mỗi mục là mốc định vị cho cột con của chính nó. */
.tb-drawer__item { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.tb-drawer__item:last-child { border-bottom: 0; }
.tb .tb-drawer__link {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 15px 18px;
	font-size: 14px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .03em;
	color: #fff;
}
.tb-drawer__item:hover > .tb-drawer__link,
.tb-drawer__item:focus-within > .tb-drawer__link {
	background: rgba(0, 0, 0, .22);
	color: #fff;
	text-decoration: none;
}
.tb-drawer__arrow { flex: 0 0 auto; opacity: .7; }

/*
 * Cột con trượt ra bên phải, đỉnh thẳng hàng với mục cha. Đóng mở bằng
 * visibility + opacity để chuột kịp rê ngang sang.
 */
.tb-drawer__sub {
	position: absolute; left: 100%; top: 0;
	width: 250px;
	padding: 8px 0;
	background: var(--tb-accent-dark);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
	opacity: 0; visibility: hidden;
	transition: opacity .12s ease;
}
.tb-drawer__item:hover > .tb-drawer__sub,
.tb-drawer__item:focus-within > .tb-drawer__sub { opacity: 1; visibility: visible; }
.tb .tb-drawer__sub a {
	display: block;
	padding: 11px 20px;
	font-size: 14px; font-weight: 500;
	color: #fff;
}
.tb .tb-drawer__sub a:hover { background: rgba(0, 0, 0, .25); text-decoration: none; }
/* ========================================================================== */
/* 5. Trang chủ — dải tin chính                                                */
/* ========================================================================== */

.tb-hero {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr) 300px;
	gap: var(--tb-gap);
	padding: 28px 0 48px;
}

/* --- Cột trái: 4 thẻ ảnh trên chữ dưới --- */
.tb-side-card { padding-bottom: 18px; border-bottom: 1px solid var(--tb-line); }
.tb-side-card + .tb-side-card { padding-top: 18px; }
.tb-side-card:last-child { border-bottom: 0; }
.tb-side-card .tb-thumb { aspect-ratio: 300 / 172; --tb-r: calc(300 / 172); }
.tb-side-card__title {
	margin-top: 10px;
	font-family: var(--tb-serif);
	font-size: 16px; font-weight: 600; line-height: 1.35;
}

/* --- Cột giữa: bài chủ --- */
.tb-lead {
	padding: 0 32px;
	border-left: 1px solid var(--tb-line);
	border-right: 1px solid var(--tb-line);
	text-align: center;
}
.tb-lead .tb-thumb { aspect-ratio: 16 / 9; --tb-r: calc(16 / 9); }
.tb-lead__title {
	margin-top: 18px;
	font-family: var(--tb-serif);
	font-size: 30px; font-weight: 700; line-height: 1.3;
}
.tb-lead__time { margin-top: 10px; font-size: 12px; color: var(--tb-muted); }
.tb-lead__desc { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--tb-muted); }
.tb-lead__rule { width: 120px; height: 1px; margin: 22px auto; background: var(--tb-line); }
.tb-lead__list > li + li { margin-top: 14px; }
.tb-lead__link {
	font-family: var(--tb-serif);
	font-size: 15px; font-weight: 600; line-height: 1.45;
}
.tb-lead__list time { display: block; margin-top: 4px; font-family: var(--tb-font); font-size: 12px; font-weight: 400; color: var(--tb-muted); }

/* --- Cột phải: ý kiến --- */
.tb-opinion__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 44px;
	gap: 12px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px solid var(--tb-line);
}
.tb-opinion__title { font-family: var(--tb-serif); font-size: 16px; font-weight: 600; line-height: 1.4; }
.tb-opinion__by {
	margin-top: 8px;
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--tb-accent);
}
.tb-opinion__avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--tb-accent);
	background: var(--tb-band);
}
.tb-opinion__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ========================================================================== */
/* 6. Tâm điểm — thẻ phủ chữ                                                   */
/* ========================================================================== */

.tb-spot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tb-spot__item { position: relative; display: block; }
.tb-spot__item .tb-thumb { aspect-ratio: 300 / 380; --tb-r: calc(300 / 380); }
.tb-spot__item:hover { text-decoration: none; }
.tb-spot__cap {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 16px;
	background: var(--tb-scrim);
	color: #fff;
	font-family: var(--tb-serif);
	font-size: 19px; font-weight: 700; line-height: 1.35;
	text-align: center;
}

/* ========================================================================== */
/* 7. E-Magazine                                                               */
/* ========================================================================== */

.tb-emag { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.tb-emag__small .tb-thumb { aspect-ratio: 280 / 190; --tb-r: calc(280 / 190); }
.tb-emag__small-title {
	margin-top: 10px;
	font-family: var(--tb-serif);
	font-size: 16px; font-weight: 600; line-height: 1.4;
}
.tb-emag__lead { grid-column: span 2; grid-row: span 2; }
.tb-emag__lead .tb-thumb { aspect-ratio: 600 / 400; --tb-r: calc(600 / 400); }
.tb-emag__lead-title {
	margin-top: 16px;
	font-family: var(--tb-serif);
	font-size: 28px; font-weight: 700; line-height: 1.25;
}
.tb-emag__lead-desc { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--tb-muted); }

/* ========================================================================== */
/* 8. Dải tối "Chuyên sâu"                                                     */
/* ========================================================================== */

.tb-deep { background: var(--tb-dark); color: #fff; }
.tb-deep-inner {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 48px;
	padding-top: 44px;
	padding-bottom: 48px;
}
.tb-deep__label {
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .12em;
	color: rgba(255, 255, 255, .6);
}
.tb .tb-deep__title {
	margin-top: 14px;
	font-family: var(--tb-serif);
	font-size: 44px; font-weight: 700; line-height: 1.15;
	color: #fff;
}
.tb-deep__desc { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.tb-deep__tabs { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 26px; }
.tb .tb-deep__tab {
	font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
	color: rgba(255, 255, 255, .62);
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
}
.tb-deep__tab.is-active { color: #fff; border-bottom-color: var(--tb-accent); }
.tb-deep__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tb-deep__item {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	padding: 10px;
	background: rgba(0, 0, 0, .25);
}
.tb-deep__item:hover { text-decoration: none; background: rgba(0, 0, 0, .4); }
.tb-deep__item .tb-thumb { aspect-ratio: 88 / 56; --tb-r: calc(88 / 56); background: rgba(255, 255, 255, .08); }
.tb-deep__item-title { font-size: 13px; font-weight: 500; line-height: 1.4; color: #fff; }

/* ========================================================================== */
/* 9. Dòng tin (3 cột)                                                         */
/* ========================================================================== */

.tb-stream {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr) 300px;
	gap: var(--tb-gap);
}
.tb-stream__mid { min-width: 0; padding: 0 32px; border-left: 1px solid var(--tb-line); border-right: 1px solid var(--tb-line); }

/* --- Đọc nhiều --- */
.tb-most__head {
	display: flex; align-items: center; gap: 8px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--tb-ink);
}
.tb-most__head::before { content: ""; width: 8px; height: 8px; background: var(--tb-accent); }
.tb-most__head span {
	font-size: 18px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .02em;
	color: var(--tb-accent);
}
.tb-most__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--tb-line);
}
.tb-most__title { font-family: var(--tb-serif); font-size: 15px; font-weight: 600; line-height: 1.45; }
.tb-most__num {
	font-family: var(--tb-display);
	font-size: 40px; font-weight: 800; line-height: 1;
	color: var(--tb-numeral);
}

/* --- Thẻ dòng tin --- */
.tb-feed__item {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--tb-line);
}
.tb-feed__item:first-child { padding-top: 0; }
.tb-feed__item .tb-thumb { aspect-ratio: 220 / 138; --tb-r: calc(220 / 138); }
.tb .tb-feed__kicker {
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--tb-accent);
}
.tb-feed__title {
	margin-top: 6px;
	font-family: var(--tb-serif);
	font-size: 19px; font-weight: 700; line-height: 1.35;
}
.tb-feed__desc { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--tb-muted); }
.tb-feed__time { margin-top: 8px; font-size: 12px; color: var(--tb-muted); }

.tb-more {
	display: block;
	width: max-content;
	min-width: 180px;
	margin: 28px auto 0;
	padding: 13px 24px;
	text-align: center;
	font: 600 14px/1.2 var(--tb-font);
	border: 1px solid var(--tb-ink);
	background: transparent;
	color: var(--tb-ink);
	cursor: pointer;
}
.tb-more:hover { background: var(--tb-ink); color: var(--tb-bg); text-decoration: none; }
.tb-more.is-loading { opacity: .55; pointer-events: none; }

/* --- Cột phải của dòng tin --- */
.tb-aside > * + * { margin-top: 28px; }
.tb-aside__item { padding: 14px 0; border-bottom: 1px solid var(--tb-line); }
.tb-aside__item .tb-thumb { aspect-ratio: 300 / 190; --tb-r: calc(300 / 190); margin-bottom: 10px; }
.tb-aside__title { font-family: var(--tb-serif); font-size: 15px; font-weight: 600; line-height: 1.45; }

/* Widget của báo (hộp thời tiết…) nằm trong cột bên. */
.tb-widgets .widget + .widget { margin-top: 24px; }
.tb-widgets .widget-title,
.tb-widgets .wp-block-heading {
	margin: 0 0 12px;
	font-size: 16px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .02em;
	color: var(--tb-accent);
	border-bottom: 2px solid var(--tb-ink);
	padding-bottom: 8px;
}
.tb-widgets ul li { padding: 8px 0; border-bottom: 1px solid var(--tb-line); font-size: 14px; }

/* ========================================================================== */
/* 10. Hai khối chuyên mục lớn (bố cục "Ảnh | Video" của bản thiết kế)          */
/* ========================================================================== */

.tb-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.tb-duo__lead .tb-thumb { aspect-ratio: 600 / 390; --tb-r: calc(600 / 390); }
.tb-duo__lead-title {
	margin-top: 14px;
	font-family: var(--tb-serif);
	font-size: 20px; font-weight: 700; line-height: 1.35;
}
.tb-duo__row {
	display: grid;
	grid-template-columns: 136px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid var(--tb-line);
}
.tb-duo__row .tb-thumb { aspect-ratio: 136 / 80; --tb-r: calc(136 / 80); }
.tb-duo__row-title { font-family: var(--tb-serif); font-size: 15px; font-weight: 600; line-height: 1.4; }

/* ========================================================================== */
/* 11. Bốn khối chuyên mục cuối trang                                          */
/* ========================================================================== */

.tb-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.tb .tb-cats__head {
	display: flex; align-items: center; gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--tb-line);
	font-size: 14px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em;
	color: var(--tb-accent);
}
.tb-cats__head::before {
	content: "";
	width: 4px; height: 16px;
	background: var(--tb-accent);
	transform: skewX(-12deg);
}
.tb-cats__col .tb-thumb { aspect-ratio: 300 / 180; --tb-r: calc(300 / 180); margin-top: 16px; }
.tb-cats__title {
	margin-top: 12px;
	font-family: var(--tb-serif);
	font-size: 17px; font-weight: 700; line-height: 1.35;
}
.tb-cats__link {
	display: block;
	padding: 12px 0;
	border-top: 1px solid var(--tb-line);
	font-size: 14px; line-height: 1.45;
}
.tb-cats__list { margin-top: 12px; }

/* ========================================================================== */
/* 12. Trang chuyên mục                                                        */
/* ========================================================================== */

.tb-cat { padding: 28px 0 48px; }
.tb-cathead {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--tb-ink);
	margin-bottom: 28px;
}
.tb-cathead__title {
	font-family: var(--tb-serif);
	font-size: 36px; font-weight: 700; line-height: 1.1;
	text-transform: uppercase;
}
.tb-cathead__subs { display: flex; flex-wrap: wrap; gap: 18px; padding-bottom: 6px; }
.tb .tb-cathead__sub { font-size: 14px; color: var(--tb-muted); }
.tb-cathead__sub:hover { color: var(--tb-accent); }

.tb-cattop {
	display: grid;
	grid-template-columns: 5fr 5fr 3fr;
	gap: var(--tb-gap);
	padding-bottom: 32px;
	border-bottom: 1px solid var(--tb-line);
	margin-bottom: 32px;
}
.tb-cattop__lead .tb-thumb { aspect-ratio: 500 / 330; --tb-r: calc(500 / 330); }
.tb-cattop__lead-title {
	margin-top: 14px;
	font-family: var(--tb-serif);
	font-size: 22px; font-weight: 700; line-height: 1.3;
}
.tb-cattop__lead-desc { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--tb-muted); }
.tb-cattop__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-content: start; }
.tb-cattop__cell .tb-thumb { aspect-ratio: 220 / 128; --tb-r: calc(220 / 128); }
.tb-cattop__cell-title { margin-top: 8px; font-family: var(--tb-serif); font-size: 15px; font-weight: 600; line-height: 1.4; }
.tb-cattop__links > li { padding: 12px 0; border-bottom: 1px solid var(--tb-line); }
.tb-cattop__links > li:first-child { padding-top: 0; }
.tb-cattop__link { font-family: var(--tb-serif); font-size: 15px; font-weight: 600; line-height: 1.45; }

/* Thân trang chuyên mục: feed + cột bên. Không dùng .tb-stream vì khối đó ba
   cột, ở đây chỉ có hai. */
.tb-catbody { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
.tb-catbody__mid { min-width: 0; }

/* Phân trang: ô 40×40, trang hiện tại nền accent. */
.tb-pagination { margin-top: 32px; }
.tb-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tb-pagination .page-numbers {
	min-width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--tb-line);
	font-size: 14px; font-weight: 600;
}
.tb-pagination .page-numbers:hover { border-color: var(--tb-accent); color: var(--tb-accent); text-decoration: none; }
.tb-pagination .page-numbers.current { background: var(--tb-accent); border-color: var(--tb-accent); color: #fff; }

/* ========================================================================== */
/* 13. Trang bài viết                                                          */
/* ========================================================================== */

.tb-single { padding: 24px 0 48px; }
.tb-single-inner { max-width: 1120px; margin: 0 auto; }
.tb-crumb {
	font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .05em;
	color: var(--tb-muted);
}
.tb-crumb a:first-child { color: var(--tb-accent); }
.tb-crumb span { margin: 0 6px; }
.tb-article__title {
	max-width: 1000px;
	margin-top: 16px;
	font-family: var(--tb-serif);
	font-size: 40px; font-weight: 700; line-height: 1.25;
}
.tb-article__sapo {
	margin-top: 16px;
	font-family: var(--tb-serif);
	font-size: 19px; font-style: italic; line-height: 1.6;
	color: var(--tb-ink);
}
.tb-article-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 56px;
	margin-top: 28px;
}
.tb-article__meta {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--tb-line);
	border-bottom: 1px solid var(--tb-line);
	font-size: 13px; color: var(--tb-muted);
}
.tb-article__tools { display: flex; gap: 8px; }
.tb-tool {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--tb-line);
	background: transparent;
	color: var(--tb-ink);
	cursor: pointer;
}
.tb-tool:hover { border-color: var(--tb-accent); color: var(--tb-accent); text-decoration: none; }
.tb-tool.is-on { border-color: var(--tb-accent); color: var(--tb-accent); }

.tb-article__figure { margin-top: 22px; }
.tb-article__figure .tb-thumb { aspect-ratio: 16 / 9; --tb-r: calc(16 / 9); }
.tb-article__figure figcaption {
	margin-top: 10px;
	font-family: var(--tb-serif);
	font-size: 13.5px; font-style: italic; line-height: 1.5;
	text-align: center;
	color: var(--tb-muted);
}

.tb-article__body {
	margin-top: 24px;
	font-family: var(--tb-serif);
	font-size: 18px; line-height: 1.75;
}
.tb-article__body > * + * { margin-top: 20px; }
.tb-article__body h2 { font-size: 22px; line-height: 1.35; }
.tb-article__body h3 { font-size: 20px; line-height: 1.35; }
.tb-article__body a { color: var(--tb-accent); text-decoration: underline; text-underline-offset: 3px; }
.tb-article__body img, .tb-article__body figure, .tb-article__body iframe { max-width: 100%; }
.tb-article__body figcaption {
	margin-top: 8px;
	font-size: 13.5px; font-style: italic; text-align: center;
	color: var(--tb-muted);
}
.tb-article__body blockquote {
	margin: 24px 0;
	padding: 22px 0;
	border-top: 2px solid var(--tb-accent);
	border-bottom: 1px solid var(--tb-line);
	font-size: 24px; font-style: italic; line-height: 1.5;
}
.tb-article__body ul, .tb-article__body ol { padding-left: 24px; }
.tb-article__body ul { list-style: disc; }
.tb-article__body ol { list-style: decimal; }
.tb-article__body li + li { margin-top: 8px; }

.tb-article__author {
	margin-top: 24px;
	text-align: right;
	font-size: 13px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .05em;
	color: var(--tb-muted);
}
.tb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tb-tags a {
	height: 32px;
	display: inline-flex; align-items: center;
	padding: 0 12px;
	background: var(--tb-band);
	font-size: 13px;
}
.tb-tags a:hover { background: var(--tb-accent); color: #fff; text-decoration: none; }

.tb-related { margin-top: 36px; }
.tb-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tb-related__item .tb-thumb { aspect-ratio: 250 / 150; --tb-r: calc(250 / 150); }
.tb-related__title { margin-top: 10px; font-family: var(--tb-serif); font-size: 16px; font-weight: 600; line-height: 1.4; }

/* ========================================================================== */
/* 14. Chân trang — dùng mẫu chung footer-bth                                  */
/* ========================================================================== */

/*
 * Chân trang nằm NGOÀI .tb nên không ăn biến --tb-*; nó đọc bộ biến --c-* của
 * base.css. Ánh xạ lại ba biến để mẫu chung mang đúng tông của từng skin:
 * không làm vậy thì giao diện xanh than hay lục trầm lại có chân trang xanh
 * Lao Động mặc định.
 */
body.tb-layout {
	--c-primary: var(--tb-accent);
	--c-footer-bg: var(--tb-dark);
	--c-footer-text: #cccccc;
}

/*
 * Chữ trong chân trang phải thẳng hàng với nội dung trang. Mẫu chung để lề
 * 16px, còn bố cục này lề 80px — chỉnh bằng padding chứ KHÔNG chỉnh --container:
 * khi bật quảng cáo nền, .bth-shell bị bó lại (1170px) nên max-width không còn
 * quyết định gì, chỉ padding mới ăn.
 */
body.tb-layout .bth-footer-info,
body.tb-layout .bth-footer-strip-inner {
	max-width: calc(1280px + 160px);
	padding-left: 80px;
	padding-right: 80px;
}
@media (max-width: 1199px) {
	body.tb-layout .bth-footer-info,
	body.tb-layout .bth-footer-strip-inner { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 767px) {
	body.tb-layout .bth-footer-info,
	body.tb-layout .bth-footer-strip-inner { padding-left: 16px; padding-right: 16px; }
}
/* ========================================================================== */
/* 15. Quảng cáo                                                               */
/* ========================================================================== */

/*
 * .tb-ad chỉ là khung đặt chỗ; ruột bên trong do baochi_ads_banner() in ra với
 * ba class cũ (.bth-banner / .bth-ad-inline / .bth-banner--empty). base.css đã
 * tạo kiểu cho chúng theo gu skin cũ (viền đứt, sọc chéo) nên phải ghi đè bằng
 * selector con của .tb-ad. width:100% là bắt buộc: ô giữ chỗ có aspect-ratio
 * kèm min-height, thiếu bề ngang thì trình duyệt suy ngược từ min-height.
 */
.tb-ad { width: 100%; }
.tb-ad--head { margin: 22px 0 0; }
.tb-ad--mid { margin: 32px 0; }
.tb-ad--side { margin-top: 24px; }
.tb-ad .bth-banner { margin: 0; text-align: center; }
.tb-ad .bth-banner img,
.tb-ad .bth-ad-inline img {
	width: auto; max-width: 100%; height: auto;
	display: block; margin: 0 auto;
}
.tb-ad .bth-ad-inline { line-height: 0; text-align: center; }
.tb-ad .bth-banner--empty {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 4px;
	width: 100%;
	min-height: 64px;
	background: var(--tb-band);
	border: 1px solid var(--tb-line);
}
.tb-ad .bth-banner--empty span {
	font: 400 11px/1 ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tb-muted);
}
.tb-ad--head .bth-banner--empty { aspect-ratio: 1280 / 160; max-height: 200px; }
.tb-ad--mid .bth-banner--empty { aspect-ratio: 1280 / 145; max-height: 180px; }
.tb-ad--side .bth-banner--empty { aspect-ratio: 300 / 250; }

/* ========================================================================== */
/* 16. Tablet 768–1199px                                                       */
/* ========================================================================== */

@media (max-width: 1199px) {
	.tb { --tb-pad: 32px; --tb-gap: 24px; }

	.tb-masthead__name { font-size: 52px; }
	.tb-hero { grid-template-columns: 260px minmax(0, 1fr); }
	.tb-hero__opinion { grid-column: 1 / -1; }
	.tb-lead { border-right: 0; padding-right: 0; }
	.tb-opinion__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }

	.tb-spot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tb-emag { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tb-emag__lead { grid-column: 1 / -1; grid-row: auto; }
	.tb-deep-inner { grid-template-columns: 1fr; gap: 28px; }
	.tb-deep__title { font-size: 34px; }
	.tb-deep__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.tb-stream { grid-template-columns: 220px minmax(0, 1fr); }
	.tb-stream__aside { grid-column: 1 / -1; }
	.tb-stream__mid { border-right: 0; padding-right: 0; }
	.tb-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.tb-aside > * + * { margin-top: 0; }

	.tb-duo { grid-template-columns: 1fr; gap: 32px; }
	.tb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tb-catbody { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
	.tb-cattop { grid-template-columns: 1fr 1fr; }
	.tb-cattop__links { grid-column: 1 / -1; }
	.tb-article-grid { grid-template-columns: 1fr; gap: 36px; }
	.tb-article__title { font-size: 34px; }
}

/* ========================================================================== */
/* 17. Mobile < 768px                                                          */
/* ========================================================================== */

@media (max-width: 767px) {
	.tb { --tb-pad: 16px; --tb-gap: 16px; font-size: 15px; }

	/* Thanh 56px dính trên cùng; ngăn kéo bám ngay dưới nó. */
	.tb { --tb-top-h: 56px; }
	/* Thanh đỏ nằm ngoài <header> nên phải ẩn riêng — không thì hai thanh chồng nhau. */
	.tb-header, .tb-top { display: none; }
	.tb-mobhead { display: block; }

	/* Bài chủ tràn viền như bản thiết kế mobile. */
	.tb-hero { grid-template-columns: 1fr; gap: 0; padding: 0 0 24px; }
	.tb-lead { padding: 0; border: 0; text-align: left; }
	.tb-lead .tb-thumb { margin: 0 calc(var(--tb-pad) * -1); aspect-ratio: 390 / 234; --tb-r: calc(390 / 234); }
	.tb-lead__title { font-size: 25px; margin-top: 16px; }
	.tb-lead__desc { font-size: 15px; color: var(--tb-muted); }
	.tb-lead__rule { margin: 18px 0; }
	.tb-lead__list { display: none; }

	.tb-hero__side { display: block; margin-top: 4px; }
	.tb-side-card {
		display: grid;
		grid-template-columns: 116px minmax(0, 1fr);
		gap: 12px;
		align-items: start;
		padding: 14px 0;
	}
	.tb-side-card + .tb-side-card { padding-top: 14px; }
	.tb-side-card:last-child { border-bottom: 1px solid var(--tb-line); }
	.tb-side-card .tb-thumb { aspect-ratio: 116 / 76; --tb-r: calc(116 / 76); }
	.tb-side-card__title { margin-top: 0; font-size: 16px; line-height: 1.4; }

	.tb-hero__opinion { margin-top: 24px; }
	.tb-opinion__list { display: block; }

	.tb-section { padding-top: 28px; padding-bottom: 32px; }
	.tb-sechead__title { font-size: 20px; }

	/* Tâm điểm + các dải ngang: cuộn ngang, ẩn thanh cuộn. */
	.tb-spot {
		display: flex;
		gap: 12px;
		margin: 0 calc(var(--tb-pad) * -1);
		padding: 0 var(--tb-pad);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.tb-spot::-webkit-scrollbar { display: none; }
	.tb-spot__item { flex: 0 0 260px; scroll-snap-align: start; }
	.tb-spot__item .tb-thumb { aspect-ratio: 260 / 340; --tb-r: calc(260 / 340); }
	.tb-spot__cap { font-size: 17px; padding: 12px; }

	.tb-emag { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.tb-emag__lead { grid-column: 1 / -1; grid-row: auto; order: -1; }
	.tb-emag__lead-title { font-size: 22px; }

	.tb-deep-inner { grid-template-columns: 1fr; gap: 22px; padding-top: 28px; padding-bottom: 32px; }
	.tb-deep__title { font-size: 28px; }
	.tb-deep__grid { grid-template-columns: 1fr; }
	.tb-deep__tabs { gap: 16px; }

	.tb-stream { grid-template-columns: 1fr; gap: 28px; }
	.tb-stream__mid { padding: 0; border: 0; order: -1; }
	.tb-aside { display: block; }
	.tb-aside > * + * { margin-top: 24px; }

	.tb-feed__item { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
	.tb-feed__item .tb-thumb { aspect-ratio: 116 / 76; --tb-r: calc(116 / 76); }
	.tb-feed__title { font-size: 16px; line-height: 1.4; }
	.tb-feed__desc { display: none; }
	.tb-more { width: 100%; min-width: 0; padding: 15px 20px; }

	.tb-duo { grid-template-columns: 1fr; gap: 28px; }
	.tb-cats { grid-template-columns: 1fr; gap: 28px; }

	.tb-cat { padding: 20px 0 32px; }
	.tb-cathead { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
	.tb-cathead__title { font-size: 28px; }
	.tb-cathead__subs {
		flex-wrap: nowrap;
		gap: 10px;
		width: 100%;
		margin: 0 calc(var(--tb-pad) * -1);
		padding: 0 var(--tb-pad) 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.tb-cathead__subs::-webkit-scrollbar { display: none; }
	.tb-cathead__sub {
		flex: 0 0 auto;
		height: 36px;
		display: inline-flex; align-items: center;
		padding: 0 16px;
		border: 1px solid var(--tb-line);
		border-radius: 18px;
		font-size: 13.5px;
	}
	.tb-catbody { grid-template-columns: 1fr; gap: 28px; }
	/* Điện thoại không rê chuột được: cột con nằm luôn dưới mục cha. */
	.tb-drawer { width: 100%; max-width: none; }
	.tb-drawer__sub {
		position: static; width: auto;
		opacity: 1; visibility: visible;
		padding: 4px 0 10px;
		background: rgba(0, 0, 0, .2);
		box-shadow: none;
	}
	.tb .tb-drawer__sub a { color: rgba(255, 255, 255, .86); padding: 8px 18px 8px 32px; font-size: 13.5px; }
	.tb .tb-drawer__sub a:hover { background: rgba(0, 0, 0, .25); color: #fff; }
	.tb-drawer__arrow { display: none; }
	.tb-cattop { grid-template-columns: 1fr; gap: 20px; }
	.tb-cattop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.tb-single { padding: 16px 0 32px; }
	.tb-article__title { font-size: 27px; }
	.tb-article__sapo { font-size: 17px; font-weight: 600; }
	.tb-article-grid { gap: 32px; }
	.tb-article__figure .tb-thumb { margin: 0 calc(var(--tb-pad) * -1); aspect-ratio: 390 / 260; --tb-r: calc(390 / 260); }
	.tb-article__body { font-size: 17px; line-height: 1.7; }
	.tb-article__body h2 { font-size: 20px; }
	.tb-article__body blockquote { font-size: 21px; }
	.tb-tool { width: 44px; height: 44px; }
	.tb-related__grid { grid-template-columns: 1fr; gap: 16px; }

}

/* ========================================================================== */
/* 18. In ra giấy                                                              */
/* ========================================================================== */

@media print {
	.tb-top, .tb-navrow, .tb-mobhead, .tb-ad, .tb-panel,
	.tb-article__tools, .tb-aside, .tb-stream__side,

	.tb-article-grid, .tb-stream { grid-template-columns: 1fr; }
	.tb { --tb-pad: 0; }
}