/* ---------------------------------------------------------------------------
 * Sơ đồ tổ chức — vẽ bằng CSS, chữ thật (thay cho ảnh raster).
 *
 * MÔ HÌNH TOẠ ĐỘ, đọc phần này trước khi sửa bất cứ số nào:
 *
 *   - Bề NGANG: mọi ô neo theo TÂM, tính bằng phần trăm. Hàng 6 đơn vị là grid 6 cột đều nhau
 *     nên tâm rơi đúng 8,333% · 25% · 41,667% · 58,333% · 75% · 91,667%. Trục ngang căng từ
 *     tâm ô đầu tới tâm ô cuối, vì vậy width = 91,667 − 8,333 = 83,334%.
 *
 *   - Bề DỌC: chiều cao mỗi hàng và mỗi khe được ẤN ĐỊNH bằng biến dưới đây, không để nội dung
 *     tự quyết. Lý do: ba đường dọc dài chạy xuyên nhiều hàng phải biết chính xác bắt đầu ở đâu
 *     và dài bao nhiêu; nếu một ô xuống dòng làm hàng cao thêm thì mọi đường nối lệch hết.
 *     Đổi cỡ chữ hay chữ trong ô -> phải kiểm lại các ô có bị tràn chiều cao không.
 * ------------------------------------------------------------------------- */

.tdc-sodo {
	margin: 30px 0 10px;
}

/* Dưới 960px thì VUỐT NGANG, không thu nhỏ. Thu nhỏ là quay về đúng thứ vừa bỏ đi:
   bản ảnh cũ có chữ cao 11px, trên điện thoại còn ~3px, không ai đọc được. */
.tdc-sodo__khung {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}

