/*
 * tools.css — giao diện công cụ tinhbmi.net
 *
 * Tự đủ, không phụ thuộc theme và không dùng framework: khi nhúng qua
 * /embed/ hoặc chạy trên theme khác, file này vẫn đủ để widget hiển thị đúng.
 *
 * Màu và khoảng cách lấy từ token --tb-* của thiết kế (theme tinhbmi khai báo
 * ở :root). Khối dưới đây là bản dự phòng: nếu token chưa có — trang nhúng,
 * theme khác — giá trị mặc định trong var() sẽ được dùng.
 *
 * Mobile-first: bố cục một cột, từ 600px trở lên mới chia đôi.
 */

/* --------------------------------------------------------------- Token
 * Theme tinhbmi khai báo bộ token này ở :root. Khối :where(:root) dưới đây
 * có độ ưu tiên bằng 0 nên chỉ đóng vai trò dự phòng cho trang /embed/ và
 * cho theme khác; theme nào khai báo sẵn thì giá trị của theme thắng.
 */
:where(:root) {
	--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;

	--tb-gauge-1: #5B9DD1;
	--tb-gauge-2: #2FA36B;
	--tb-gauge-3: #DDA32B;
	--tb-gauge-4: #DC7C3E;
	--tb-gauge-5: #C24A3C;

	--tb-font: "Be Vietnam Pro", system-ui, "Segoe UI", sans-serif;
	--tb-fs-display: clamp(52px, 14vw, 76px);
	--tb-fs-5: 15px; --tb-fs-6: 13px;

	--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-r-sm: 6px; --tb-r-md: 10px; --tb-r-lg: 16px; --tb-r-pill: 999px;
	--tb-sh-2: 0 6px 24px rgba(7, 92, 72, .09);
	--tb-control-h: 48px;
	--tb-tap-min: 44px;
}

.tb-tool,
.tb-bang {
	/* Bí danh tên cũ → token thiết kế, để không phải sửa markup trong JS. */
	--tb-primary-dam: var(--tb-primary-dark);
	--tb-primary-nhat: var(--tb-primary-soft);
	--tb-ok: var(--tb-success);
	--tb-ok-nen: var(--tb-success-soft);
	--tb-warn-nen: var(--tb-warn-soft);
	--tb-error-nen: var(--tb-error-soft);
	--tb-chu: var(--tb-text);
	--tb-chu-nhat: var(--tb-text-muted);
	--tb-vien: var(--tb-border);
	--tb-nen: var(--tb-bg);
	--tb-nen-phu: var(--tb-bg-soft);
	--tb-bo-goc: var(--tb-r-md);

	box-sizing: border-box;
	color: var(--tb-chu);
	font-family: var(--tb-font);
	font-size: 16px;
	line-height: 1.55;
	margin: var(--tb-s-6) 0;
}

.tb-tool *,
.tb-bang * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Khung */

.tb-tool {
	background: var(--tb-nen);
	border: 1px solid var(--tb-vien);
	border-radius: var(--tb-r-lg);
	box-shadow: var(--tb-sh-2);
	padding: var(--tb-s-5);
}

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

.tb-tool--embed {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: var(--tb-s-4);
}

.tb-tool--embed .tb-tool__ket-qua {
	margin: var(--tb-s-4) calc(var(--tb-s-4) * -1) calc(var(--tb-s-4) * -1);
}

.tb-tool__ten {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 var(--tb-s-4);
}

.tb-cho {
	color: var(--tb-chu-nhat);
	font-size: 0.95rem;
	margin: 0;
}

.tb-thong-bao {
	background: var(--tb-nen-phu);
	border: 1px dashed var(--tb-vien);
	border-radius: var(--tb-r-md);
	color: var(--tb-chu-nhat);
	margin: var(--tb-s-6) 0;
	padding: var(--tb-s-4);
}

/* ----------------------------------------------------------------- Form */

.tb-form__luoi {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.tb-form__luoi {
		grid-template-columns: 1fr 1fr;
	}

	.tb-field--rong {
		grid-column: 1 / -1;
	}
}

