/*
Theme Name: tinhbmi
Theme URI: https://tinhbmi.net/
Author: Võ Trần Phước Sơn
Author URI: https://tinhbmi.net/gioi-thieu/
Description: Block theme cho tinhbmi.net — giao diện calculator-first, mobile-first, không ảnh hero, không popup. Toàn bộ màu và khoảng cách lấy từ token --tb-* trùng tên với preset trong theme.json.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tinhbmi
Tags: block-theme, full-site-editing, accessibility-ready, one-column
*/

/* ==========================================================================
   1. TOKEN
   Nguồn duy nhất của mọi màu, cỡ chữ và khoảng cách. Trùng 1–1 với preset
   trong theme.json, nên sửa ở đây phải sửa cả bên đó.
   ========================================================================== */

:root {
	/* ---- MÀU ---- */
	--tb-primary: #0E8F6F;
	--tb-primary-dark: #075C48;
	--tb-primary-hover: #0B7A5F;
	--tb-primary-soft: #E6F5F0;
	--tb-primary-contrast: #FFFFFF;
	--tb-accent: #0B6E7A;
	--tb-accent-soft: #E4F1F3;

	--tb-bg: #FFFFFF;
	--tb-bg-soft: #F4F8F6;
	--tb-bg-sunken: #E9F0ED;

	--tb-border: #DBE5E1;
	--tb-border-strong: #B4C4BE;

	--tb-text: #12211D;
	--tb-text-muted: #53635E;
	--tb-text-invert: #FFFFFF;
	--tb-result: #075C48;

	--tb-success: #177A4B;  --tb-success-soft: #E4F3EA;
	--tb-warn: #8A5A00;     --tb-warn-soft: #FBF1DC;
	--tb-error: #A8281F;    --tb-error-soft: #FBEAE7;
	--tb-source: #3C4B47;   --tb-source-soft: #EFF3F1;

	/* gauge BMI 5 đoạn: thiếu cân · bình thường · thừa cân · béo phì I · II */
	--tb-gauge-1: #5B9DD1;
	--tb-gauge-2: #2FA36B;
	--tb-gauge-3: #DDA32B;
	--tb-gauge-4: #DC7C3E;
	--tb-gauge-5: #C24A3C;

	/* ---- CHỮ ---- */
	--tb-font: "Be Vietnam Pro", system-ui, "Segoe UI", sans-serif;
	--tb-fs-display: clamp(52px, 14vw, 76px);
	--tb-fs-1: clamp(26px, 4.6vw, 38px);
	--tb-fs-2: clamp(21px, 3vw, 27px);
	--tb-fs-3: 19px;
	--tb-fs-4: 17px;
	--tb-fs-5: 15px;
	--tb-fs-6: 13px;
	--tb-lh-tight: 1.15; --tb-lh-normal: 1.5; --tb-lh-loose: 1.7;

	/* ---- KHOẢNG CÁCH ---- */
	--tb-s-1: 4px;  --tb-s-2: 8px;  --tb-s-3: 12px; --tb-s-4: 16px;
	--tb-s-5: 24px; --tb-s-6: 32px; --tb-s-7: 48px; --tb-s-8: 64px;

	/* ---- BÁN KÍNH · ĐỔ BÓNG ---- */
	--tb-r-sm: 6px; --tb-r-md: 10px; --tb-r-lg: 16px; --tb-r-pill: 999px;
	--tb-sh-1: 0 1px 2px rgba(18, 33, 29, .06), 0 1px 3px rgba(18, 33, 29, .05);
	--tb-sh-2: 0 6px 24px rgba(7, 92, 72, .09);

	/* ---- Ô NHẬP / VÙNG BẤM ---- */
	--tb-control-h: 48px;
	--tb-tap-min: 44px;

	/* ---- BỐ CỤC ---- */
	--tb-wrap: 1160px;
	--tb-measure: 68ch;
}

/* ==========================================================================
   2. NỀN TẢNG
   ========================================================================== */