.tdc-sodo__ve {
	--o1: 52px;    /* cao hàng Đại hội đồng cổ đông */
	--o2: 52px;    /* cao hàng Hội đồng quản trị / Ban kiểm soát */
	--k2: 30px;    /* khe dưới hàng 1 */
	--otg: 52px;   /* cao hàng Tổng giám đốc */
	--ktg: 30px;   /* khe trên hàng Tổng giám đốc */
	--opt: 58px;   /* cao hàng Phó Tổng giám đốc */
	--kpt: 34px;   /* khe trên hàng Phó TGĐ */
	--ocn: 58px;   /* cao hàng phòng chức năng */
	--kcn: 26px;   /* khe trên hàng phòng chức năng */
	--ktr: 28px;   /* khe từ đáy hàng chức năng xuống trục */
	--kdv: 28px;   /* khe từ trục xuống ô đơn vị, và từ ô đơn vị xuống ô tổ */
	--net: #9FB2C4;
	--dam: var(--tdc-navy, #2C3093);

	position: relative;
	min-width: 900px;
	font-family: var(--tdc-font, sans-serif);
}

/* ---- Ô ---- */
.sd-o {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.24;
	border-radius: 4px;
	padding: 8px 12px;
	font-weight: 600;
	position: relative;
}
.sd-hang--dinh > .sd-o,
.sd-hang--2 > .sd-o,
.sd-hang--tgd > .sd-o,
.sd-hang--ptgd > .sd-o,
.sd-hang--cn > .sd-o {
	position: absolute;
	top: 0;
	height: 100%;
	transform: translateX(-50%);
}

.sd-o--1  { background: var(--tdc-navy, #2C3093); color: #fff; font-size: 15px; width: 240px; }
.sd-o--2  { background: #02567D; color: #fff; font-size: 15px; width: 218px; }
.sd-o--3  { background: #0374A8; color: #fff; font-size: 14px; width: 216px; }
.sd-o--cn { background: #C0E4F5; color: #14224C; font-size: 13.5px; width: 186px; }
/* Ban kiểm soát cố ý KHÔNG tô đặc: nó giám sát, không nằm trên trục điều hành. */
.sd-o--ks {
	background: #fff; color: var(--dam); font-size: 14px; width: 180px;
	border: 2px solid var(--dam);
}
.sd-o--dv {
	background: #fff; color: #14224C; font-size: 13px; min-height: 78px;
	border: 1px solid #BEDCEF; border-top: 3px solid #0495D8;
}
.sd-o--con {
	background: #DFF3FE; color: #14224C; font-size: 12.5px; font-weight: 500;
	border: 1px solid #A7D8F2; min-height: 46px; width: 100%;
}

/* ---- Hàng: chiều cao ấn định ---- */
.sd-hang { position: relative; }
.sd-hang--dinh { height: var(--o1); }
.sd-hang--2    { height: var(--o2); }
.sd-hang--tgd  { height: var(--otg); margin-top: var(--ktg); }
.sd-hang--ptgd { height: var(--opt); margin-top: var(--kpt); }
.sd-hang--cn   { height: var(--ocn); margin-top: var(--kcn); }

.sd-than { position: relative; margin-top: var(--k2); }

/* Tâm ngang từng ô.
   01/10/2026 — khách: "giãn ra để mũi tên từ TGĐ xuống không cắm vào tên phòng, và mũi tên
   này căn giữa khoảng cách giữa phòng Hành chính – Kế hoạch Tài chính". Trước đó hai phòng
   ở 33% / 58% ⇒ đường TGĐ (50%) chạy XUYÊN ô Kế hoạch – Tài chính (ô trải 47–69%).
   Nay ĐỐI XỨNG quanh 50%: 37% / 63%, ô hẹp lại 186px ⇒ khe giữa hai ô ~36px ở khổ 990px,
   đường TGĐ nằm đúng giữa khe. Hai Phó TGĐ giãn ra 24% / 76% (cũng đối xứng) để đường dọc
   của họ không chạm mép ngoài hai phòng; Ban kiểm soát lùi sang 90% để nét đứt không chạm
   ô Phó TGĐ Kế hoạch. Kiểm ở bề rộng nhỏ nhất (900px, min-width của .tdc-sodo__ve): mọi
   đường dọc còn cách mép ô gần nhất ≥ 18px. */
.sd-hang--dinh > .sd-o { left: 50%; }
.sd-hang--2 > .sd-o--2  { left: 50%; }
.sd-hang--2 > .sd-o--ks { left: 90%; }
.sd-hang--tgd > .sd-o   { left: 50%; }
.sd-hang--ptgd > .sd-o:nth-of-type(1) { left: 24%; }
.sd-hang--ptgd > .sd-o:nth-of-type(2) { left: 76%; }
.sd-hang--cn > .sd-o:nth-of-type(1)   { left: 37%; }
.sd-hang--cn > .sd-o:nth-of-type(2)   { left: 63%; }

/* ---- Đường nối ngắn (cuống trên đầu ô) + mũi tên chỉ VÀO ô ----
   Mũi tên là thứ khách nhặt ra ngày 22/09: sơ đồ gốc vẽ rõ chiều đi, bản đầu của ta chỉ có
   đường trơn nên không đọc được ai chỉ đạo ai. */
.sd-o--2::before, .sd-o--ks::before, .sd-o--3::before {
	content: "";
	position: absolute;
	left: 50%;
	width: 2px;
	background: var(--net);
	transform: translateX(-50%);
}
.sd-o--2::after, .sd-o--ks::after, .sd-o--3::after {
	content: "";
	position: absolute;
	top: -8px; left: 50%;
	transform: translateX(-50%);
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 7px solid var(--net);
}
.sd-hang--2 .sd-o--2::before,
.sd-hang--2 .sd-o--ks::before { top: calc(-1 * var(--k2)); height: var(--k2); }
.sd-hang--tgd .sd-o--2::before { top: calc(-1 * var(--ktg)); height: var(--ktg); }
.sd-hang--ptgd .sd-o--3::before { top: -18px; height: 18px; }

/* Ray ngang hàng 2: từ tâm Đại hội đồng cổ đông (50%) sang tâm Ban kiểm soát (90%). */
.sd-hang--2::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--k2)); left: 50%; width: 40%; height: 2px;
	background: var(--net);
}
/* Ray ngang hàng Phó TGĐ + cuống rót xuống từ Tổng giám đốc. */
.sd-hang--ptgd::before {
	content: "";
	position: absolute;
	top: -18px; left: 24%; width: 52%; height: 2px;
	background: var(--net);
}
.sd-hang--ptgd::after {
	content: "";
	position: absolute;
	top: calc(-1 * var(--kpt)); left: 50%; width: 2px; height: calc(var(--kpt) - 18px);
	background: var(--net);
	transform: translateX(-50%);
}

/* ---- Bốn đường dọc dài, neo trong .sd-than ----
   Mốc dọc (0 = đỉnh .sd-than):
     đáy hàng 2   = o2
     đáy TGĐ      = o2 + ktg + otg
     đáy Phó TGĐ  = o2 + ktg + otg + kpt + opt
     đáy .sd-than = ... + kcn + ocn   (trục nằm thấp hơn nữa đúng ktr)          */
.sd-doc {
	position: absolute;
	width: 2px;
	background: var(--net);
	transform: translateX(-50%);
	bottom: calc(-1 * var(--ktr));
}
/* Ban kiểm soát: nét ĐỨT, chạy suốt từ đáy ô xuống trục. */
.sd-doc--ks {
	left: 90%;
	top: var(--o2);
	background: none;
	border-left: 2px dashed var(--dam);
	width: 0;
}
/* Mũi tên cắm xuống trục của Tổng giám đốc và hai Phó TGĐ. */
.sd-doc--tgd::after, .sd-doc--ptgd1::after, .sd-doc--ptgd2::after {
	content: "";
	position: absolute;
	bottom: -1px; left: 50%;
	transform: translateX(-50%);
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 7px solid var(--net);
}
/* Ban kiểm soát: hai đầu đều có mũi tên (báo cáo lên, kiểm soát xuống) — nét ĐỨT. */
.sd-doc--ks::before, .sd-doc--ks::after {
	content: "";
	position: absolute;
	/* -1px chứ không phải 1px: `left` của con tính từ mép TRONG viền, mà nét đứt chính là
	   viền trái 2px ⇒ tâm nét nằm ở -1px. Để 1px thì mũi tên lệch phải 2px so với nét —
	   khách nhặt ra 03/10/2026 ("mũi tên nhìn bị lỗi"). */
	left: -1px;
	transform: translateX(-50%);
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}
.sd-doc--ks::before { top: 0;     border-bottom: 7px solid var(--dam); }
.sd-doc--ks::after  { bottom: -1px; border-top: 7px solid var(--dam); }

/* Tổng giám đốc xuống thẳng trục, đi GIỮA khe hai phòng chức năng (37% và 63%). */
.sd-doc--tgd  { left: 50%; top: calc(var(--o2) + var(--ktg) + var(--otg)); }
/* Hai Phó TGĐ xuống trục. */
.sd-doc--ptgd1 { left: 24%; top: calc(var(--o2) + var(--ktg) + var(--otg) + var(--kpt) + var(--opt)); }
.sd-doc--ptgd2 { left: 76%; top: calc(var(--o2) + var(--ktg) + var(--otg) + var(--kpt) + var(--opt)); }

/* Hai phòng chức năng nối xuống trục bằng cuống có mũi tên HAI ĐẦU.
   Không vẽ được bằng ::before/::after của chính ô: cần ba hình (thân + 2 mũi) mà mỗi phần tử
   chỉ có hai phần tử giả. Nên cuống là một <span> thật. */
.sd-hai {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(-1 * (var(--ktr) + 3px));
	height: calc(var(--ktr) + 3px);
	width: 2px;
	background: var(--net);
}
.sd-hai::before, .sd-hai::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}
.sd-hai::before { top: 0;    border-bottom: 6px solid var(--net); }
.sd-hai::after  { bottom: 0; border-top: 6px solid var(--net); }

/* ---- Trục ngang ----
   01/10/2026 — khách khoanh đỏ hai đầu trục: đầu trái THÒ ra ngoài mũi tên ô đầu, đầu phải
   HỤT trước mũi tên ô cuối (lệch ~5px mỗi đầu). Nguyên nhân: tính tâm cột theo 6 phần đều
   (8,333% / 91,667%) mà quên khe `gap: 12px` của lưới ⇒ tâm thật là c/2 và W − c/2 với
   c = (W − 5×12px)/6. Tính đúng bằng calc thì hai đầu trục trùng khít tâm ô ở MỌI bề rộng. */
.sd-truc {
	position: relative;
	height: 3px;
	/* +2px: phủ hết bề ngang cuống 2px của ô đầu/cuối, đầu trục vuông (bỏ bo tròn) ⇒ khớp
	   kín thành chữ T, không còn cảm giác "hở" ở hai đầu (khách 03/10/2026). */
	width: calc(100% - (100% - 60px) / 6 + 2px);
	margin-left: calc((100% - 60px) / 12 - 1px);
	margin-top: var(--ktr);
	background: var(--dam);
}

/* ---- Hàng đơn vị ---- */
.sd-hang--dv {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-top: var(--kdv);
	align-items: start;
}
.sd-nhanh { position: relative; }

/* `.sd-len` = cuống MỌC LÊN từ đỉnh ô, mũi tên ở CẢ HAI đầu.
   Dùng cho ô đơn vị (nối lên trục) và ô tổ (nối lên xí nghiệp mẹ) — đúng như sơ đồ gốc vẽ:
   đơn vị vừa nhận chỉ đạo vừa báo cáo ngược lên. Phải là <span> thật vì cần ba hình
   (thân + 2 mũi) mà một phần tử chỉ có hai phần tử giả. */
.sd-len {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(-1 * var(--kdv));
	height: var(--kdv);
	width: 2px;
	background: var(--net);
}
.sd-len::before, .sd-len::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}
.sd-len::before { top: -1px;    border-bottom: 7px solid var(--net); }
.sd-len::after  { bottom: -1px; border-top: 7px solid var(--net); }

/* Tổ trực thuộc: xếp dọc dưới đơn vị mẹ, nối bằng một cuống ngắn.
   ⚠️ Phải viết `.tdc-sodo .sd-con`, không được viết trần `.sd-con`: `page.css` có luật
   `.tdc-page-content ul` (độ cụ thể 0-1-1) đè bẹp `margin` của danh sách. Hậu quả đã thấy:
   danh sách dính sát đáy ô mẹ, cuống nối `::before` cao 24px vẽ NGƯỢC LÊN đè qua chữ
   "công trình" trong ô. Lỗi chỉ lộ ra khi nhìn ảnh chụp — số đo `scrollHeight` vẫn sạch. */
.tdc-sodo .sd-con {
	list-style: none;
	margin: var(--kdv) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}
/* Không vẽ cuống chung cho cả danh sách nữa — mỗi ô tổ tự có cuống hai đầu `.sd-len`,
   giống cách sơ đồ gốc nối từng ô một. */
.tdc-sodo .sd-con > li {
	position: relative;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tdc-sodo .sd-con > li::before { content: none; }

/* ---- Chú giải ---- */
.tdc-sodo__chu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 16px;
	font-size: 13px;
	color: var(--tdc-muted, #6D7375);
}
.sd-chu { display: inline-flex; align-items: center; gap: 8px; }
.sd-mau { width: 28px; display: inline-block; }
.sd-mau--lien { border-top: 2px solid #9FB2C4; }
.sd-mau--hai  {
	border-top: 2px solid #9FB2C4;
	position: relative;
}
.sd-mau--hai::before, .sd-mau--hai::after {
	content: "";
	position: absolute;
	top: -6px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}
.sd-mau--hai::before { left: -1px;  border-right: 6px solid #9FB2C4; }
.sd-mau--hai::after  { right: -1px; border-left: 6px solid #9FB2C4; }
.sd-mau--dut  { border-top: 2px dashed var(--tdc-navy, #2C3093); }

/* Gợi ý vuốt CHỈ ở khoảng thật sự phải vuốt: 761–960px. Dưới 760px sơ đồ đã xếp dọc, để lại
   dòng này là chỉ dẫn sai — người dùng đi tìm thứ không tồn tại. */
@media (min-width: 761px) and (max-width: 1200px) {
	.tdc-sodo::after {
		content: "Vuốt ngang để xem hết sơ đồ";
		display: block;
		margin-top: 2px;
		font-size: 12.5px;
		color: var(--tdc-muted, #6D7375);
	}
}

/* Công tắc phóng to: ẩn khỏi mắt nhưng VẪN nhận được bàn phím (không dùng display:none,
   làm thế là ô checkbox biến mất khỏi luồng tiêu điểm, người dùng bàn phím hết bấm được). */
.sd-congtac {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}
.sd-nut { display: none; }

/* ---------------------------------------------------------------------------
 * ĐIỆN THOẠI — vẫn là SƠ ĐỒ, thu vừa màn hình; bấm nút thì về cỡ thật mà đọc.
 *
 * Bản trước xếp thành cây dọc thụt bậc; khách xem rồi nói thẳng: *"phiên bản mobile thì không
 * thấy được sơ đồ nữa"*. Đúng — cây dọc đọc được tên từng bộ phận nhưng KHÔNG còn là sơ đồ:
 * mất hình khối, mất chiều mũi tên, mất trục ngang. Với sơ đồ tổ chức thì chính hình dạng mới
 * là thông tin.
 *
 * Dùng `zoom` chứ không `transform: scale()`: `zoom` thu cả HỘP nên khung tự co theo, còn
 * `transform` chỉ thu phần nhìn thấy và để lại một khoảng trắng cao bằng cỡ gốc.
 *
 * Thu nhỏ thì chữ bé — nhưng đây là chữ THẬT: phóng bằng hai ngón hoặc bấm nút thì nét vẫn
 * sắc. Ảnh raster cũ phóng lên là vỡ, đó mới là khác biệt.
 * ------------------------------------------------------------------------- */
@media (max-width: 760px) {
	.tdc-sodo__khung {
		border: 1px solid #E3EAF0;
		border-radius: 4px;
		padding: 8px 6px;
	}
	.tdc-sodo__ve { zoom: 0.38; }

	.sd-nut {
		display: inline-block;
		margin-top: 10px;
		padding: 9px 16px;
		border: 1px solid var(--tdc-blue, #0495D8);
		border-radius: 4px;
		color: var(--tdc-blue-ink, #0374A8);
		background: #fff;
		font-size: 13.5px;
		font-weight: 600;
		cursor: pointer;
	}
	.sd-nut__vua { display: none; }

	/* Đã bấm: về cỡ thật, vuốt ngang mà đọc. */
	.sd-congtac:checked ~ .tdc-sodo__khung .tdc-sodo__ve { zoom: 1; }
	.sd-congtac:checked ~ .sd-nut .sd-nut__to  { display: none; }
	.sd-congtac:checked ~ .sd-nut .sd-nut__vua { display: inline; }
	.sd-congtac:focus-visible ~ .sd-nut { outline: 2px solid var(--tdc-blue, #0495D8); outline-offset: 2px; }

	.tdc-sodo__chu { font-size: 12.5px; gap: 6px 16px; }
}

/* 03/10/2026 — mũi tên của ô đơn vị/ô tổ cách trục ~3px (đo phóng 4×): `.sd-len` neo theo
   mép TRONG của ô, mà ô đơn vị có viền trên 3px (ô tổ 1px) ⇒ cuống ngắn đúng bằng bề dày
   viền. Bù đúng bề dày đó để đầu mũi tên chạm trục / chạm đáy ô mẹ. */
.sd-o--dv > .sd-len { top: calc(-1 * var(--kdv) - 3px); height: var(--kdv); }
.sd-o--con > .sd-len { top: calc(-1 * var(--kdv) - 1px); height: var(--kdv); }
/* Ô tổ thứ 2 trở đi: khe giữa hai ô tổ chỉ là `gap` của .sd-con, không phải --kdv. Cuống dài
   --kdv (28px) trong khe 12px ⇒ mũi tên đâm ngược vào ô phía trên 16px. Nới khe lên 22px (đủ
   chỗ hai đầu mũi tên 7px + thân) và cuống dài đúng bằng khe. */
.tdc-sodo .sd-con { gap: 22px; }
.tdc-sodo .sd-con > li + li .sd-len { top: -23px; height: 22px; }