/**
 * tools.css — giao diện công cụ testbanphim.com
 *
 * Tự đủ, không phụ thuộc theme và không dùng framework.
 * Mobile-first; đổi màu chủ đạo bằng biến --tbp-primary.
 */

.tbp-tool,
.tbp-phieu,
.tbp-list,
.tbp-bang,
.tbp-quiz {
	/* Bảng màu lấy từ design system của site (Broadsheet: nền giấy #f3f2f2,
	   cyan #0088b0, magenta #d6006c). Giữ nguyên tên biến để 1.300 dòng CSS
	   bên dưới không phải sửa gì. */
	--tbp-primary: #0088b0;
	--tbp-primary-dam: #006786;
	--tbp-nen: #ffffff;
	--tbp-nen-nhat: #f8f4f4;
	--tbp-vien: #d7d3d3;
	--tbp-vien-dam: #bab6b6;
	--tbp-chu: #201e1d;
	--tbp-chu-nhat: #605d5d;
	--tbp-ok: oklch(50% 0.13 152);
	--tbp-ok-nhat: oklch(95% 0.045 152);
	--tbp-ok-dam: oklch(33% 0.09 152);
	--tbp-canh-bao: oklch(74% 0.15 82);
	--tbp-canh-bao-nhat: oklch(96% 0.05 88);
	--tbp-canh-bao-dam: oklch(38% 0.09 70);
	--tbp-loi: oklch(52% 0.19 27);
	--tbp-loi-nhat: oklch(95% 0.03 27);
	--tbp-loi-dam: oklch(34% 0.13 27);
	--tbp-ban-kinh: 2px;
	--tbp-kb-u: minmax(0, 1fr);
	--tbp-kb-h: 40px;

	/* Widget phải tự đủ: không mượn font của theme, nếu không nhãn phím
	   bị font serif kéo rộng và tràn khỏi ô.

	   KHÔNG dùng font mono cho văn xuôi tiếng Việt: đã đo trên máy thật bằng
	   canvas — nhiều font mono và cả Georgia không có glyph dựng sẵn cho chữ
	   có dấu, trình duyệt phải ghép chữ cái với dấu rời nên chữ bị vỡ dấu.
	   Mono chỉ dùng cho con số và nhãn phím, đều là ký tự ASCII. */
	--tbp-font: "Segoe UI", Tahoma, Arial, "Helvetica Neue", system-ui, sans-serif;
	--tbp-font-mono: "Source Code Pro", "Courier New", ui-monospace, monospace;

	box-sizing: border-box;
	color: var(--tbp-chu);
	font-family: var(--tbp-font);
	font-size: 16px;
	line-height: 1.5;
}

.tbp-tool button,
.tbp-tool input,
.tbp-tool table,
.tbp-phieu button,
.tbp-phieu table,
.tbp-list input {
	font-family: var(--tbp-font);
}

.tbp-tool *,
.tbp-phieu *,
.tbp-list * {
	box-sizing: border-box;
}

/* Phải đứng trước mọi khai báo display khác: các class bên dưới dùng
   display:flex/inline-flex, mà selector class thắng [hidden] của trình duyệt. */