body {
	background: var(--tb-bg-soft);
	color: var(--tb-text);
	font-family: var(--tb-font);
	font-size: var(--tb-fs-4);
	line-height: var(--tb-lh-normal);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--tb-primary-dark);
	text-decoration-color: var(--tb-border-strong);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--tb-primary);
	text-decoration-color: var(--tb-primary);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--tb-primary);
	outline-offset: 2px;
	border-radius: var(--tb-r-sm);
}

summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }

h1, h2, h3, h4 { text-wrap: pretty; }

/* Số liệu luôn dùng chữ số đều bề ngang để cột bảng không nhảy. */
table, .tb-so, [data-tb-so] { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   3. ĐẦU TRANG · CHÂN TRANG
   ========================================================================== */

.tb-site {
	max-width: var(--tb-wrap);
	margin: 0 auto;
	padding: 0 var(--tb-s-4);
}

.tb-header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tb-s-3);
	align-items: center;
	justify-content: space-between;
	padding: var(--tb-s-4) 0;
	border-bottom: 1px solid var(--tb-border);
}

.tb-logo {
	display: flex;
	align-items: center;
	gap: var(--tb-s-2);
	text-decoration: none;
	color: var(--tb-text);
	font-weight: 700;
	font-size: var(--tb-fs-3);
	letter-spacing: -.01em;
}

.tb-logo__mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: var(--tb-r-sm);
	background: var(--tb-primary);
	color: var(--tb-primary-contrast);
	font-weight: 800;
	font-size: var(--tb-fs-5);
}

/* Điều hướng chính — markup của wp_nav_menu (menu cổ điển). */
.tb-nav .tb-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tb-s-1);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--tb-fs-5);
}

.tb-nav .tb-menu > li { position: relative; }

.tb-nav .tb-menu a {
	display: flex;
	align-items: center;
	min-height: var(--tb-tap-min);
	padding: 0 var(--tb-s-3);
	border-radius: var(--tb-r-sm);
	color: var(--tb-text-muted);
	text-decoration: none;
	white-space: nowrap;
}

.tb-nav .tb-menu a:hover,
.tb-nav .tb-menu .current-menu-item > a,
.tb-nav .tb-menu .current-menu-ancestor > a,
.tb-nav .tb-menu .current_page_item > a {
	background: var(--tb-primary-soft);
	color: var(--tb-text);
	font-weight: 600;
}

/* Menu con — mở khi hover trên chuột, khi focus bằng bàn phím. */
.tb-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 200px;
	display: none;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: var(--tb-s-2);
	list-style: none;
	background: var(--tb-bg);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-r-md);
	box-shadow: var(--tb-sh-2);
}

.tb-nav .tb-menu > li:hover > .sub-menu,
.tb-nav .tb-menu > li:focus-within > .sub-menu { display: flex; }

.tb-nav .sub-menu a { color: var(--tb-text); }

/* Từ 900px trở xuống menu xuống dòng và cuộn ngang thay vì đẩy vỡ header. */
@media (max-width: 899px) {
	.tb-nav {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tb-nav .tb-menu { flex-wrap: nowrap; }

	/* Menu con không dùng dropdown trên màn nhỏ — đã có trang Tra cứu. */
	.tb-nav .sub-menu { display: none !important; }
}

.tb-footer {
	margin-top: var(--tb-s-8);
	padding: var(--tb-s-6) 0 var(--tb-s-7);
	border-top: 1px solid var(--tb-border);
	font-size: var(--tb-fs-5);
	color: var(--tb-text-muted);
}

.tb-footer .tb-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tb-s-2) var(--tb-s-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tb-footer .tb-menu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tb-tap-min);
	text-decoration: none;
	font-weight: 600;
}

.tb-footer a { color: var(--tb-text-muted); }
.tb-footer a:hover { color: var(--tb-primary-dark); }
.tb-footer p { max-width: var(--tb-measure); }

/* ==========================================================================
   4. BỐ CỤC TRANG
   ========================================================================== */

.tb-layout {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tb-s-6);
	align-items: flex-start;
	padding-top: var(--tb-s-4);
}

.tb-layout__main {
	flex: 1 1 460px;
	min-width: 0;
}

