/**
 * vv-tool.css — giao diện dùng chung cho 6 khuôn.
 *
 * Mục tiêu mỹ quan (Bàn giao C mục 3): tool phải trông như MỘT PHẦN CỦA BÀI
 * VIẾT, không phải quảng cáo chèn vào. Cùng bảng màu nội dung, bo góc vừa,
 * viền mảnh, không nền chói. Chỉ MỘT con số được to trong mỗi tool.
 *
 * Mọi màu/khoảng cách đi qua biến --vv-tool-* để Du đổi được ở Customizer mà
 * không phải sửa file này.
 */

.vv-tool {
	--vv-tool-xanh: #2f6b4f;
	--vv-tool-xanh-nhat: #eaf2ed;
	--vv-tool-vang: #b8860b;
	--vv-tool-vang-nhat: #faf1de;
	--vv-tool-nau: #a3572e;
	--vv-tool-nau-nhat: #f6e9e0;
	--vv-tool-nen: #fdfbf6;
	--vv-tool-nen-2: #f8f4ea;
	--vv-tool-vien: #e3ded2;
	--vv-tool-chu: #2b2b2b;
	--vv-tool-mo: #6b6b6b;
	--vv-tool-bo: 14px;
	--vv-tool-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	margin: 2.4em 0;
	padding: 21.6px 22.4px 22.4px;
	background: var(--vv-tool-nen);
	border: 1px solid var(--vv-tool-vien);
	border-radius: var(--vv-tool-bo);
	box-shadow: 0 1px 3px rgba(30, 25, 15, 0.05);
	color: var(--vv-tool-chu);
	font-family: var(--vv-tool-font) !important;
	font-size: 16px !important;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.vv-tool * {
	font-family: var(--vv-tool-font) !important;
	box-sizing: border-box;
}

/* Bậc màu theo THỨ TỰ ô điều khiển, để các nhóm chip/thanh trượt cạnh nhau
 * không cùng một sắc xanh gây khó phân biệt (Du phản hồi 06/08/2026). Vòng
 * lặp 3 màu trong cùng bảng màu nội dung: xanh rêu -> vàng đồng -> nâu đất. */
.vv-tool__control:nth-of-type(3n+1) {
	--vv-tool-accent: var(--vv-tool-xanh);
	--vv-tool-accent-nhat: var(--vv-tool-xanh-nhat);
}

.vv-tool__control:nth-of-type(3n+2) {
	--vv-tool-accent: var(--vv-tool-vang);
	--vv-tool-accent-nhat: var(--vv-tool-vang-nhat);
}

.vv-tool__control:nth-of-type(3n+3) {
	--vv-tool-accent: var(--vv-tool-nau);
	--vv-tool-accent-nhat: var(--vv-tool-nau-nhat);
}

/* Du yeu cau bo dark mode (03/08/2026): tool nam trong bai viet, phai theo
 * mau nen bai chu khong theo thiet lap he thong cua may nguoi doc. Nen kem
 * + chu than la mot bo co dinh.
 *
 * Mau bi HARD-LOCK bang !important co chu y: CSS cua theme (RealHome/RHEA,
 * BetterDocs) quet hau due kieu `.entry-content p`, `.rh_content span` va
 * thang moi gia tri ke thua. Bai hoc tu FPV v1.68.0 — de mem la chu bi doi
 * mau, ket qua la chu den tren nen den.
 */
.vv-tool,
.vv-tool p,
.vv-tool li,
.vv-tool span,
.vv-tool strong,
.vv-tool h3,
.vv-tool h4 {
	color: var(--vv-tool-chu) !important;
}

.vv-tool {
	background: var(--vv-tool-nen) !important;
}

/* ---- Đầu khối ---------------------------------------------------- */

.vv-tool__head {
	margin-bottom: 17.6px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--vv-tool-vien);
}

.vv-tool__head-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8.8px;
}

.vv-tool__badge {
	display: inline-block;
	font-size: 10.56px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--vv-tool-xanh);
	background: var(--vv-tool-xanh-nhat);
	border-radius: 999px;
	padding: 0.28em 0.75em;
}

.vv-tool__scope {
	font-size: 12.16px;
	font-weight: 600;
	color: var(--vv-tool-mo) !important;
}

.vv-tool__title {
	margin: 0 0 4.8px;
	font-size: 19.2px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--vv-tool-chu);
}