.tb-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.tb-field__nhan {
	color: var(--tb-chu-nhat);
	font-size: var(--tb-fs-6);
	font-weight: 600;
}

.tb-field__don-vi {
	color: var(--tb-chu-nhat);
	font-weight: 400;
}

.tb-input {
	background: var(--tb-nen);
	border: 1px solid var(--tb-vien);
	border-radius: var(--tb-r-md);
	color: inherit;
	font-family: inherit;
	/* 16px trở lên để iOS không tự phóng to khi bấm vào ô nhập. */
	font-size: 1rem;
	min-height: var(--tb-control-h);
	padding: 0 var(--tb-s-3);
	width: 100%;
}

/* select cần padding dọc vì không có line-height của input. */
select.tb-input {
	padding: 10px var(--tb-s-3);
}

.tb-input:focus,
.tb-nut:focus-visible {
	border-color: var(--tb-primary);
	outline: 2px solid var(--tb-primary);
	outline-offset: 1px;
}

.tb-input--loi {
	border-color: var(--tb-error);
}

.tb-field__mo-ta {
	color: var(--tb-chu-nhat);
	font-size: 0.83rem;
	margin: 0;
}

.tb-field__loi {
	color: var(--tb-error);
	font-size: 0.83rem;
	margin: 0;
}

.tb-radio {
	display: flex;
	gap: 8px;
}

.tb-radio__muc {
	align-items: center;
	background: var(--tb-nen);
	border: 1px solid var(--tb-vien);
	border-radius: var(--tb-r-md);
	display: flex;
	flex: 1;
	gap: 7px;
	min-height: var(--tb-control-h);
	padding: 0 var(--tb-s-3);
}

.tb-radio__muc:has(input:checked) {
	background: var(--tb-primary-soft);
	border-color: var(--tb-primary);
	font-weight: 600;
}

.tb-radio__muc:focus-within {
	border-color: var(--tb-primary);
}

.tb-radio__muc label {
	cursor: pointer;
	flex: 1;
	font-size: 0.95rem;
}

.tb-radio input,
.tb-checkbox {
	accent-color: var(--tb-primary);
	height: 18px;
	margin: 0;
	width: 18px;
}

.tb-checkbox {
	align-self: flex-start;
}

/* --------------------------------------------------- Bảng chọn món ăn */

.tb-chon-mon {
	margin-top: 16px;
}

.tb-chon-mon__ds {
	border: 1px solid var(--tb-vien);
	border-radius: 8px;
	margin-top: 10px;
	max-height: 320px;
	overflow-y: auto;
}

.tb-chon-mon__dong {
	align-items: center;
	border-bottom: 1px solid var(--tb-vien);
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 9px 12px;
}

.tb-chon-mon__dong:last-child {
	border-bottom: 0;
}

.tb-chon-mon__ten {
	flex: 1;
	font-size: 0.93rem;
	min-width: 0;
}

.tb-chon-mon__phu {
	color: var(--tb-chu-nhat);
	font-size: 0.8rem;
	text-align: right;
	white-space: nowrap;
}

.tb-chon-mon__so {
	flex: 0 0 58px;
	padding: 6px 8px;
	text-align: center;
	width: 58px;
}

/* ------------------------------------------------------------------ Nút */

.tb-nut-hang {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.tb-nut-hang--ket-qua {
	margin-top: 14px;
}

.tb-nut {
	background: var(--tb-nen);
	border: 1px solid var(--tb-vien);
	border-radius: var(--tb-r-md);
	color: var(--tb-chu);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--tb-fs-5);
	font-weight: 600;
	/* Vùng bấm tối thiểu 44px cho thao tác một tay trên điện thoại. */
	min-height: var(--tb-control-h);
	padding: 0 var(--tb-s-5);
}

.tb-nut--chinh {
	background: var(--tb-primary);
	border-color: var(--tb-primary);
	color: var(--tb-primary-contrast);
	flex: 1;
	font-size: 1rem;
	font-weight: 700;
	padding: 0 var(--tb-s-6);
}