.tb-layout__aside {
	flex: 0 1 300px;
	min-width: 260px;
	display: grid;
	gap: var(--tb-s-4);
	position: sticky;
	top: var(--tb-s-4);
}

/* Sidebar chỉ xuất hiện từ 1200px — dưới mốc đó nội dung chiếm trọn. */
@media (max-width: 1199px) {
	.tb-layout__aside { display: none; }
}

.tb-plain {
	max-width: 820px;
	margin: 0 auto;
	padding-top: var(--tb-s-4);
}

/* ==========================================================================
   5. THÀNH PHẦN DÙNG CHUNG
   ========================================================================== */

/* --- Breadcrumb --- */
.tb-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tb-s-2);
	align-items: center;
	padding: var(--tb-s-4) 0 0;
	font-size: var(--tb-fs-6);
	color: var(--tb-text-muted);
}

.tb-breadcrumb a { color: var(--tb-text-muted); text-decoration: none; }
.tb-breadcrumb a:hover { color: var(--tb-primary-dark); }
.tb-breadcrumb .last, .tb-breadcrumb [aria-current] { color: var(--tb-text); }

/* --- Dòng "Cập nhật · Căn cứ" dưới H1 --- */
.tb-meta-line {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tb-s-2) var(--tb-s-3);
	align-items: center;
	margin: 0 0 var(--tb-s-5);
	font-size: var(--tb-fs-6);
	color: var(--tb-text-muted);
}

.tb-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--tb-r-pill);
	background: var(--tb-primary-soft);
	color: var(--tb-primary-dark);
	font-weight: 600;
}

/* --- Thẻ nội dung (article Gutenberg) --- */
.tb-card {
	background: var(--tb-bg);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-r-lg);
	padding: var(--tb-s-6);
}

.tb-prose { line-height: var(--tb-lh-loose); }
.tb-prose > p, .tb-prose > ul, .tb-prose > ol { max-width: var(--tb-measure); }
.tb-prose > h2 { margin-top: var(--tb-s-6); }
.tb-prose > h3 { margin-top: var(--tb-s-5); }
.tb-prose > *:first-child { margin-top: 0; }

@media (max-width: 767px) {
	.tb-card { padding: var(--tb-s-4); }
}

/* --- Mục lục --- */
.tb-toc {
	padding: var(--tb-s-4);
	background: var(--tb-bg);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-r-md);
}

.tb-toc__title {
	margin: 0 0 var(--tb-s-3);
	font-size: var(--tb-fs-6);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--tb-text-muted);
}

.tb-toc ol {
	margin: 0;
	padding-left: 1.2em;
	display: grid;
	gap: 6px;
	font-size: var(--tb-fs-5);
}

/* --- Nút tool (chip / card) --- */
.tb-tool-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--tb-s-2);
	min-height: var(--tb-tap-min);
	padding: 0 var(--tb-s-4);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-r-pill);
	background: var(--tb-bg);
	color: var(--tb-text);
	font-size: var(--tb-fs-5);
	font-weight: 600;
	text-decoration: none;
}

.tb-tool-btn:hover {
	border-color: var(--tb-primary);
	background: var(--tb-primary-soft);
	color: var(--tb-text);
}

.tb-tool-btn--sm { font-size: var(--tb-fs-6); padding: 0 var(--tb-s-3); }

.tb-tool-btn--lg {
	display: flex;
	min-height: 56px;
	padding: 0 var(--tb-s-3);
	border-radius: var(--tb-r-md);
	gap: var(--tb-s-3);
}

/* --- Box căn cứ / nguồn --- */
.tb-source {
	padding: var(--tb-s-4);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-r-md);
	background: var(--tb-source-soft);
	color: var(--tb-source);
	font-size: var(--tb-fs-5);
}

.tb-source__title {
	display: flex;
	gap: var(--tb-s-2);
	align-items: center;
	margin: 0 0 var(--tb-s-3);
	font-weight: 700;
}