.vv-tool__q {
	margin: 0;
	font-size: 14.72px;
	color: var(--vv-tool-mo);
}

/* ---- Câu trả lời (Khuôn 1, 5) ------------------------------------ */

.vv-tool__cau {
	margin: 0 0 16px;
	font-size: 16.32px;
}

.vv-tool__cau b {
	padding: 0.05em 0.3em;
	background: var(--vv-tool-xanh-nhat) !important;
	border-radius: 5px;
	color: var(--vv-tool-xanh) !important;
	font-weight: 700;
	white-space: nowrap;
}

/* Con số DUY NHẤT được to trong mỗi tool — dùng màu khác hẳn với các số
 * phụ ở trên (nâu đất, không phải xanh) để mắt nhận ra ngay đây mới là
 * câu trả lời chính, thay vì lẫn vào các con số ngữ cảnh. */
.vv-tool__cau big,
.vv-tool big {
	display: inline-block;
	font-size: 1.8em;
	font-weight: 800;
	line-height: 1.15;
	color: var(--vv-tool-nau) !important;
	background: none !important;
	padding: 0;
	vertical-align: -0.08em;
}

.vv-tool--nhay {
	animation: vv-tool-nhay 0.28s ease-out;
}

@keyframes vv-tool-nhay {
	from { opacity: 0.45; transform: translateY(2px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vv-tool--nhay { animation: none; }
}

/* ---- Điều khiển: thanh trượt + chip ------------------------------ */

.vv-tool__controls {
	display: grid;
	gap: 12px;
	margin-bottom: 17.6px;
}

.vv-tool__control {
	padding: 12px 13.6px;
	background: var(--vv-tool-nen-2);
	border: 1px solid var(--vv-tool-vien);
	border-radius: 10px;
}

.vv-tool__control-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.vv-tool__control-label {
	display: block;
	font-size: 12.8px;
	font-weight: 600;
	color: var(--vv-tool-mo) !important;
	margin-bottom: 8px;
}

.vv-tool__control-val {
	font-weight: 700;
	color: var(--vv-tool-accent, var(--vv-tool-xanh)) !important;
	font-size: 15.2px;
}

.vv-tool__slider,
input[type="range"].vv-tool__slider {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 100% !important;
	height: 26px !important;    /* vùng chạm, không phải bề dày rãnh */
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	margin: 0 !important;
}

/* v3.36.0 — HARD-LOCK bằng !important + tăng specificity bằng cách lặp
 * selector attribute. Theme RealHome (main.css) có sẵn
 * `input[type=range]::-webkit-slider-thumb` / `-runnable-track` với
 * specificity CAO HƠN `.vv-tool__slider::...` (attribute selector
 * [type=range] tính điểm ngang một class, cộng thêm class .vv-tool__slider
 * vẫn thua vì theme có thêm type selector `input`). Không !important thì
 * theme luôn thắng — đây là lý do giao diện tool ngoài frontend (chấm tròn
 * xanh dương nhỏ 12px mặc định của theme) khác hẳn bản xem thử trong admin
 * (chấm 26px đúng màu accent). Phát hiện 06/08/2026.
 */
.vv-tool__slider::-webkit-slider-runnable-track,
input[type="range"].vv-tool__slider::-webkit-slider-runnable-track {
	height: 5px !important;
	border-radius: 3px !important;
	background: var(--vv-tool-vien) !important;
	border: 0 !important;
}

.vv-tool__slider::-moz-range-track,
input[type="range"].vv-tool__slider::-moz-range-track {
	height: 5px !important;
	border-radius: 3px !important;
	background: var(--vv-tool-vien) !important;
	border: 0 !important;
}

.vv-tool__slider::-ms-track {
	height: 5px !important;
	border-radius: 3px !important;
	background: var(--vv-tool-vien) !important;
	border: 0 !important;
}

/* Nút kéo 26px — đủ lớn để dùng một tay trên điện thoại. */
.vv-tool__slider::-webkit-slider-thumb,
input[type="range"].vv-tool__slider::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 26px !important;
	height: 26px !important;
	margin-top: -10px !important;
	border-radius: 50% !important;
	background: var(--vv-tool-accent, var(--vv-tool-xanh)) !important;
	border: 3px solid var(--vv-tool-nen) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22) !important;
	cursor: pointer !important;
}