.tb-nut--chinh:hover {
	background: var(--tb-primary-hover);
	border-color: var(--tb-primary-hover);
}

.tb-nut--phu {
	color: var(--tb-chu);
}

.tb-nut--phu:hover {
	background: var(--tb-nen-phu);
}

.tb-nut--nho {
	border-radius: var(--tb-r-pill);
	font-size: var(--tb-fs-6);
	min-height: var(--tb-tap-min);
	padding: 0 var(--tb-s-4);
}

.tb-nut--nho.tb-nut--chinh {
	font-size: var(--tb-fs-6);
	padding: 0 var(--tb-s-4);
}

@media (min-width: 600px) {
	.tb-nut--chinh {
		flex: 0 0 auto;
		min-width: 180px;
	}
}

/* -------------------------------------------------------------- Kết quả */

.tb-tool__ket-qua {
	background: var(--tb-nen-phu);
	border-top: 1px solid var(--tb-vien);
	/* Kéo tràn ra mép card như bản thiết kế, và giữ chiều cao tối thiểu để
	   layout không nhảy khi kết quả hiện ra. */
	margin: var(--tb-s-5) calc(var(--tb-s-5) * -1) calc(var(--tb-s-5) * -1);
	min-height: 120px;
	padding: var(--tb-s-5);
}

@media (max-width: 599px) {
	.tb-tool__ket-qua {
		margin: var(--tb-s-4) calc(var(--tb-s-4) * -1) calc(var(--tb-s-4) * -1);
		padding: var(--tb-s-4);
	}
}

.tb-chinh {
	background: var(--tb-nen);
	border: 1px solid var(--tb-vien);
	border-left: 4px solid var(--tb-primary);
	border-radius: var(--tb-r-md);
	padding: var(--tb-s-4);
}

.tb-chinh--ok {
	background: var(--tb-ok-nen);
	border-left-color: var(--tb-ok);
}

.tb-chinh--warn {
	background: var(--tb-warn-nen);
	border-left-color: var(--tb-warn);
}

.tb-chinh--error {
	background: var(--tb-error-nen);
	border-left-color: var(--tb-error);
}

.tb-chinh__nhan {
	color: var(--tb-chu-nhat);
	font-size: var(--tb-fs-6);
	font-weight: 600;
	letter-spacing: .04em;
	margin: 0;
	text-transform: uppercase;
}

.tb-chinh__so {
	color: var(--tb-result);
	font-size: clamp(40px, 11vw, 60px);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.05;
	margin: var(--tb-s-1) 0 0;
}

.tb-chinh__phu {
	font-size: 1rem;
	font-weight: 600;
	margin: 4px 0 0;
}

.tb-dong-ds {
	margin: 14px 0 0;
}

.tb-dong {
	align-items: baseline;
	border-bottom: 1px solid var(--tb-vien);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	padding: 9px 0;
}

.tb-dong:last-child {
	border-bottom: 0;
}

.tb-dong__nhan {
	color: var(--tb-chu-nhat);
	font-size: 0.92rem;
	margin: 0;
}

.tb-dong__gia-tri {
	font-weight: 600;
	margin: 0;
	text-align: right;
}

.tb-dong__phu {
	color: var(--tb-chu-nhat);
	font-weight: 400;
}

.tb-dong--ok .tb-dong__gia-tri { color: var(--tb-ok); }
.tb-dong--warn .tb-dong__gia-tri { color: var(--tb-warn); }
.tb-dong--error .tb-dong__gia-tri { color: var(--tb-error); }

/* ------------------------------------------------------------ Thanh đo */

.tb-thanh {
	margin: var(--tb-s-5) 0 var(--tb-s-1);
}

.tb-thanh__nen {
	background: var(--tb-bg-sunken);
	border-radius: var(--tb-r-pill);
	height: 14px;
	position: relative;
}

/* Bo góc hai đoạn đầu cuối thay cho overflow:hidden, để kim không bị cắt. */
.tb-thanh__doan:first-of-type { border-radius: var(--tb-r-pill) 0 0 var(--tb-r-pill); }
.tb-thanh__doan:last-of-type { border-radius: 0 var(--tb-r-pill) var(--tb-r-pill) 0; }