/* --- Box miễn trừ YMYL --- */
.tb-ymyl {
	display: flex;
	gap: var(--tb-s-3);
	margin: var(--tb-s-5) 0 0;
	padding: var(--tb-s-4);
	border-radius: var(--tb-r-md);
	background: var(--tb-source-soft);
	color: var(--tb-source);
	font-size: var(--tb-fs-5);
}

/* --- Callout cảnh báo --- */
.tb-callout {
	display: flex;
	gap: var(--tb-s-3);
	padding: var(--tb-s-4);
	border-left: 4px solid var(--tb-warn);
	border-radius: 0 var(--tb-r-md) var(--tb-r-md) 0;
	background: var(--tb-warn-soft);
}

.tb-callout__title { margin: 0 0 var(--tb-s-2); font-weight: 700; color: var(--tb-warn); }
.tb-callout--info { border-left-color: var(--tb-primary); background: var(--tb-primary-soft); }
.tb-callout--info .tb-callout__title { color: var(--tb-primary-dark); }

/* --- Lưới thẻ (bài mới, công cụ liên quan) --- */
.tb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--tb-s-3);
}

.tb-grid--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--tb-s-4); }

/*
 * Vòng lặp bài viết (trang chủ, /blog/, trang chuyên mục).
 *
 * Lưới phải đặt lên chính thẻ <ul> mà post-template sinh ra, vì các thẻ bài
 * nằm trong <li> của nó. Đặt lưới lên .wp-block-query bọc ngoài thì lưới chỉ
 * có đúng một ô — cả cái <ul> — và các bài xếp thành hàng dọc.
 */
.wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--tb-s-3);
}

.wp-block-post-template > li { margin: 0; }

.tb-tile {
	display: block;
	padding: var(--tb-s-4);
	background: var(--tb-bg);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-r-md);
	text-decoration: none;
	color: var(--tb-text);
}

.tb-tile:hover { border-color: var(--tb-primary); color: var(--tb-text); }
.tb-tile__meta { display: block; font-size: var(--tb-fs-6); color: var(--tb-text-muted); margin-bottom: 6px; }
.tb-tile__title { display: block; font-weight: 700; line-height: 1.35; }
.tb-tile__desc { display: block; font-size: var(--tb-fs-6); color: var(--tb-text-muted); line-height: 1.45; margin-top: 4px; }

/* --- Khối hub trên trang chủ --- */
.tb-hub-card {
	background: var(--tb-bg);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-r-md);
	padding: var(--tb-s-4);
}

.tb-hub-card__title {
	display: flex;
	align-items: center;
	gap: var(--tb-s-2);
	margin: 0 0 var(--tb-s-3);
	font-weight: 700;
	font-size: var(--tb-fs-4);
}

.tb-hub-card__list { display: flex; flex-wrap: wrap; gap: var(--tb-s-2); }

.tb-hub-card__list .tb-tool-btn { background: var(--tb-bg-soft); font-size: var(--tb-fs-6); padding: 0 var(--tb-s-3); }

/* --- Danh sách bài dạng dòng --- */
.tb-rows { display: grid; gap: var(--tb-s-2); }

.tb-row {
	display: flex;
	justify-content: space-between;
	gap: var(--tb-s-3);
	padding: var(--tb-s-3) var(--tb-s-4);
	background: var(--tb-bg);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-r-md);
	text-decoration: none;
	color: var(--tb-text);
	font-weight: 600;
}

.tb-row:hover { border-color: var(--tb-primary); color: var(--tb-text); }
.tb-row__date { color: var(--tb-text-muted); font-weight: 400; font-size: var(--tb-fs-6); white-space: nowrap; }

/* --- Chip lọc chuyên mục --- */
.tb-chips { display: flex; flex-wrap: wrap; gap: var(--tb-s-2); margin-bottom: var(--tb-s-5); }

.tb-chips .wp-block-categories-list,
.tb-chips ul { display: flex; flex-wrap: wrap; gap: var(--tb-s-2); list-style: none; margin: 0; padding: 0; }