.vv-tool__slider::-moz-range-thumb,
input[type="range"].vv-tool__slider::-moz-range-thumb {
	width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	background: var(--vv-tool-accent, var(--vv-tool-xanh)) !important;
	border: 3px solid var(--vv-tool-nen) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22) !important;
	cursor: pointer !important;
}

.vv-tool__slider::-ms-thumb,
input[type="range"].vv-tool__slider::-ms-thumb {
	width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	background: var(--vv-tool-accent, var(--vv-tool-xanh)) !important;
	border: 3px solid var(--vv-tool-nen) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22) !important;
	cursor: pointer !important;
}

.vv-tool__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vv-tool__chip {
	min-height: 44px;           /* tap target tối thiểu */
	padding: 0.5em 1.1em;
	font: inherit;
	font-size: 14.4px;
	font-weight: 600;
	color: var(--vv-tool-chu) !important;
	background: var(--vv-tool-nen) !important;
	border: 1px solid var(--vv-tool-vien) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vv-tool__chip:hover {
	border-color: var(--vv-tool-accent, var(--vv-tool-xanh));
}

.vv-tool__chip.is-on {
	color: #fff !important;
	background: var(--vv-tool-accent, var(--vv-tool-xanh)) !important;
	border-color: var(--vv-tool-accent, var(--vv-tool-xanh)) !important;
	font-weight: 700;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* ---- Khuôn 2: checklist ------------------------------------------ */

.vv-tool__progress {
	height: 6px;
	border-radius: 3px;
	background: var(--vv-tool-vien);
	overflow: hidden;
}

.vv-tool__progress-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--vv-tool-xanh);
	transition: width 0.25s ease-out;
}

.vv-tool__progress-text {
	margin: 6.4px 0 14.4px;
	font-size: 13.6px;
	color: var(--vv-tool-mo);
}

.vv-tool__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vv-tool__item {
	border-top: 1px solid var(--vv-tool-vien);
}

.vv-tool__item-btn {
	display: flex;
	align-items: flex-start;
	gap: 11.2px;
	width: 100%;
	min-height: 44px;
	padding: 11.2px 0;
	font: inherit;
	text-align: left;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.vv-tool__tick {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 0.15em;
	border: 2px solid var(--vv-tool-vien);
	border-radius: 6px;
	position: relative;
}

.vv-tool__item.is-on .vv-tool__tick {
	background: var(--vv-tool-xanh);
	border-color: var(--vv-tool-xanh);
}

.vv-tool__item.is-on .vv-tool__tick::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.vv-tool__item.is-on .vv-tool__item-label {
	color: var(--vv-tool-mo);
	text-decoration: line-through;
}

.vv-tool__req {
	font-size: 11.52px;
	color: var(--vv-tool-vang);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.vv-tool__giai {
	margin: 0 0 12.8px 31.2px;
	font-size: 13.92px;
	color: var(--vv-tool-mo) !important;
}

.vv-tool__ketluan {
	margin: 16px 0 0;
	padding: 12.8px 16px;
	background: var(--vv-tool-xanh-nhat);
	border-left: 3px solid var(--vv-tool-xanh);
	border-radius: 0 8px 8px 0;
	font-size: 15.2px;
}

/* ---- Khuôn 3: so sánh -------------------------------------------- */

.vv-tool__ss {
	border: 1px solid var(--vv-tool-vien);
	border-radius: 10px;
	overflow: hidden;
}

.vv-tool__ss-head,
.vv-tool__ss-row {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr;
	gap: 1px;
	background: var(--vv-tool-vien);
}

.vv-tool__ss-head {
	font-size: 13.6px;
}

.vv-tool__ss-cell {
	padding: 9.6px 11.2px;
	background: var(--vv-tool-nen);
	font-size: 14.08px;
}

.vv-tool__ss-col {
	display: flex;
	flex-direction: column;
	gap: 2.4px;
}

.vv-tool__ss-mota {
	font-size: 12.16px;
	color: var(--vv-tool-mo);
}

.vv-tool__ss-cell.is-win {
	background: var(--vv-tool-xanh-nhat);
	font-weight: 600;
}

.vv-tool__ss-tc {
	padding: 9.6px 11.2px;
	min-height: 44px;
	font: inherit;
	font-size: 14.08px;
	font-weight: 600;
	text-align: left;
	color: inherit;
	background: var(--vv-tool-nen);
	border: 0;
	cursor: pointer;
}

.vv-tool__ss-tc::after {
	content: " ⌄";
	color: var(--vv-tool-mo);
}

.vv-tool__ss-row.is-open .vv-tool__ss-tc::after {
	content: " ⌃";
}

.vv-tool__ss .vv-tool__giai {
	margin: 0;
	padding: 9.6px 11.2px;
	background: var(--vv-tool-xanh-nhat);
}

.vv-tool__ss-tong {
	margin: 11.2px 0 0;
	font-size: 13.6px;
	color: var(--vv-tool-mo);
}

/* ---- Khuôn 4: dòng thời gian ------------------------------------- */

.vv-tool__truc {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
}

.vv-tool__moc {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5.6px;
	min-width: 92px;
	min-height: 44px;
	padding: 6.4px 4.8px;
	font: inherit;
	font-size: 12.16px;
	color: var(--vv-tool-mo);
	background: none;
	border: 0;
	cursor: pointer;
}

.vv-tool__moc-cham {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--vv-tool-vien);
	box-shadow: 0 0 0 4px var(--vv-tool-nen);
}

.vv-tool__moc.is-qua .vv-tool__moc-cham {
	background: var(--vv-tool-xanh);
	opacity: 0.45;
}

.vv-tool__moc.is-on .vv-tool__moc-cham {
	background: var(--vv-tool-xanh);
	transform: scale(1.25);
}

.vv-tool__moc.is-on {
	color: var(--vv-tool-xanh);
	font-weight: 600;
}

.vv-tool__moc-chitiet {
	margin-top: 9.6px;
	padding: 14.4px 16px;
	background: var(--vv-tool-xanh-nhat);
	border-radius: 10px;
}

.vv-tool__moc-khi {
	font-size: 12.16px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--vv-tool-vang);
}