.tb-thanh__doan {
	height: 100%;
	position: absolute;
	top: 0;
}

/* Dự phòng cho thang không phải BMI (mỡ cơ thể, WHtR, FFMI…) — đặt trước
   để quy tắc theo id bên dưới ghi đè được. */
.tb-thanh__doan--ok { background: var(--tb-gauge-2); }
.tb-thanh__doan--warn { background: var(--tb-gauge-3); }
.tb-thanh__doan--error { background: var(--tb-gauge-5); }

/* Năm màu gauge theo thiết kế, tô theo id ngưỡng chứ không theo mức cảnh
   báo — nhờ vậy "thừa cân" và "thiếu cân" không còn cùng một màu vàng. */
.tb-thanh__doan--id-thieu-can  { background: var(--tb-gauge-1); }
.tb-thanh__doan--id-binh-thuong { background: var(--tb-gauge-2); }
.tb-thanh__doan--id-thua-can   { background: var(--tb-gauge-3); }
.tb-thanh__doan--id-beo-phi-1  { background: var(--tb-gauge-4); }
.tb-thanh__doan--id-beo-phi-2,
.tb-thanh__doan--id-beo-phi-3  { background: var(--tb-gauge-5); }

.tb-thanh__kim {
	background: var(--tb-result);
	border: 2px solid var(--tb-bg);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--tb-result);
	height: 18px;
	margin-left: -9px;
	position: absolute;
	top: -2px;
	width: 18px;
	z-index: 1;
}

.tb-thanh__nhan {
	color: var(--tb-chu-nhat);
	font-size: var(--tb-fs-6);
	margin: var(--tb-s-2) 0 0;
}

/* --------------------------------------------------------------- Bảng */

.tb-bang-hop {
	margin: 18px 0 0;
}

.tb-bang__tieu-de {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 8px;
}

/* Bảng rộng tự cuộn ngang, không đẩy vỡ trang trên điện thoại. */
.tb-bang__cuon {
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
}

.tb-bang-du-lieu {
	background: var(--tb-nen);
	border-collapse: collapse;
	font-size: var(--tb-fs-5);
	min-width: 100%;
	width: max-content;
}

.tb-bang-du-lieu th,
.tb-bang-du-lieu td {
	border: 1px solid var(--tb-vien);
	padding: 10px var(--tb-s-3);
	text-align: right;
	white-space: nowrap;
}

.tb-bang-du-lieu thead th,
.tb-bang-du-lieu tbody th {
	background: var(--tb-bg-sunken);
	font-weight: 700;
	text-align: left;
}

.tb-bang-du-lieu tbody {
	font-variant-numeric: tabular-nums;
}

.tb-o--ok { background: var(--tb-ok-nen); }
.tb-o--warn { background: var(--tb-warn-nen); }
.tb-o--error { background: var(--tb-error-nen); }

.tb-bang__dieu-khien {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 12px;
}

.tb-bang__dieu-khien .tb-input {
	width: auto;
	max-width: 100%;
}

.tb-tab-hang {
	background: var(--tb-bg-sunken);
	border-radius: var(--tb-r-pill);
	display: flex;
	flex-wrap: wrap;
	gap: var(--tb-s-1);
	margin: 0 0 var(--tb-s-4);
	padding: var(--tb-s-1);
	width: max-content;
	max-width: 100%;
}

.tb-tab-hang .tb-nut {
	background: transparent;
	border-color: transparent;
}

.tb-tab-hang .tb-nut--chinh {
	background: var(--tb-bg);
	border-color: transparent;
	box-shadow: var(--tb-sh-1, 0 1px 2px rgba(18, 33, 29, .06));
	color: var(--tb-primary-dark);
	flex: none;
}

.tb-bang__ghi-chu {
	color: var(--tb-chu-nhat);
	font-size: 0.83rem;
	margin: 8px 0 0;
}

/* ------------------------------------------------- Cảnh báo & liên quan */