.tbp-tool [hidden],
.tbp-phieu[hidden],
.tbp-phieu [hidden],
.tbp-list [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * Khung công cụ
 * ------------------------------------------------------------------ */

.tbp-tool {
	background: var(--tbp-nen);
	border: 1px solid var(--tbp-vien);
	border-radius: var(--tbp-ban-kinh);
	padding: 16px;
	margin: 0 0 28px;
}

.tbp-dau {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}

.tbp-trang-thai {
	margin: 0;
	font-size: 14px;
	color: var(--tbp-chu-nhat);
}

.tbp-tool.is-running .tbp-trang-thai {
	color: var(--tbp-primary);
	font-weight: 600;
}

.tbp-dieu-khien {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tbp-nut {
	appearance: none;
	border: 1px solid var(--tbp-vien);
	background: var(--tbp-nen-nhat);
	color: var(--tbp-chu);
	border-radius: 8px;
	padding: 10px 18px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.tbp-nut:hover { border-color: var(--tbp-chu-nhat); }

.tbp-nut:focus-visible {
	outline: 2px solid var(--tbp-primary);
	outline-offset: 2px;
}

.tbp-nut-chinh {
	background: var(--tbp-primary);
	border-color: var(--tbp-primary);
	color: #fff;
	font-size: 17px;
	padding: 12px 26px;
}

.tbp-nut-chinh:hover { background: var(--tbp-primary-dam); }

.tbp-nut-dung {
	background: var(--tbp-loi);
	border-color: var(--tbp-loi);
	color: #fff;
}

.tbp-than:empty { display: none; }

.tbp-rieng-tu {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--tbp-chu-nhat);
	border-top: 1px solid var(--tbp-vien);
	padding-top: 10px;
}

/* ------------------------------------------------------------------ *
 * Thông báo
 * ------------------------------------------------------------------ */

.tbp-vung-thong-bao:empty { display: none; }

.tbp-thong-bao {
	margin: 0 0 10px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	border-left: 4px solid var(--tbp-chu-nhat);
	background: var(--tbp-nen-nhat);
}

.tbp-tb-loi { border-left-color: var(--tbp-loi); color: var(--tbp-loi); }
.tbp-tb-nhac { border-left-color: var(--tbp-canh-bao); }
.tbp-tb-ok { border-left-color: var(--tbp-ok); color: var(--tbp-ok); }

.tbp-loi {
	color: var(--tbp-loi);
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Bàn phím ảo
 * ------------------------------------------------------------------ */

.tbp-kb {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-start;
	overflow-x: auto;
	padding-bottom: 6px;
}

.tbp-kb-khoi {
	display: grid;
	gap: 3px;
	flex: 0 0 auto;
}

/* Bề rộng tỉ lệ với số cột của từng khối: main 60u, nav/phụ 12u, numpad 16u.
   Nhãn khối phụ ("PrtSc", "PgDn", "Enter") dài hơn phím chữ nên để cỡ chữ nhỏ hơn. */
.tbp-kb-khoi-main { flex: 1 1 460px; min-width: 320px; }
.tbp-kb-khoi-nav { flex: 0 0 116px; }
.tbp-kb-khoi-numpad { flex: 0 0 154px; }
.tbp-kb-khoi-phu { flex: 0 0 116px; }

.tbp-kb-khoi-nav .tbp-phim,
.tbp-kb-khoi-numpad .tbp-phim,
.tbp-kb-khoi-phu .tbp-phim {
	font-size: 10px;
	letter-spacing: -.2px;
}

.tbp-phim {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--tbp-vien);
	border-bottom-width: 2px;
	border-radius: 5px;
	background: var(--tbp-nen-nhat);
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	overflow: hidden;
	min-width: 0;
	transition: background-color .06s linear, color .06s linear;
}

.tbp-phim-nhan {
	padding: 0 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Trạng thái phím.
   Mỗi trạng thái mang ba dấu hiệu chồng lên nhau — màu nền, kiểu viền, và một
   ký hiệu ở góc — để người mù màu vẫn phân biệt được. Ký hiệu vẽ bằng ::after
   nên không cần đổi gì trong JS. */
.tbp-phim.is-idle {
	background: var(--tbp-nen-nhat);
}

.tbp-phim.is-pressed {
	background: var(--tbp-ok-nhat);
	border-color: var(--tbp-ok);
	border-width: 2px;
	color: var(--tbp-ok-dam);
}

.tbp-phim.is-held {
	background: var(--tbp-ok-nhat);
	border-color: var(--tbp-ok);
	border-width: 3px;
	color: var(--tbp-ok-dam);
}

.tbp-phim.is-suspect {
	background: var(--tbp-canh-bao-nhat);
	border-color: var(--tbp-canh-bao-dam);
	border-width: 2px;
	border-style: dashed;
	color: var(--tbp-canh-bao-dam);
}

.tbp-phim.is-error {
	background: var(--tbp-loi-nhat);
	border-color: var(--tbp-loi);
	border-width: 2px;
	color: var(--tbp-loi-dam);
}

/* Ký hiệu góc phím */
.tbp-phim.is-pressed,
.tbp-phim.is-held,
.tbp-phim.is-suspect,
.tbp-phim.is-error {
	position: relative;
}

.tbp-phim.is-pressed::after,
.tbp-phim.is-held::after,
.tbp-phim.is-suspect::after,
.tbp-phim.is-error::after {
	position: absolute;
	top: 0;
	right: 2px;
	font-size: 9px;
	line-height: 1;
	font-weight: 700;
	pointer-events: none;
}

.tbp-phim.is-pressed::after,
.tbp-phim.is-held::after { content: "\2713"; }
.tbp-phim.is-suspect::after { content: "!"; }
.tbp-phim.is-error::after { content: "\00d7"; }

.tbp-phim-khong-do {
	background: repeating-linear-gradient(135deg, #eef1f4 0 6px, #e4e8ec 6px 12px);
	color: var(--tbp-chu-nhat);
	cursor: help;
}

/* ------------------------------------------------------------------ *
 * Trường điều khiển (chọn thời gian, sơ đồ, bộ gõ…)
 * ------------------------------------------------------------------ */

.tbp-truong-hang {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 14px;
}

.tbp-truong {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tbp-truong-nhan {
	font-size: 13px;
	font-weight: 600;
	color: var(--tbp-chu-nhat);
}

.tbp-chon {
	padding: 8px 10px;
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	background: var(--tbp-nen);
	font: inherit;
	min-width: 190px;
}

.tbp-nut-chon {
	display: inline-flex;
	gap: 4px;
	flex-wrap: wrap;
}

.tbp-nut-nho {
	padding: 7px 14px;
	font-size: 14px;
	font-weight: 500;
}

.tbp-nut-nho.is-chon {
	background: var(--tbp-primary);
	border-color: var(--tbp-primary);
	color: #fff;
	font-weight: 600;
}

.tbp-huong-dan {
	margin: 0 0 12px;
	font-size: 15px;
}

/* ------------------------------------------------------------------ *
 * Ô số lớn
 * ------------------------------------------------------------------ */

.tbp-dem-hang {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 14px 0;
}

@media (min-width: 620px) {
	.tbp-dem-hang { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tbp-so-lon {
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	padding: 10px 12px;
	background: var(--tbp-nen-nhat);
	min-width: 0;
}

.tbp-so-lon-nhan {
	font-size: 12px;
	color: var(--tbp-chu-nhat);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tbp-so-lon-gt {
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
}

.tbp-so-lon-phu {
	font-size: 12px;
	color: var(--tbp-chu-nhat);
}

/* ------------------------------------------------------------------ *
 * Biểu đồ
 * ------------------------------------------------------------------ */

.tbp-vung-bieu-do { margin: 12px 0; overflow-x: auto; }

.tbp-bieu-do {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	background: var(--tbp-nen);
}

/* ------------------------------------------------------------------ *
 * Test tốc độ gõ
 * ------------------------------------------------------------------ */

.tbp-doan-mau {
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	padding: 14px 16px;
	background: var(--tbp-nen-nhat);
	font-size: 18px;
	line-height: 1.8;
	letter-spacing: .2px;
	margin-bottom: 10px;
	user-select: none;
}

.tbp-chu { border-radius: 2px; }
.tbp-chu.is-dung { color: var(--tbp-ok); }
.tbp-chu.is-sai { background: #ffd7d5; color: var(--tbp-loi); }
.tbp-chu.is-sai-dau { background: #ffec99; color: #6b4e00; }
.tbp-chu.is-hien-tai { background: var(--tbp-primary); color: #fff; }

.tbp-o-go {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	font-size: 17px;
	line-height: 1.6;
	resize: vertical;
}

.tbp-o-go:disabled { background: var(--tbp-nen-nhat); color: var(--tbp-chu-nhat); }

.tbp-o-go:focus {
	outline: 2px solid var(--tbp-primary);
	outline-offset: 1px;
}

/* Ô nhập ẩn: cần nằm trong luồng để điện thoại chịu bật bàn phím ảo,
   nên thu nhỏ và làm trong suốt thay vì display:none. */
.tbp-o-nhap-an {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Phím Space cỡ lớn
 * ------------------------------------------------------------------ */

.tbp-space-to {
	display: block;
	width: 100%;
	padding: 30px 0;
	margin: 8px 0;
	border: 1px solid var(--tbp-vien);
	border-bottom-width: 4px;
	border-radius: 10px;
	background: var(--tbp-nen-nhat);
	font: inherit;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 4px;
	color: var(--tbp-chu-nhat);
}

.tbp-space-to.is-pressed {
	background: var(--tbp-primary);
	border-color: var(--tbp-primary);
	color: #fff;
}

.tbp-space-to.is-held {
	background: var(--tbp-ok);
	border-color: var(--tbp-ok);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Tra mã phím & tổ hợp phím
 * ------------------------------------------------------------------ */

.tbp-the-ma-phim { margin-bottom: 14px; }

.tbp-ma-phim-lon,
.tbp-to-hop {
	font-size: 26px;
	font-weight: 700;
	padding: 16px;
	margin-bottom: 10px;
	text-align: center;
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	background: var(--tbp-nen-nhat);
	word-break: break-word;
}

.tbp-bang-tra {
	max-height: 340px;
	overflow-y: auto;
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	margin-top: 8px;
}

.tbp-bang-tra .tbp-bang-kq th,
.tbp-bang-tra .tbp-bang-kq td { padding: 6px 10px; font-size: 14px; }

.tbp-vung-bang { margin: 12px 0; }

.tbp-tieu-de-nho {
	margin: 16px 0 6px;
	font-size: 16px;
}

.tbp-phim-cuoi { margin: 12px 0; }

.tbp-phim-cuoi-trong {
	margin: 0;
	color: var(--tbp-chu-nhat);
	font-size: 14px;
}

/* Phím cần giữ trong bài test ghosting */
.tbp-phim-can-giu {
	outline: 2px dashed var(--tbp-primary);
	outline-offset: -2px;
}

/* ------------------------------------------------------------------ *
 * Vùng thao tác (chuột, touchpad, phản xạ, aim)
 * ------------------------------------------------------------------ */

.tbp-vung-thao-tac {
	position: relative;
	border: 2px dashed var(--tbp-vien);
	border-radius: var(--tbp-ban-kinh);
	background: var(--tbp-nen-nhat);
	padding: 14px;
	margin: 12px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	touch-action: none;          /* để pointermove không bị cuộn trang cướp mất */
	user-select: none;
	overflow: hidden;
}

.tbp-vung-thao-tac:focus-visible {
	outline: 2px solid var(--tbp-primary);
	outline-offset: 2px;
}

.tbp-vung-nhan {
	margin: 0;
	font-size: 14px;
	color: var(--tbp-chu-nhat);
	text-align: center;
}

.tbp-vung-thao-tac.is-pressed {
	background: #dbeafe;
	border-color: var(--tbp-primary);
}

.tbp-cps-nhac {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * Chuột ảo
 * ------------------------------------------------------------------ */

.tbp-chuot {
	width: 96px;
	height: auto;
	max-height: 170px;
}

.tbp-chuot-than {
	fill: var(--tbp-nen);
	stroke: var(--tbp-chu-nhat);
	stroke-width: 3;
}

.tbp-chuot-nut {
	fill: var(--tbp-nen-nhat);
	stroke: var(--tbp-chu-nhat);
	stroke-width: 2.5;
	transition: fill .08s linear;
}

.tbp-chuot-ben { fill: #e6eaee; }

.tbp-chuot-nut.is-held { fill: var(--tbp-ok); }
.tbp-chuot-nut.is-pressed { fill: var(--tbp-primary); }
.tbp-chuot-nut.is-error { fill: var(--tbp-loi); }

/* ------------------------------------------------------------------ *
 * Lưới quét (touchpad, cảm ứng)
 * ------------------------------------------------------------------ */

.tbp-luoi {
	display: grid;
	gap: 3px;
	margin: 12px 0;
	touch-action: none;
	user-select: none;
}

.tbp-luoi-o {
	aspect-ratio: 1 / 1;
	border: 1px solid var(--tbp-vien);
	border-radius: 4px;
	background: var(--tbp-nen-nhat);
	transition: background-color .08s linear;
}

.tbp-luoi-o.is-to {
	background: var(--tbp-ok);
	border-color: var(--tbp-ok);
}

/* ------------------------------------------------------------------ *
 * Test sensor
 * ------------------------------------------------------------------ */

.tbp-vung-sensor { padding: 0; }

.tbp-duong-ke {
	position: absolute;
	left: 5%;
	right: 5%;
	top: 50%;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--tbp-vien) 0 10px, transparent 10px 20px);
}

.tbp-vet-keo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.tbp-o-so {
	padding: 8px 10px;
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	font: inherit;
	width: 120px;
}

.tbp-cac-buoc {
	margin: 0 0 14px;
	padding-left: 22px;
	font-size: 15px;
}

.tbp-cac-buoc li { margin-bottom: 6px; }

/* ------------------------------------------------------------------ *
 * Test phản xạ
 * ------------------------------------------------------------------ */

.tbp-vung-phan-xa {
	border-style: solid;
	cursor: pointer;
	min-height: 240px;
}

.tbp-vung-phan-xa.is-cho { background: #b91c1c; border-color: #b91c1c; }
.tbp-vung-phan-xa.is-san-sang { background: var(--tbp-ok); border-color: var(--tbp-ok); }
.tbp-vung-phan-xa.is-som { background: var(--tbp-canh-bao); border-color: var(--tbp-canh-bao); }

.tbp-phan-xa-chu {
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	color: var(--tbp-chu-nhat);
}

.tbp-vung-phan-xa.is-cho .tbp-phan-xa-chu,
.tbp-vung-phan-xa.is-san-sang .tbp-phan-xa-chu,
.tbp-vung-phan-xa.is-som .tbp-phan-xa-chu { color: #fff; }

/* ------------------------------------------------------------------ *
 * Test aim
 * ------------------------------------------------------------------ */

.tbp-vung-aim {
	display: block;
	padding: 0;
	cursor: crosshair;
	min-height: 320px;
}

.tbp-muc-tieu {
	position: absolute;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--tbp-loi);
	box-shadow: 0 0 0 2px var(--tbp-loi);
	padding: 0;
	cursor: crosshair;
}

/* ------------------------------------------------------------------ *
 * Trình chiếu toàn màn hình (điểm chết, hở sáng, màu, burn-in, gamma)
 * ------------------------------------------------------------------ */

.tbp-man {
	position: relative;
	width: 100%;
	height: 70vh;
	margin: 12px 0;
	border: 1px solid var(--tbp-vien);
	border-radius: var(--tbp-ban-kinh);
	overflow: hidden;
	cursor: pointer;
	touch-action: none;
	user-select: none;
	background: #000;
}

/* Khi thật sự vào toàn màn hình thì bỏ hết viền và bo góc. */
.tbp-man:fullscreen {
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.tbp-man:focus-visible { outline: 3px solid var(--tbp-primary); outline-offset: -3px; }

.tbp-man-lop {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tbp-man-nhan,
.tbp-man-huong-dan {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, .72);
	color: #fff;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 14px;
	text-align: center;
	pointer-events: none;
	transition: opacity .4s linear;
}

.tbp-man-nhan { top: 14px; font-weight: 600; }
.tbp-man-huong-dan { bottom: 14px; max-width: min(92%, 520px); }
.tbp-man-huong-dan.is-an { opacity: 0; }
.tbp-man-huong-dan-dong { margin: 2px 0; }

.tbp-canvas-day {
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
}

/* ------------------------------------------------------------------ *
 * Ô xám rời (test màu)
 * ------------------------------------------------------------------ */

.tbp-o-xam {
	display: grid;
	gap: 4px;
	width: min(90%, 720px);
	aspect-ratio: 1 / 1;
}

.tbp-o-xam-o { border-radius: 3px; }

/* ------------------------------------------------------------------ *
 * Lưới cảm ứng toàn màn hình
 * ------------------------------------------------------------------ */

.tbp-luoi-toan-man {
	width: 100%;
	height: 70vh;
	gap: 1px;
	background: var(--tbp-nen);
	margin: 12px 0;
}

.tbp-luoi-toan-man:fullscreen { height: 100%; margin: 0; }

.tbp-luoi-toan-man .tbp-luoi-o { aspect-ratio: auto; border-radius: 0; }

/* ------------------------------------------------------------------ *
 * Cảm ứng đa điểm
 * ------------------------------------------------------------------ */

.tbp-vung-cham { display: block; padding: 0; }

.tbp-cham-tron {
	position: absolute;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .85;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Sửa điểm kẹt
 * ------------------------------------------------------------------ */

.tbp-vung-pixel-fix { display: block; padding: 0; background: #111; }

.tbp-o-nhap-nhay {
	position: absolute;
	cursor: move;
	touch-action: none;
	border: 1px solid rgba(255, 255, 255, .35);
}

/* ------------------------------------------------------------------ *
 * Bóng mờ chuyển động
 * ------------------------------------------------------------------ */

.tbp-vung-motion {
	display: block;
	padding: 0;
	background: #202020;
	overflow: hidden;
}

.tbp-khoi-chay {
	position: absolute;
	top: 50%;
	margin-top: -40px;
	width: 80px;
	height: 80px;
	background: #fff;
	border-radius: 6px;
	will-change: transform;
}

.tbp-canvas-tai {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	background: #111;
	margin-bottom: 8px;
}

/* ------------------------------------------------------------------ *
 * Gamma
 * ------------------------------------------------------------------ */

.tbp-gamma-mau {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: min(90%, 640px);
	aspect-ratio: 2 / 1;
	position: relative;
}

/* Sọc đen–trắng xen kẽ từng dòng: trung bình quang học đúng bằng 50%. */
.tbp-gamma-soc {
	background: repeating-linear-gradient(180deg, #000 0 1px, #fff 1px 2px);
}

.tbp-gamma-nhan {
	position: absolute;
	left: 50%;
	bottom: -34px;
	transform: translateX(-50%);
	color: #fff;
	background: rgba(0, 0, 0, .7);
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 14px;
}

/* ------------------------------------------------------------------ *
 * Âm thanh & camera
 * ------------------------------------------------------------------ */

.tbp-song {
	width: 100%;
	height: auto;
	max-height: 160px;
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	background: var(--tbp-nen);
	margin: 10px 0;
}

.tbp-video {
	width: 100%;
	max-width: 640px;
	height: auto;
	border-radius: var(--tbp-ban-kinh);
	background: #111;
	display: block;
	margin: 10px 0;
}

.tbp-video.is-guong { transform: scaleX(-1); }

.tbp-anh-chup {
	width: 100%;
	max-width: 480px;
	height: auto;
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	display: block;
	margin: 8px 0;
}

.tbp-nghe-lai {
	display: block;
	width: 100%;
	max-width: 480px;
	margin: 10px 0;
}

.tbp-thanh-truot {
	width: 100%;
	max-width: 460px;
	accent-color: var(--tbp-primary);
}

/* Các bước của bài kiểm tra trước cuộc họp */
.tbp-buoc-hien {
	border: 1px solid var(--tbp-vien);
	border-radius: var(--tbp-ban-kinh);
	padding: 14px 16px;
	margin: 12px 0;
	background: var(--tbp-nen);
}

.tbp-buoc-than { margin-bottom: 10px; }

/* ------------------------------------------------------------------ *
 * Tay cầm & cảm biến
 * ------------------------------------------------------------------ */

.tbp-vong-stick {
	display: block;
	margin: 12px auto;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--tbp-vien);
	border-radius: 50%;
	background: var(--tbp-nen);
}

.tbp-buoc-nhac {
	margin: 8px 0;
	font-size: 17px;
	font-weight: 600;
	text-align: center;
}

/* Sân bóng cho cảm biến gia tốc */
.tbp-san-bong {
	position: relative;
	height: 260px;
	border: 2px solid var(--tbp-vien);
	border-radius: var(--tbp-ban-kinh);
	background: var(--tbp-nen-nhat);
	overflow: hidden;
	margin: 12px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tbp-bong {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tbp-primary);
	transition: transform .06s linear;
}

/* Khối hộp 3D cho con quay hồi chuyển */
.tbp-san-3d {
	height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 700px;
	margin: 12px 0;
	background: var(--tbp-nen-nhat);
	border: 1px solid var(--tbp-vien);
	border-radius: var(--tbp-ban-kinh);
}

.tbp-hop-3d {
	position: relative;
	width: 110px;
	height: 110px;
	transform-style: preserve-3d;
	transition: transform .05s linear;
}

.tbp-mat-3d {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .4);
}

.tbp-mat-truoc { background: rgba(31, 111, 235, .9); transform: translateZ(55px); }
.tbp-mat-sau { background: rgba(31, 111, 235, .55); transform: rotateY(180deg) translateZ(55px); }
.tbp-mat-trai { background: rgba(26, 127, 55, .85); transform: rotateY(-90deg) translateZ(55px); }
.tbp-mat-phai { background: rgba(26, 127, 55, .6); transform: rotateY(90deg) translateZ(55px); }
.tbp-mat-tren { background: rgba(191, 135, 0, .9); transform: rotateX(90deg) translateZ(55px); }
.tbp-mat-duoi { background: rgba(191, 135, 0, .6); transform: rotateX(-90deg) translateZ(55px); }

/* La bàn */
.tbp-la-ban {
	position: relative;
	width: 280px;
	height: 280px;
	margin: 12px auto;
	border: 2px solid var(--tbp-vien);
	border-radius: 50%;
	background: var(--tbp-nen-nhat);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tbp-la-ban-kim {
	width: 6px;
	height: 190px;
	background: linear-gradient(180deg, var(--tbp-loi) 0 50%, var(--tbp-nen) 50% 100%);
	border-radius: 3px;
	transition: transform .08s linear;
}

.tbp-la-ban-nhan {
	position: absolute;
	font-size: 14px;
	font-weight: 700;
	color: var(--tbp-chu-nhat);
}

/* Pin */
.tbp-pin {
	position: relative;
	height: 40px;
	border: 3px solid var(--tbp-chu-nhat);
	border-radius: 8px;
	background: var(--tbp-nen);
	margin: 12px 0;
	overflow: hidden;
	max-width: 420px;
}

.tbp-pin-day {
	display: block;
	height: 100%;
	width: 0;
	background: var(--tbp-ok);
	transition: width .3s linear;
}

.tbp-pin.is-sac .tbp-pin-day { background: var(--tbp-primary); }
.tbp-pin.is-yeu .tbp-pin-day { background: var(--tbp-loi); }

/* ------------------------------------------------------------------ *
 * Bảng kết quả
 * ------------------------------------------------------------------ */

.tbp-ket-qua {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--tbp-vien);
}

.tbp-kq-tieu-de {
	margin: 0 0 10px;
	font-size: 18px;
}

.tbp-bang-kq {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.tbp-bang-kq th,
.tbp-bang-kq td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--tbp-vien);
	vertical-align: top;
}

.tbp-bang-kq th {
	font-weight: 500;
	color: var(--tbp-chu-nhat);
	width: 52%;
}

.tbp-td-gt { font-weight: 600; }

.tbp-tt-ok { color: var(--tbp-ok); }
.tbp-tt-nhac { color: var(--tbp-canh-bao); }
.tbp-tt-loi { color: var(--tbp-loi); }

.tbp-kq-nut {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.tbp-kq-ghi-chu,
.tbp-phieu-ghi-chu {
	font-size: 13px;
	color: var(--tbp-chu-nhat);
	margin: 10px 0 0;
}

/* ------------------------------------------------------------------ *
 * Đồng hồ
 * ------------------------------------------------------------------ */

.tbp-gauge { margin: 10px 0; }

.tbp-gauge-nhan {
	font-size: 14px;
	color: var(--tbp-chu-nhat);
	margin-bottom: 4px;
}

.tbp-gauge-thanh {
	height: 12px;
	border-radius: 6px;
	background: var(--tbp-nen-nhat);
	border: 1px solid var(--tbp-vien);
	overflow: hidden;
}

.tbp-gauge-day {
	display: block;
	height: 100%;
	background: var(--tbp-primary);
}

/* ------------------------------------------------------------------ *
 * Phiếu kết quả
 * ------------------------------------------------------------------ */

.tbp-phieu {
	border: 2px solid var(--tbp-primary);
	border-radius: var(--tbp-ban-kinh);
	padding: 16px;
	margin: 0 0 28px;
	background: var(--tbp-nen);
}

.tbp-phieu-tieu-de { margin: 0 0 4px; font-size: 20px; }

.tbp-phieu-mo-ta,
.tbp-phieu-meta {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--tbp-chu-nhat);
}

.tbp-phieu-chan {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

/* ------------------------------------------------------------------ *
 * Danh sách [testbanphim list="..."]
 * ------------------------------------------------------------------ */

.tbp-list-tim { margin-bottom: 12px; }

.tbp-list-tim label {
	display: block;
	font-size: 14px;
	color: var(--tbp-chu-nhat);
	margin-bottom: 4px;
}

.tbp-list-input {
	width: 100%;
	max-width: 420px;
	padding: 10px 12px;
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	font: inherit;
}

.tbp-list-dem {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--tbp-chu-nhat);
	min-height: 1.2em;
}

.tbp-list-az {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.tbp-list-az a {
	border: 1px solid var(--tbp-vien);
	border-radius: 6px;
	padding: 3px 9px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.tbp-list-chu {
	margin: 18px 0 6px;
	font-size: 17px;
	border-bottom: 1px solid var(--tbp-vien);
	padding-bottom: 4px;
}

.tbp-list-ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

@media (min-width: 600px) {
	.tbp-list-ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ *
 * Trang nhúng /embed/<tool>/
 * ------------------------------------------------------------------ */

.tbp-embed-body .tbp-tool { margin-bottom: 8px; }

.tbp-embed-nguon {
	margin: 0;
	font-size: 13px;
	color: var(--tbp-chu-nhat, #636c76);
	text-align: right;
}

/* ------------------------------------------------------------------ *
 * Màn hình rộng
 * ------------------------------------------------------------------ */

@media (min-width: 720px) {
	.tbp-tool { padding: 22px; }

	.tbp-dau {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.tbp-kb-khoi-main .tbp-phim { font-size: 12px; }

	.tbp-tool { --tbp-kb-h: 46px; }
}

@media (max-width: 420px) {
	.tbp-tool { --tbp-kb-h: 32px; padding: 12px; }
	.tbp-phim { font-size: 9px; }
	.tbp-kb-khoi-nav .tbp-phim,
	.tbp-kb-khoi-numpad .tbp-phim,
	.tbp-kb-khoi-phu .tbp-phim { font-size: 8px; }
	.tbp-kb-khoi-nav { flex: 0 0 76px; }
	.tbp-kb-khoi-numpad { flex: 0 0 100px; }
	.tbp-kb-khoi-phu { flex: 0 0 76px; }
	.tbp-nut-chinh { width: 100%; justify-content: center; }
}


/* --------------------------------------------------------------- bảng tra cứu
   Bảng sinh từ config qua [testbanphim table="..."]. Bảng rộng cuộn ngang
   trong khung riêng để trang không bao giờ bị cuộn ngang theo. */

.tbp-bang {
	font-family: var(--tbp-font);
	color: var(--tbp-chu);
	margin: 1.5rem 0;
}

.tbp-bang-cuon {
	overflow-x: auto;
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	background: var(--tbp-nen);
}

.tbp-bang-table {
	border-collapse: collapse;
	width: 100%;
	min-width: 32rem;
	font-size: 0.95rem;
}

.tbp-bang-table th,
.tbp-bang-table td {
	padding: 0.55rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--tbp-vien);
	vertical-align: top;
}

.tbp-bang-table thead th {
	position: sticky;
	top: 0;
	background: var(--tbp-nen-nhat);
	font-weight: 600;
	white-space: nowrap;
}

.tbp-bang-table tbody tr:nth-child(even) {
	background: var(--tbp-nen-nhat);
}

.tbp-bang-table tbody tr:last-child td {
	border-bottom: 0;
}

.tbp-bang-nguon,
.tbp-bang-ghi-chu {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--tbp-chu-nhat);
}

.tbp-bang-loi {
	padding: 0.75rem 1rem;
	border: 1px solid var(--tbp-vien);
	border-radius: 8px;
	color: var(--tbp-loi);
}

@media (max-width: 480px) {
	.tbp-bang-table {
		font-size: 0.9rem;
	}

	.tbp-bang-table th,
	.tbp-bang-table td {
		padding: 0.45rem 0.55rem;
	}
}


/* --------------------------------------------------------------------- quiz
   Quiz boolean trên trang tĩnh. Chấm điểm chạy trong trình duyệt, câu trả lời
   không được gửi đi đâu. */

.tbp-quiz {
	font-family: var(--tbp-font);
	color: var(--tbp-chu);
	border: 1px solid var(--tbp-vien);
	border-radius: 10px;
	padding: 1rem 1.25rem 1.25rem;
	margin: 1.5rem 0;
	background: var(--tbp-nen);
}

.tbp-quiz-tieu-de {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
}

.tbp-quiz-mo-ta {
	margin: 0 0 1rem;
	color: var(--tbp-chu-nhat);
	font-size: 0.9rem;
}

.tbp-quiz-ds {
	margin: 0;
	padding-left: 1.25rem;
}

.tbp-quiz-cau + .tbp-quiz-cau {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--tbp-vien);
}

.tbp-quiz-hoi {
	margin: 0 0 0.5rem;
	font-weight: 600;
}

.tbp-quiz-dap {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.tbp-quiz-nhan {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	cursor: pointer;
}

.tbp-quiz-tool {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--tbp-chu-nhat);
}

.tbp-quiz-tien-do {
	margin: 1rem 0 0;
	font-size: 0.9rem;
	color: var(--tbp-chu-nhat);
}

.tbp-quiz-ket-qua {
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	border-radius: 8px;
	background: var(--tbp-nen-nhat);
	border: 1px solid var(--tbp-vien);
}

.tbp-quiz-ket-ten {
	margin: 0 0 0.35rem;
	font-weight: 700;
	font-size: 1.05rem;
}

.tbp-quiz-ket-mo-ta {
	margin: 0 0 0.35rem;
}

.tbp-quiz-ket-diem {
	margin: 0;
	font-size: 0.85rem;
	color: var(--tbp-chu-nhat);
}

.tbp-quiz [hidden] {
	display: none !important;
}

.tbp-quiz-loi {
	color: var(--tbp-loi);
}


/* ------------------------------------------------- vùng chạm trên máy nhỏ
   Ở bề ngang hẹp, các nút chọn nhỏ (chip chọn thời lượng, nhãn quiz) chỉ cao
   khoảng 24–33 px — đủ để bấm bằng chuột nhưng hụt so với đầu ngón tay. Nâng
   chiều cao tối thiểu khi thiết bị dùng cảm ứng, không đụng tới bản máy tính. */

@media (max-width: 640px) and (pointer: coarse) {
	.tbp-nut-nho,
	.tbp-nut-chon .tbp-nut {
		min-height: 44px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.tbp-quiz-nhan {
		min-height: 44px;
		padding: 8px 10px;
		border: 1px solid var(--tbp-vien);
		border-radius: 8px;
		background: var(--tbp-nen-nhat);
	}

	.tbp-quiz-dap {
		gap: 0.6rem;
	}

	.tbp-chon {
		min-height: 44px;
	}
}


/* --------------------------------------------------- con số dùng font mono
   Chỉ các con số và nhãn phím mới dùng mono: chúng là ASCII nên không có rủi
   ro vỡ dấu, và cột số thẳng hàng thì dễ đọc hơn hẳn. */

.tbp-so-lon-gt,
.tbp-phim-nhan,
.tbp-bang-kq td:last-child,
.tbp-phieu-than td:last-child {
	font-family: var(--tbp-font-mono);
	font-variant-numeric: tabular-nums;
}