.tb-chips a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tb-tap-min);
	padding: 0 var(--tb-s-4);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-r-pill);
	background: var(--tb-bg);
	color: var(--tb-text);
	font-weight: 600;
	font-size: var(--tb-fs-5);
	text-decoration: none;
}

.tb-chips a:hover { border-color: var(--tb-primary); background: var(--tb-primary-soft); }

/* ==========================================================================
   6. BLOCK LÕI WORDPRESS
   ========================================================================== */

/* Bảng trong nội dung Gutenberg — cuộn ngang thay vì vỡ trang. */
.wp-block-table { overflow-x: auto; }

.wp-block-table table { width: 100%; min-width: 420px; font-size: var(--tb-fs-5); background: var(--tb-bg); }

.wp-block-table th,
.wp-block-table td { padding: 10px var(--tb-s-3); border: 1px solid var(--tb-border); text-align: left; }

.wp-block-table thead tr { background: var(--tb-bg-sunken); }
.wp-block-table thead th { font-weight: 700; }
.wp-block-table tbody tr:nth-child(even) { background: var(--tb-bg-soft); }
.wp-block-table figcaption { color: var(--tb-text-muted); font-size: var(--tb-fs-6); }

/* Accordion FAQ */
.wp-block-details {
	background: var(--tb-bg-soft);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-r-md);
	padding: 0;
}

.wp-block-details summary {
	display: flex;
	gap: var(--tb-s-3);
	align-items: center;
	justify-content: space-between;
	min-height: var(--tb-tap-min);
	padding: var(--tb-s-2) var(--tb-s-4);
	font-weight: 600;
	list-style: none;
}

.wp-block-details summary::after { content: "＋"; color: var(--tb-primary-dark); }
.wp-block-details[open] summary::after { content: "－"; }
.wp-block-details > *:not(summary) { padding: 0 var(--tb-s-4) var(--tb-s-4); margin: 0; max-width: var(--tb-measure); }

/* Danh sách lưới công cụ do plugin sinh (block list có className tb-tool-grid) */
.tb-tool-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--tb-s-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tb-tool-grid li {
	padding: var(--tb-s-4);
	background: var(--tb-bg);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-r-md);
	font-size: var(--tb-fs-5);
	line-height: 1.5;
}

/* Link chiếm trọn bề ngang ô để vùng bấm rộng bằng cả thẻ. */
.tb-tool-grid li a {
	display: block;
	padding: var(--tb-s-1) 0;
	text-decoration: none;
	font-weight: 700;
}

.tb-tool-grid li:hover { border-color: var(--tb-primary); }

/* Breadcrumb: nới vùng bấm theo chiều dọc mà không đổi khoảng cách nhìn thấy. */
.tb-breadcrumb a { padding: var(--tb-s-2) 0; }

/* Khối brief trong bài nháp — hiện rõ để biên tập viên không quên xóa. */
.tb-brief {
	background: var(--tb-warn-soft);
	border: 2px dashed var(--tb-warn);
	border-radius: var(--tb-r-md);
	padding: var(--tb-s-4);
	margin-bottom: var(--tb-s-6);
}

.tb-brief h2 { color: var(--tb-warn); font-size: var(--tb-fs-3); }

/* ==========================================================================
   7. 404 · TÌM KIẾM
   ========================================================================== */

.tb-404 { text-align: center; padding: var(--tb-s-8) 0; }
.tb-404 .wp-block-search__input { height: var(--tb-control-h); border-radius: var(--tb-r-md); border: 1px solid var(--tb-border); padding: 0 var(--tb-s-3); }
.tb-404 .wp-block-search__button { min-height: var(--tb-control-h); border-radius: var(--tb-r-md); }

/* ==========================================================================
   8. MÀN HÌNH NHỎ
   ========================================================================== */

@media (max-width: 767px) {
	.tb-header { gap: var(--tb-s-2); }
	.tb-nav .wp-block-navigation-item__content { padding: 0 var(--tb-s-2); }
	.tb-plain { padding-left: 0; padding-right: 0; }
}

@media print {
	.tb-header, .tb-footer, .tb-layout__aside, .tb-breadcrumb { display: none; }
	body { background: #fff; }
}