.tb-canh-bao {
	border-left: 4px solid var(--tb-warn);
	border-radius: 0 var(--tb-r-md) var(--tb-r-md) 0;
	font-size: var(--tb-fs-5);
	margin: var(--tb-s-3) 0 0;
	padding: var(--tb-s-3) var(--tb-s-4);
}

.tb-canh-bao--warn {
	background: var(--tb-warn-soft);
	border-left-color: var(--tb-warn);
	color: var(--tb-warn);
}

.tb-canh-bao--error {
	background: var(--tb-error-soft);
	border-left-color: var(--tb-error);
	color: var(--tb-error);
}

.tb-canh-bao--ok {
	background: var(--tb-success-soft);
	border-left-color: var(--tb-success);
	color: var(--tb-success);
}

.tb-lien-quan__hop {
	margin-top: 16px;
}

.tb-lien-quan__tieu-de {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0 0 8px;
}

.tb-lien-quan {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.tb-lien-quan__link:hover {
	background: var(--tb-primary-soft);
	border-color: var(--tb-primary);
	color: var(--tb-primary-dark);
}

/* ------------------------------------------------- Nguồn, miễn trừ, ads */

.tb-tool__nguon {
	background: var(--tb-source-soft);
	border-radius: var(--tb-r-md);
	color: var(--tb-source);
	font-size: var(--tb-fs-6);
	margin: var(--tb-s-4) 0 0;
	padding: var(--tb-s-3) var(--tb-s-4);
}

.tb-tool__mien-tru {
	color: var(--tb-chu-nhat);
	font-size: var(--tb-fs-6);
	margin: var(--tb-s-3) 0 0;
	padding-top: var(--tb-s-3);
	border-top: 1px solid var(--tb-vien);
}

/* Chỗ trống dành cho quảng cáo về sau — phase này luôn ẩn. */
.tb-ad-slot {
	display: none;
}

.tb-ad-slot[data-tb-ad-hien] {
	display: block;
	margin: 16px 0 0;
	min-height: 90px;
}

/* -------------------------------------------------- Danh sách trang A–Z */

.tb-ds-loc {
	margin: 0 0 14px;
	max-width: 340px;
}

.tb-ds-nhom {
	margin: 0 0 18px;
}

.tb-ds-nhom__chu {
	border-bottom: 2px solid var(--tb-primary);
	color: var(--tb-primary-dark);
	font-size: 1.1rem;
	font-weight: 800;
	margin: 0 0 var(--tb-s-2);
	padding-bottom: var(--tb-s-1);
}

.tb-ds {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tb-ds li {
	padding: 5px 0;
}

.tb-ds__trong {
	color: var(--tb-chu-nhat);
}

/* ----------------------------------------------------- Mã nhúng widget */

.tb-nhung {
	margin: 0 0 20px;
}

.tb-nhung__ten {
	font-weight: 600;
	margin: 0 0 6px;
}

.tb-nhung__ma {
	background: var(--tb-nen-phu);
	border: 1px solid var(--tb-vien);
	border-radius: 8px;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.82rem;
	min-height: 88px;
	padding: 10px;
	resize: vertical;
	width: 100%;
}

/* ------------------------------------------------------- Trang /embed/ */

.tb-embed-body {
	background: #fff;
	margin: 0;
	padding: 0;
}

.tb-embed-ghi-cong {
	color: var(--tb-text-muted, #53635E);
	font-size: var(--tb-fs-6, 13px);
	margin: 0;
	padding: var(--tb-s-2, 8px) var(--tb-s-4, 16px) var(--tb-s-4, 16px);
	text-align: right;
}

/* ------------------------------------------ Đường cong z-score trẻ em */

.tb-duong-cong-hop {
	margin: var(--tb-s-5) 0 0;
	padding: var(--tb-s-4);
	background: var(--tb-nen);
	border: 1px solid var(--tb-vien);
	border-radius: var(--tb-r-md);
}

.tb-duong-cong {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.tb-duong-cong-hop figcaption {
	color: var(--tb-chu-nhat);
	font-size: var(--tb-fs-6);
	margin-top: var(--tb-s-3);
}