.soc-canvas {
	/* Xám trung tính thuần (R=G=B), không ngả xanh nhẹ như #f4f4f5 trước
	   đây, và đậm hơn một chút để rõ là "xám" thay vì gần trắng. */
	--soc-bg: #eeeeee;
	--soc-grid: rgba(0, 0, 0, 0.12);
	--soc-node-bg: #ffffff;
	--soc-node-border: #a8a8ad;
	--soc-node-text: #1a1a1a;
	--soc-edge: #8a8a8a;
	--soc-muted: #6b6b70;

	position: relative;
	width: 100%;
	height: 480px;
	overflow: hidden;
	/* Lưới chấm (dot grid) thay cho lưới kẻ ô trước đây — mỗi chấm là một
	   radial-gradient tròn 1px, lặp lại mỗi 24px. */
	background:
		radial-gradient(circle, var(--soc-grid) 1px, transparent 1px) 0 0 / 24px 24px,
		var(--soc-bg);
	border: 1px solid var(--soc-node-border);
	border-radius: 8px;
	box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
	.soc-canvas {
		/* Gần đen hơn nữa để khớp ảnh mẫu (nền canvas gần như đen tuyền). */
		--soc-bg: #0a0a0b;
		--soc-grid: rgba(255, 255, 255, 0.09);
		--soc-node-bg: #1a1b1e;
		--soc-node-border: #44474c;
		--soc-node-text: #e8e8e8;
		--soc-edge: #7a7e86;
		--soc-muted: #9a9ea5;
	}
}

.soc-canvas__loading,
.soc-canvas__error {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	text-align: center;
	color: var(--soc-muted);
	font-size: 0.9rem;
}

.soc-canvas__viewport {
	position: absolute;
	inset: 0;
	cursor: grab;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	/* overflow: auto để lộ scrollbar thật của trình duyệt, đồng bộ với
	   .soc-canvas__scaler bên dưới (kích thước = worldSize * scale) — thay
	   cho việc chỉ mô phỏng pan bằng transform: translate như trước, lúc đó
	   viewport không có nội dung "trong luồng" nào để trình duyệt tính
	   scrollWidth/scrollHeight nên không thể có scrollbar. */
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--soc-node-border) transparent;
}

.soc-canvas__viewport::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.soc-canvas__viewport::-webkit-scrollbar-track {
	background: transparent;
}

.soc-canvas__viewport::-webkit-scrollbar-thumb {
	background: var(--soc-node-border);
	border-radius: 4px;
}

.soc-canvas__viewport::-webkit-scrollbar-thumb:hover {
	background: var(--soc-muted);
}

.soc-canvas__viewport.is-dragging {
	cursor: grabbing;
}

/* Phần tử "trong luồng" (không position: absolute) mà JS set width/height =
   worldSize.w/h * scale — chính kích thước này quyết định
   scrollWidth/scrollHeight của viewport, tức là nội dung scrollbar phản ánh
   đúng vùng có thể cuộn. */
.soc-canvas__scaler {
	position: relative;
}

.soc-canvas__world {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	will-change: transform;
}

.soc-canvas__edges {
	position: absolute;
	top: 0;
	left: 0;
	overflow: visible;
	pointer-events: none;
}

.soc-canvas__edge-label {
	font-size: 12px;
	fill: var(--soc-muted);
	paint-order: stroke;
	stroke: var(--soc-bg);
	stroke-width: 3px;
}

.soc-canvas__node {
	position: absolute;
	box-sizing: border-box;
	border: 2px solid var(--soc-node-border);
	background: var(--soc-node-bg);
	border-radius: 6px;
	overflow: hidden;
}

/* Padding chuyển vào đây (thay vì để trên .soc-canvas__node) để scrollbar
   dọc nằm sát mép phải của node — padding-right chỉ đẩy chữ vào trong,
   scrollbar vẫn bám theo cạnh viền của box (theo cách trình duyệt đặt nó). */
.soc-canvas__node-content {
	box-sizing: border-box;
	height: 100%;
	padding: 8px 10px;
	overflow-y: auto;
	overflow-x: hidden;
	color: var(--soc-node-text);
	font-size: 17px;
	line-height: 1.4;
	word-break: break-word;
	scrollbar-width: thin;
	scrollbar-color: var(--soc-node-border) transparent;
}

.soc-canvas__node-content::-webkit-scrollbar {
	width: 6px;
}

.soc-canvas__node-content::-webkit-scrollbar-track {
	background: transparent;
}

.soc-canvas__node-content::-webkit-scrollbar-thumb {
	background: var(--soc-node-border);
	border-radius: 3px;
}

.soc-canvas__node-content::-webkit-scrollbar-thumb:hover {
	background: var(--soc-muted);
}

.soc-canvas__node-content > *:first-child {
	margin-top: 0;
}

.soc-canvas__node-content > *:last-child {
	margin-bottom: 0;
}