.vv-tool__moc-tieude {
	margin: 3.2px 0 8px;
	font-size: 16px;
}

.vv-tool__moc-nhan {
	margin: 11.2px 0 4px;
	font-size: 12.48px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--vv-tool-mo);
}

.vv-tool__giayto {
	margin: 0;
	padding-left: 18.4px;
	font-size: 14.08px;
}

/* ---- Khuôn 5: thẻ căn -------------------------------------------- */

.vv-tool__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 9.6px;
}

.vv-tool__card {
	display: flex;
	flex-direction: column;
	gap: 2.4px;
	padding: 12px 13.6px;
	background: var(--vv-tool-nen);
	border: 1px solid var(--vv-tool-vien);
	border-radius: 10px;
}

.vv-tool__card-ma {
	font-size: 11.84px;
	letter-spacing: 0.05em;
	color: var(--vv-tool-mo);
}

.vv-tool__card-gia {
	font-size: 17.6px;
	color: var(--vv-tool-xanh) !important;
}

.vv-tool__card-meta,
.vv-tool__card-m2 {
	font-size: 12.8px;
	color: var(--vv-tool-mo);
}

/* ---- Khuôn 6: bảng sống ------------------------------------------ */

.vv-tool__bang {
	border: 1px solid var(--vv-tool-vien);
	border-radius: 10px;
	overflow: hidden;
}

.vv-tool__bang-row {
	display: grid;
	grid-template-columns: 1.1fr 0.8fr 1fr 1fr;
	gap: 1px;
	background: var(--vv-tool-vien);
}

.vv-tool__bang-row > span {
	padding: 8.8px 9.6px;
	background: var(--vv-tool-nen);
	font-size: 13.76px;
}

.vv-tool__bang-row--head > span {
	font-size: 12.16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--vv-tool-mo);
}

/* ---- Chân khối --------------------------------------------------- */

.vv-tool__note {
	margin: 14.4px 0 0;
	font-size: 12.48px;
	line-height: 1.5;
	color: var(--vv-tool-mo) !important;
}

.vv-tool__cta {
	display: inline-block;
	margin-top: 14.4px;
	padding: 0.65em 1.3em;
	font-size: 14.72px;
	font-weight: 600;
	color: #fff !important;
	background: var(--vv-tool-xanh);
	border-radius: 999px;
	text-decoration: none;
}