/* Toàn bộ block heading dưới đây dùng !important: theme site có nhiều rule
   nhắm cùng heading tuỳ template chứa shortcode (.wiki-article h2,
   .article-content h2/h3/h4, .page-content h2/h3/h4, hay chỉ h1..h6 chung),
   cùng specificity (1 class + 1 type) với rule ở đây, và site.css luôn được
   Grav xếp SAU CSS của plugin/shortcode trong <head> nên theo thứ tự nạp thì
   theme thắng nếu không ép !important — plugin không kiểm soát được thứ tự
   nạp CSS đó. */
.soc-canvas__node-content h1,
.soc-canvas__node-content h2,
.soc-canvas__node-content h3,
.soc-canvas__node-content h4,
.soc-canvas__node-content h5,
.soc-canvas__node-content h6 {
	margin: 0.6em 0 0.3em;
	line-height: 1.25;
	font-weight: normal !important;
	color: var(--soc-node-text) !important;
	/* Màu gạch chân = màu viền của node (biến --soc-node-accent do JS set
	   trên .soc-canvas__node khi node có "color"; node không màu thì rơi về
	   var(--soc-node-border) mặc định) — thay vì màu accent cố định
	   (thường là amber) mà theme site gán cho heading. */
	border-bottom: 1px solid var(--soc-node-accent, var(--soc-node-border)) !important;
	padding-bottom: 0.3em !important;
}

.soc-canvas__node-content h1 { font-size: 1.5em; }
.soc-canvas__node-content h2 { font-size: 1.3em; }
.soc-canvas__node-content h3 { font-size: 1.15em; }
.soc-canvas__node-content h4 { font-size: 1.05em; }
.soc-canvas__node-content h5 { font-size: 1em; }
.soc-canvas__node-content h6 { font-size: 0.9em; }

/* Node chỉ có mỗi heading, không có text gì khác bên dưới: bỏ luôn gạch
   chân, vì lúc đó nó chỉ tạo thành một đường thừa ngay sát viền dưới của
   node. specificity (0,2,1) cao hơn rule chung ở trên (0,1,1) nên thắng dù
   cả hai đều !important. */
.soc-canvas__node-content h1:only-child,
.soc-canvas__node-content h2:only-child,
.soc-canvas__node-content h3:only-child,
.soc-canvas__node-content h4:only-child,
.soc-canvas__node-content h5:only-child,
.soc-canvas__node-content h6:only-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.soc-canvas__node-content p {
	margin: 0.4em 0;
}

.soc-canvas__node-content ul,
.soc-canvas__node-content ol {
	margin: 0.4em 0;
	padding-left: 1.4em;
}

.soc-canvas__node-content li {
	margin: 0.15em 0;
}

/* Một số template chứa shortcode (.wiki-article, .article-content trong
   site.css) tự reset list-style: none trên <ul> và vẽ bullet riêng (hình
   thoi màu amber) bằng ::before trên <li>, với specificity CAO HƠN
   ".soc-canvas__node-content li" (họ có "ul > li" = 2 selector kiểu + 1
   class, ta chỉ có "li" = 1 selector kiểu + 1 class) nên thắng bất kể thứ tự
   nạp CSS. Ép !important + đè đúng các thuộc tính đó để bullet luôn là chấm
   tròn mặc định của trình duyệt, không phụ thuộc theme của trang chứa. */
.soc-canvas__node-content ul {
	list-style: disc !important;
	padding-left: 1.4em !important;
}

.soc-canvas__node-content ul > li {
	position: static !important;
	padding-left: 0 !important;
}

.soc-canvas__node-content ul > li::before {
	content: none !important;
}

.soc-canvas__node-content blockquote {
	margin: 0.4em 0;
	padding-left: 0.7em;
	border-left: 3px solid var(--soc-node-border);
	color: var(--soc-muted);
}

.soc-canvas__node-content code {
	background: var(--soc-grid);
	border-radius: 3px;
	padding: 0.1em 0.35em;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
}

.soc-canvas__node-content pre {
	margin: 0.4em 0;
	padding: 0.5em;
	overflow: auto;
	background: var(--soc-grid);
	border-radius: 4px;
}

.soc-canvas__node-content pre code {
	background: none;
	padding: 0;
}

.soc-canvas__node-content a {
	color: var(--soc-edge);
	text-decoration: underline;
}

.soc-canvas__coords {
	position: absolute;
	left: 8px;
	top: 8px;
	z-index: 1;
	padding: 3px 7px;
	border-radius: 4px;
	background: var(--soc-node-bg);
	border: 1px solid var(--soc-node-border);
	color: var(--soc-muted);
	font-size: 11px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	line-height: 1.3;
	white-space: nowrap;
	/* Chỉ để đọc số, không chặn tương tác (kéo/chạm/scroll) với canvas bên
	   dưới dù nó nằm đè lên góc trên-trái của world. */
	pointer-events: none;
}

.soc-canvas__controls {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	gap: 6px;
	z-index: 1;
}

.soc-canvas__controls button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--soc-node-border);
	border-radius: 4px;
	background: var(--soc-node-bg);
	color: var(--soc-node-text);
	cursor: pointer;
}

.soc-canvas__controls button svg {
	display: block;
}

.soc-canvas__controls button:hover {
	filter: brightness(0.95);
}