.vv-tool__admin-note {
	margin: 1.5em 0;
	padding: 11.2px 14.4px;
	font-size: 13.6px;
	background: #fff8e1;
	border: 1px dashed #c9a227;
	border-radius: 8px;
	color: #6b5200;
}

/* ---- Điện thoại --------------------------------------------------- */

@media (max-width: 560px) {
	.vv-tool {
		padding: 16px 14.4px 17.6px;
	}

	.vv-tool__ss-head,
	.vv-tool__ss-row {
		grid-template-columns: 1fr 1fr;
	}

	/* Ô "Tiêu chí" ở hàng đầu chiếm trọn dòng, hai cột nằm dưới. */
	.vv-tool__ss-cell--tc,
	.vv-tool__ss-tc {
		grid-column: 1 / -1;
	}

	.vv-tool__bang-row {
		grid-template-columns: 1fr 0.7fr 1fr;
	}

	/* Bỏ cột trung bình/m² trên màn hẹp — giữ "chỉ một điều quan trọng". */
	.vv-tool__bang-row > span:nth-child(4) {
		display: none;
	}
}

/* ---- Khuôn 7: lưới nhiệt --------------------------------------- */

.vv-tool__luoi {
	display: grid;
	gap: 3px;
	margin-bottom: 9.6px;
	overflow-x: auto;
}

.vv-tool__luoi-hang {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vv-tool__luoi-tang {
	flex: 0 0 34px;
	font-size: 11.52px;
	color: var(--vv-tool-mo) !important;
	text-align: right;
}

.vv-tool__luoi-o {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

.vv-tool__o {
	width: 26px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.vv-tool__o:hover,
.vv-tool__o:focus-visible {
	outline: 2px solid var(--vv-tool-vang);
	outline-offset: 1px;
}

.vv-tool__luoi-chugiai {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.84px;
	color: var(--vv-tool-mo) !important;
}

.vv-tool__luoi-thang {
	flex: 1;
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(to right, rgba(47, 107, 79, 0.15), rgba(47, 107, 79, 0.9));
}

.vv-tool__luoi-chitiet {
	min-height: 1.5em;
	margin: 9.6px 0 0;
	font-size: 14.72px;
}

/* ---- Khuôn 8: máy tính có ngưỡng -------------------------------- */

.vv-tool__muc {
	margin-top: 14.4px;
	padding: 13.6px 16px;
	border-radius: 10px;
	border-left: 4px solid var(--vv-tool-xanh);
	background: var(--vv-tool-xanh-nhat);
}

.vv-tool__muc.is-vang {
	border-left-color: #c9a227;
	background: #fdf6e3;
}

.vv-tool__muc.is-do {
	border-left-color: #b3382c;
	background: #fbeceb;
}

.vv-tool__muc-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 5.6px;
}

.vv-tool__muc-head strong {
	font-size: 16px;
}

.vv-tool__muc-ty {
	font-size: 12.8px;
	color: var(--vv-tool-mo) !important;
}

.vv-tool__muc p {
	margin: 0;
	font-size: 14.4px;
}

/* ---- Khuôn 9: trắc nghiệm --------------------------------------- */

.vv-tool__tn {
	margin-top: 14.4px;
}

.vv-tool__tn-dem {
	font-size: 11.84px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--vv-tool-mo) !important;
}

.vv-tool__tn-hoi,
.vv-tool__tn-tieude {
	margin: 4.8px 0 14.4px;
	font-size: 16.8px;
	line-height: 1.4;
}

.vv-tool__tn-dap {
	display: grid;
	gap: 8px;
}

.vv-tool__tn-nut {
	min-height: 48px;
	padding: 0.7em 1em;
	font: inherit;
	font-size: 15.2px;
	text-align: left;
	color: var(--vv-tool-chu) !important;
	background: transparent;
	border: 1px solid var(--vv-tool-vien);
	border-radius: 10px;
	cursor: pointer;
}

.vv-tool__tn-nut:hover,
.vv-tool__tn-nut:focus-visible {
	border-color: var(--vv-tool-xanh);
	background: var(--vv-tool-xanh-nhat);
}

.vv-tool__tn-goiy {
	margin: 0 0 16px;
	padding-left: 18.4px;
	font-size: 14.72px;
}

.vv-tool__tn-goiy li {
	margin-bottom: 5.6px;
}