/* =========================================================================
   TOT — HEADER + FOOTER thuần HTML + CSS, KHÔNG JavaScript.
   File duy nhất: tothf.css (đặt cạnh tot-native-header.php / tot-native-footer.php)

   NGUYÊN TẮC
   1. Mọi selector bắt đầu bằng .tothf — trừ 2 ngoại lệ có chú thích ở mục 11
      (scroll-padding + khoá cuộn BẮT BUỘC đặt trên phần tử cuộn là <html>).
   2. Token khai theo TỪNG scope, không dùng chung selector .tothf:
        header → .tothf-header  với biến --tothf-*
        footer → .tothf-footer  với biến --tothf-f-*
      Nhờ vậy hai bộ token không bao giờ đè lên nhau, thứ tự nạp không còn
      ảnh hưởng tới tương phản.
   3. Trên .tothf chỉ để reset thật sự dùng chung.
   4. Mobile-first, ngắt tại 1024px. Không inline style, không !important.

   TƯƠNG PHẢN (WCAG AA — đã đo)
     #1f6fa8 trên #ffffff = 5.39:1   (chữ link hover / focus header)
     #ffffff trên #1f6fa8 = 5.39:1   (chữ trong nút CTA)
     #5a6072 trên #ffffff = 6.27:1   (chữ phụ header)
     #0a0d31 trên #ffffff = 18.84:1  (chữ chính header)
     #d7dbea trên #0a0d31 = 13.64:1  (chữ thân footer)
     #b9bed6 trên #0a0d31 = 10.23:1  (chữ phụ footer: mã số thuế, bản quyền)
     #59c99a trên #0a0d31 = 9.19:1   (link hover + viền focus footer)
     #59c99a KHÔNG bao giờ dùng làm chữ trên nền trắng (2.05:1) — chỉ trang trí.
   ========================================================================= */


/* -------------------------------------------------------------------------
   0. RESET DÙNG CHUNG (.tothf) — không khai token ở đây
   ---------------------------------------------------------------------- */

.tothf,
.tothf *,
.tothf *::before,
.tothf *::after {
	box-sizing: border-box;
}

.tothf ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tothf li {
	margin: 0;
	padding: 0;
}

.tothf a {
	color: inherit;
	text-decoration: none;
}

.tothf img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Chữ chỉ dành cho trình đọc màn hình (dùng chung header + footer) */
.tothf__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Vòng focus: khai một lần, mỗi scope chỉ đổi màu.
   Dùng :focus + :not(:focus-visible) để trình duyệt cũ vẫn có vòng focus. */
.tothf a:focus,
.tothf summary:focus,
.tothf label:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 6px;
}

.tothf a:focus:not(:focus-visible),
.tothf summary:focus:not(:focus-visible),
.tothf label:focus:not(:focus-visible) {
	outline: none;
}

.tothf-header a:focus,
.tothf-header summary:focus,
.tothf-header label:focus {
	outline-color: var(--tothf-blue-ink);
}

.tothf-footer a:focus {
	outline-color: var(--tothf-f-green);
	outline-offset: 3px;
}


/* =========================================================================
   HEADER
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Token + khung header
   ---------------------------------------------------------------------- */

.tothf-header {
	/* Màu brand */
	--tothf-blue: #3088c7;      /* xanh brand — mảng lớn/viền */
	--tothf-blue-ink: #1f6fa8;  /* biến thể đậm — đạt AA khi làm nền chữ trắng */
	--tothf-green: #59c99a;     /* chỉ trang trí — không dùng cho chữ */
	--tothf-navy: #0a0d31;
	--tothf-line: #e9e6ef;
	--tothf-muted: #5a6072;

	/* Nền + hình khối */
	--tothf-bg: #ffffff;
	--tothf-bg-soft: #f6f8fb;
	--tothf-h: 60px;            /* chiều cao thanh header */
	--tothf-top: 0px;           /* bù trừ admin bar WordPress */
	--tothf-shadow: 0 10px 30px rgba(10, 13, 49, .12);
	--tothf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

	position: sticky;
	top: var(--tothf-top);
	z-index: 1000;
	background: var(--tothf-bg);
	border-bottom: 1px solid var(--tothf-line);
	color: var(--tothf-navy);
	font-family: var(--tothf-font);
	font-size: 16px;
	line-height: 1.4;
}

/* Admin bar của WordPress là position:fixed từ 601px trở lên. */
@media (min-width: 601px) {
	.tothf-header--adminbar { --tothf-top: 46px; }
}

@media (min-width: 783px) {
	.tothf-header--adminbar { --tothf-top: 32px; }
}

/* -------------------------------------------------------------------------
   2. Skip link — phần tử nhận focus đầu tiên (WCAG 2.4.1)
   ---------------------------------------------------------------------- */

.tothf__skip {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1002;
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--tothf-bg);
	color: var(--tothf-navy);
	font-size: 14px;
	font-weight: 700;
	box-shadow: var(--tothf-shadow);
	transform: translateY(-200%);
	transition: transform .15s ease;
}

.tothf__skip:focus {
	transform: translateY(0);
}

/* -------------------------------------------------------------------------
   3. Thanh header
   ---------------------------------------------------------------------- */

.tothf__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--tothf-h);
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 16px;
}

.tothf__brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-right: auto;
}

/* Độ đặc hiệu (0,2,0) để thắng reset .tothf img { max-width: 100% } (0,1,1) —
   nếu không, hai mức chặn 132px/108px bên dưới sẽ là code chết. */
.tothf .tothf__logo {
	width: auto;
	max-height: 34px;
}

.tothf__brand-text {
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--tothf-navy);
}

.tothf__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin-left: auto;
}

.tothf__warn {
	margin: 0;
	padding: 6px 10px;
	border-radius: 8px;
	background: #fff4e5;
	color: #7a4b00;
	font-size: 13px;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   4. Bộ chuyển ngôn ngữ
   ---------------------------------------------------------------------- */

.tothf__lang-list {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background: var(--tothf-bg-soft);
	border: 1px solid var(--tothf-line);
	border-radius: 999px;
}

/* Vùng bấm >= 32px: WCAG 2.2 AA 2.5.8 yêu cầu tối thiểu 24x24 CSS px. */
.tothf__lang-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--tothf-muted);
}

.tothf__lang-link:hover {
	color: var(--tothf-blue-ink);
}

.tothf__lang-link--current {
	background: var(--tothf-bg);
	color: var(--tothf-navy);
	box-shadow: 0 1px 2px rgba(10, 13, 49, .12);
}

/* -------------------------------------------------------------------------
   5. Nút CTA "Liên hệ"
   ---------------------------------------------------------------------- */

.tothf__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 999px;
	background: #002157; /* slide 09/2026: #002157, chữ #FFFFFF */
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color .18s ease, transform .18s ease;
}

.tothf__cta:hover {
	background: #12386f; /* navy sáng hơn 1 bậc để thấy rõ hover, chữ vẫn trắng (tương phản ~9:1) */
	transform: translateY(-1px);
}
.tothf__cta:focus-visible {
	outline: 3px solid #00a99d;
	outline-offset: 2px;
}

.tothf__cta:active {
	transform: translateY(1px);
}

/* -------------------------------------------------------------------------
   6. Công tắc + nút hamburger (thuần CSS)

   <input> đặt SAU .tothf__bar trong DOM để thứ tự Tab khớp thứ tự nhìn thấy,
   nên các trạng thái với ngược lên thanh header dùng :has().
   Trình duyệt chưa hỗ trợ :has() (Firefox < 121) vẫn mở/đóng được menu, chỉ
   không đổi biểu tượng ba gạch thành dấu X.
   ---------------------------------------------------------------------- */

.tothf__toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;          /* KHÔNG dùng display/visibility: phải giữ khả năng nhận focus */
	pointer-events: none;
}

.tothf__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -6px;
	border-radius: 10px;
	color: var(--tothf-navy);
	cursor: pointer;
}

.tothf__burger:hover {
	background: var(--tothf-bg-soft);
}

.tothf-header:has(.tothf__toggle:focus-visible) .tothf__burger {
	outline: 2px solid var(--tothf-blue-ink);
	outline-offset: 2px;
}

.tothf__burger-ico {
	position: relative;
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.tothf__burger-ico::before,
.tothf__burger-ico::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: top .2s ease, transform .2s ease;
}

.tothf__burger-ico::before { top: -7px; }
.tothf__burger-ico::after  { top: 7px; }

.tothf-header:has(.tothf__toggle:checked) .tothf__burger-ico { background: transparent; }
.tothf-header:has(.tothf__toggle:checked) .tothf__burger-ico::before { top: 0; transform: rotate(45deg); }
.tothf-header:has(.tothf__toggle:checked) .tothf__burger-ico::after  { top: 0; transform: rotate(-45deg); }

/* Nhãn cho trình đọc màn hình đổi theo trạng thái */
.tothf__sr--close { display: none; }
.tothf-header:has(.tothf__toggle:checked) .tothf__sr--open  { display: none; }
.tothf-header:has(.tothf__toggle:checked) .tothf__sr--close { display: inline; }

/* -------------------------------------------------------------------------
   7. Menu trượt (< 1024px)
   ---------------------------------------------------------------------- */

.tothf__nav { display: none; }   /* thanh ngang chỉ bật từ 1024px */

.tothf__drawer {
	position: fixed;
	inset: calc(var(--tothf-top) + var(--tothf-h)) 0 0 0;
	z-index: 1001;
	visibility: hidden;                       /* đóng => liên kết bên trong không nhận Tab */
	transition: visibility 0s linear .24s;    /* giữ hiện cho tới khi panel trượt xong */
}

.tothf__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 13, 49, .45);
	opacity: 0;
	cursor: pointer;
	touch-action: none;                       /* vuốt trên lớp phủ không cuộn trang nền */
	transition: opacity .2s ease;
}

.tothf__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: min(88vw, 380px);
	height: 100%;
	padding: 12px 16px 40px;
	background: var(--tothf-bg);
	box-shadow: var(--tothf-shadow);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform .24s ease;
}

.tothf__toggle:checked ~ .tothf__drawer {
	visibility: visible;
	transition-delay: 0s;
}

.tothf__toggle:checked ~ .tothf__drawer .tothf__scrim { opacity: 1; }
.tothf__toggle:checked ~ .tothf__drawer .tothf__panel { transform: translateX(0); }

.tothf__mmenu > .tothf__mitem + .tothf__mitem {
	border-top: 1px solid var(--tothf-line);
}

.tothf__mlink {
	display: block;
	padding: 13px 4px;
	font-size: 16px;
	font-weight: 600;
	color: var(--tothf-navy);
}

.tothf__mlink:hover {
	color: var(--tothf-blue-ink);
}

.tothf__mmenu a[aria-current] {
	color: var(--tothf-blue-ink);
	box-shadow: inset 3px 0 0 var(--tothf-green);
}

/* Mục cha: <summary> CHỈ là nút mở/đóng, không lồng liên kết bên trong.
   Liên kết tới trang cha do walker nhân bản thành mục con đầu tiên. */
.tothf__msummary {
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	list-style: none;
}

.tothf__msummary::-webkit-details-marker { display: none; }

.tothf__msummary:focus {
	outline-offset: -2px;
	border-radius: 8px;
}

.tothf__msummary:hover .tothf__mlink--parent {
	color: var(--tothf-blue-ink);
}

.tothf__mlink--parent { flex: 1 1 auto; }

.tothf__chev {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
}

.tothf__chev::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--tothf-muted);
	border-bottom: 2px solid var(--tothf-muted);
	transform: translate(-50%, -70%) rotate(45deg);
	transition: transform .18s ease;
}

.tothf__mdetails[open] > .tothf__msummary .tothf__chev::after {
	transform: translate(-50%, -25%) rotate(-135deg);
}

.tothf__msub {
	margin: 0 0 10px 6px;
	padding: 2px 0 4px 10px;
	border-left: 2px solid var(--tothf-line);
}

.tothf__msub .tothf__mlink {
	padding: 10px 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--tothf-muted);
}

.tothf__msub .tothf__mlink:hover {
	color: var(--tothf-blue-ink);
}

.tothf__mitem--self .tothf__mlink { font-weight: 600; }

/* Máy hẹp: siết logo + CTA để thanh header không tràn ngang */
@media (max-width: 420px) {
	.tothf__inner { gap: 8px; padding: 0 12px; }
	.tothf .tothf__logo { max-height: 28px; max-width: 132px; }
	.tothf__lang-link { padding: 4px 7px; }
	.tothf__cta { padding: 0 11px; font-size: 13px; }
}

@media (max-width: 360px) {
	.tothf__inner { gap: 6px; }
	.tothf .tothf__logo { max-height: 26px; max-width: 108px; }
	.tothf__lang-list { padding: 2px; }
	.tothf__lang-link { min-width: 28px; padding: 4px 6px; font-size: 11px; }
	.tothf__cta { padding: 0 10px; font-size: 12px; }
	.tothf__burger { width: 40px; margin-right: -8px; }
}

/* -------------------------------------------------------------------------
   8. Desktop >= 1024px: thanh ngang + dropdown 1 cấp
   ---------------------------------------------------------------------- */

@media (min-width: 1024px) {

	.tothf-header { --tothf-h: 76px; }

	/* Tắt hẳn phần mobile: công tắc không còn nhận focus */
	.tothf__toggle,
	.tothf__burger,
	.tothf__drawer {
		display: none;
	}

	.tothf__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 16px;
		padding: 0 24px;
	}

	.tothf__brand { margin-right: 0; }

	.tothf .tothf__logo { max-height: 44px; } /* file logo đã trim viền trong suốt (09/2026) nên 38px = 38px nhìn thấy */

	.tothf__nav {
		display: block;
		justify-self: center;
		min-width: 0;
		overflow: visible;
	}

	.tothf__actions { gap: 12px; margin-left: 0; }

	.tothf__menu {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
	}

	.tothf__menu > li { position: relative; }

	.tothf__menu > li > .tothf__link {
		display: flex;
		align-items: center;
		gap: 6px;
		height: var(--tothf-h);
		padding: 0 12px;
		font-size: 15px;
		font-weight: 600;
		white-space: nowrap;
		color: var(--tothf-navy);
		transition: color .18s ease;
	}

	.tothf__menu > li > .tothf__link:hover { color: var(--tothf-blue-ink); }

	/* Gạch chân trang trí; trạng thái vẫn nhận biết được qua màu chữ + aria-current */
	.tothf__menu > li > .tothf__link::before {
		content: "";
		position: absolute;
		right: 12px;
		bottom: 0;
		left: 12px;
		height: 3px;
		border-radius: 3px 3px 0 0;
		background: var(--tothf-green);
		transform: scaleX(0);
		transition: transform .18s ease;
	}

	/* aria-current="page" (đúng trang) và aria-current="true" (trang con đang xem) */
	.tothf__menu > li:hover > .tothf__link::before,
	.tothf__menu > li:focus-within > .tothf__link::before,
	.tothf__menu > li > .tothf__link[aria-current]::before {
		transform: scaleX(1);
	}

	.tothf__menu > li > .tothf__link[aria-current] { color: var(--tothf-blue-ink); }

	/* Mũi tên cho mục có menu con */
	.tothf__menu > .menu-item-has-children > .tothf__link::after {
		content: "";
		width: 6px;
		height: 6px;
		margin-top: -3px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .18s ease;
	}

	.tothf__menu > .menu-item-has-children:hover > .tothf__link::after,
	.tothf__menu > .menu-item-has-children:focus-within > .tothf__link::after {
		margin-top: 3px;
		transform: rotate(-135deg);
	}

	/* Dropdown: ẩn bằng opacity (KHÔNG display/visibility) để bàn phím Tab tới
	   được — chạm focus là :focus-within bật hiện ngay.
	   Canh giữa theo mục cha + kẹp bề rộng theo viewport: KHÔNG phụ thuộc thứ tự
	   mục trong menu (biên tập viên đổi thứ tự vẫn đúng). */
	.tothf__submenu {
		position: absolute;
		top: 100%;
		left: 50%;
		width: max-content;
		min-width: 252px;
		max-width: min(340px, calc(100vw - 48px));
		max-height: min(70vh, 520px);
		padding: 8px;
		background: var(--tothf-bg);
		border: 1px solid var(--tothf-line);
		border-radius: 14px;
		box-shadow: var(--tothf-shadow);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		transform: translateX(-50%) translateY(8px);
		pointer-events: none;
		transition: opacity .16s ease, transform .16s ease;
	}

	.tothf__menu > li:hover > .tothf__submenu,
	.tothf__menu > li:focus-within > .tothf__submenu {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		pointer-events: auto;
	}

	.tothf__submenu .tothf__link {
		display: block;
		padding: 9px 12px;
		border-radius: 8px;
		font-size: 15px;
		line-height: 1.35;
		color: var(--tothf-navy);
		transition: background-color .15s ease, color .15s ease;
	}

	.tothf__submenu .tothf__link:hover {
		background: var(--tothf-bg-soft);
		color: var(--tothf-blue-ink);
	}

	.tothf__submenu .tothf__link[aria-current] {
		background: var(--tothf-bg-soft);
		color: var(--tothf-blue-ink);
		font-weight: 700;
	}

	.tothf__cta {
		min-height: 42px;
		padding: 0 20px;
		font-size: 15px;
	}
}

/* Khoảng 1024–1199px: siết padding để 6 mục cha luôn đủ chỗ */
@media (min-width: 1024px) and (max-width: 1199px) {
	.tothf__inner { gap: 10px; padding: 0 16px; }
	.tothf__menu > li > .tothf__link { padding: 0 6px; font-size: 13.5px; } /* 08/09: 9px→6px, VI đè logo -7px ở 1024 */
	.tothf__menu > li > .tothf__link::before { right: 6px; left: 6px; }
}


/* =========================================================================
   FOOTER
   ========================================================================= */

/* -------------------------------------------------------------------------
   9. Token + khung footer (--tothf-f-*, tách hẳn khỏi token header)
   ---------------------------------------------------------------------- */

.tothf-footer {
	--tothf-f-navy: var(--tnp-navy, #0a0d31);
	--tothf-f-green: var(--tnp-green, #59c99a);

	/* Chữ trên nền navy — đều đạt WCAG AA trở lên */
	--tothf-f-fg: #ffffff;       /* 18.84:1 */
	--tothf-f-fg-soft: #d7dbea;  /* 13.64:1 */
	--tothf-f-muted: #b9bed6;    /* 10.23:1 */
	--tothf-f-hairline: rgba(255, 255, 255, .14);
	--tothf-f-surface: rgba(255, 255, 255, .06);

	--tothf-f-maxw: 1200px;
	--tothf-f-pad-x: 20px;
	--tothf-f-font: "Helvetica Neue", Helvetica, Arial, sans-serif;

	background-color: var(--tothf-f-navy);
	color: var(--tothf-f-fg-soft);
	font-family: var(--tothf-f-font);
	font-size: 15px;
	line-height: 1.65;
}

.tothf-f-inner {
	max-width: var(--tothf-f-maxw);
	margin-inline: auto;
	padding: 48px var(--tothf-f-pad-x) 0;
}

/* Lưới: 1 cột (mobile-first) → 4 cột từ 1024px */
.tothf-f-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}

.tothf-f-col { min-width: 0; }

/* --- Cột 1: logo, giới thiệu, pháp nhân, mạng xã hội --- */

.tothf-f-logo { margin-bottom: 18px; }

.tothf-footer .tothf-f-logo-img {
	width: 156px;
	max-width: 100%;
}

.tothf-f-logo-fallback {
	display: block;
	color: var(--tothf-f-fg);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .01em;
}

.tothf-f-about {
	margin: 0 0 18px;
	max-width: 46ch;
	color: var(--tothf-f-fg-soft);
}

.tothf-f-legal {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.6;
}

.tothf-f-legal-name,
.tothf-f-legal-tax {
	display: block;
}

.tothf-f-legal-name {
	color: var(--tothf-f-fg);
	font-weight: 700;
	letter-spacing: .01em;
}

.tothf-f-legal-tax { color: var(--tothf-f-muted); }

.tothf-f-social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.tothf-f-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--tothf-f-hairline);
	border-radius: 50%;
	background-color: var(--tothf-f-surface);
	color: var(--tothf-f-fg);
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.tothf-f-social-link:hover,
.tothf-f-social-link:focus {
	background-color: var(--tothf-f-green);
	border-color: var(--tothf-f-green);
	color: var(--tothf-f-navy);
}

.tothf-f-ico {
	display: block;
	flex: none;
}

/* --- Cột 2–4: tiêu đề + menu WordPress ---
   Tiêu đề in bằng <p> (không phải <h2>) để footer không chèn heading lạ vào
   outline của mọi trang; aria-labelledby chỉ cần một phần tử có id.
   Giữ NGUYÊN VĂN "Dịch vụ" / "Giải pháp" / "Giới thiệu": không text-transform. */

.tothf-f-title {
	margin: 0 0 16px;
	color: var(--tothf-f-fg);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .02em;
}

.tothf-f-title::after {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin-top: 10px;
	background-color: var(--tothf-f-green);
}

.tothf-f-link {
	display: inline-block;
	padding-block: 7px;
	color: var(--tothf-f-fg-soft);
	transition: color .18s ease;
}

.tothf-f-link:hover,
.tothf-f-link:focus {
	color: var(--tothf-f-green);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tothf-f-link[aria-current] {
	color: var(--tothf-f-fg);
	font-weight: 700;
}

.tothf-f-warn {
	margin: 0;
	color: var(--tothf-f-muted);
	font-size: 13px;
}

/* --- Khối liên hệ --- */

.tothf-f-address {
	margin-top: 24px;
	font-style: normal;
	color: var(--tothf-f-fg-soft);
}

.tothf-f-addr-line {
	display: block;
	margin-bottom: 8px;
}

.tothf-f-addr-line:last-child { margin-bottom: 0; }

.tothf-f-addr-key { color: var(--tothf-f-muted); }

.tothf-f-addr-link {
	display: inline-block;
	padding-block: 4px;
	color: var(--tothf-f-fg-soft);
	transition: color .18s ease;
}

.tothf-f-addr-link:hover,
.tothf-f-addr-link:focus {
	color: var(--tothf-f-green);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Dòng bản quyền --- */

.tothf-f-bottom {
	margin-top: 40px;
	padding: 20px 0 24px;
	border-top: 1px solid var(--tothf-f-hairline);
}

.tothf-f-copy {
	margin: 0;
	color: var(--tothf-f-muted);
	font-size: 14px;
}

/* --- Desktop: 4 cột từ 1024px --- */
@media (min-width: 1024px) {
	.tothf-f-inner { padding-top: 64px; }

	.tothf-f-grid {
		grid-template-columns: 1.7fr 1fr 1fr 1.35fr;
		gap: 40px;
	}

	.tothf-f-bottom { margin-top: 52px; }
}


/* =========================================================================
   10. Tôn trọng thiết lập giảm chuyển động (một khối cho cả header + footer)
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.tothf,
	.tothf *,
	.tothf *::before,
	.tothf *::after {
		transition-duration: .01ms;
		transition-delay: 0s;
		animation-duration: .01ms;
	}
}


/* =========================================================================
   11. HAI NGOẠI LỆ DUY NHẤT RA NGOÀI .tothf — đều bắt buộc về mặt kỹ thuật
   vì scroll-padding-top và khoá cuộn chỉ có tác dụng trên phần tử cuộn (<html>).
   Cả hai đều được khoanh vùng bằng :has() nên chỉ áp dụng trên trang thực sự
   có header .tothf-header.
   ========================================================================= */

/* Bù chiều cao header dính cho mọi liên kết neo #id (mục lục bài, FAQ…). */
html:has(.tothf-header) {
	scroll-padding-top: 72px;
}

@media (min-width: 1024px) {
	html:has(.tothf-header) { scroll-padding-top: 88px; }
}

/* Khoá cuộn trang nền khi menu trượt đang mở.
   BẮT BUỘC bọc trong media query: :checked vẫn khớp khi công tắc display:none ở
   desktop, mở menu ở mobile rồi xoay ngang sẽ khoá cuộn vĩnh viễn. */
@media (max-width: 1023.98px) {
	html:has(.tothf-header .tothf__toggle:checked) {
		overflow: hidden;
	}
}
/* .tothf a{color:inherit} có độ ưu tiên (0,1,1) CAO HƠN .tothf__cta (0,1,0) nên
   nút CTA thừa hưởng màu navy của header và chìm hẳn trên nền xanh. Nâng ưu tiên. */
.tothf a.tothf__cta,
.tothf-header a.tothf__cta { color: #fff; }
.tothf a.tothf__cta:hover,
.tothf-header a.tothf__cta:hover { color: #fff; }

/* HEADER 1024-1199: logo trim to lên (161px) làm 8 mục menu tràn sang trái ở 1024px (đo 09/2026: -29px) → siết logo + đệm menu */
@media (min-width: 1024px) and (max-width: 1199px) {
	.tothf .tothf__logo { max-height: 34px; } /* slide 14: nới 30→34px, giữ menu không tràn ở 1024px */
	.tothf__mlink { padding-left: 8px; padding-right: 8px; font-size: 14px; }
	.tothf__cta { padding-left: 12px; padding-right: 12px; font-size: 14px; }
	.tothf__inner { gap: 8px; }
}

/* CTA header: nhãn ngắn dưới 480px (đo 09/2026 ở 375px: logo+lang+CTA dài+burger = 468px > 375px, burger rơi ngoài màn) */
.tothf__cta-short { display: none; }
@media (max-width: 480px) {
	.tothf__cta-long { display: none; }
	.tothf__cta-short { display: inline; }
	.tothf__inner { gap: 5px; padding: 0 10px; }
	.tothf .tothf__logo { max-height: 26px; }
	.tothf__lang-link { padding: 4px 4px; min-width: 26px; }
	.tothf__cta { padding: 0 8px; font-size: 12px; }
	.tothf__burger { width: 36px; margin-right: -6px; }
}

/* Slide 14 (feedback team): logo header to hon cho can bo cuc — desktop rong */
@media (min-width: 1200px) {
	.tothf .tothf__logo { max-height: 48px; }
}

/* EN (08/09/2026): menu dài + CTA dài làm nav tràn đè logo & nút ngôn ngữ ở mọi bề rộng desktop
   → EN dùng nhãn CTA ngắn + link menu gọn hơn. Selector desktop thật là .tothf__menu > li > .tothf__link */
@media (min-width: 1024px) {
	html[lang^="en"] .tothf__cta-long { display: none; }
	html[lang^="en"] .tothf__cta-short { display: inline; }
	html[lang^="en"] .tothf__menu > li > .tothf__link { padding: 0 6px; font-size: 15px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	html[lang^="en"] .tothf__menu > li > .tothf__link { padding: 0 4px; font-size: 13px; }
	html[lang^="en"] .tothf .tothf__logo { max-height: 30px; }
}

/* 09/09/2026 slide 6 (chốt GIỮ mục ngành): kẻ nhóm + nhãn "Theo ngành" trước mục ngành đầu tiên trong dropdown */
.tothf__submenu > li.tothf__group-start{border-top:1px solid rgba(10,13,49,.12);margin-top:.45rem;padding-top:.55rem}
.tothf__submenu > li.tothf__group-start::before{content:"Theo ngành";display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;padding:0 14px 4px}
html[lang^="en"] .tothf__submenu > li.tothf__group-start::before{content:"By industry"}

/* 09/09/2026 (user): dropdown "Dịch vụ IT" 2 cột — cột 1 dịch vụ, cột 2 "Theo ngành" (VI 7+6, EN 10+6) */
@media (min-width: 1024px) {
	.tothf__menu > li:first-child > .tothf__submenu { display: grid; grid-template-columns: max-content max-content; grid-auto-flow: column; grid-template-rows: repeat(7, auto); column-gap: 6px; width: max-content; min-width: 0; max-width: none; overflow: visible; }
	html[lang^="en"] .tothf__menu > li:first-child > .tothf__submenu { grid-template-rows: repeat(10, auto); }
	.tothf__menu > li:first-child > .tothf__submenu > li.tothf__group-start { border-top: 0; margin-top: 0; padding-top: 0; }
	.tothf__menu > li:first-child > .tothf__submenu > li:first-child::before { content: "Dịch vụ"; display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; padding: 0 14px 4px; }
	html[lang^="en"] .tothf__menu > li:first-child > .tothf__submenu > li:first-child::before { content: "Services"; }
	.tothf__menu > li:first-child > .tothf__submenu > li:nth-child(n+8) { border-left: 1px solid rgba(10,13,49,.12); }
	html[lang^="en"] .tothf__menu > li:first-child > .tothf__submenu > li:nth-child(n+8):not(:nth-child(n+11)) { border-left: 0; }
}

/* 11/09/2026 slide 26: nhãn cột "DỊCH VỤ" / "THEO NGÀNH" to và thoáng hơn (11px xám → 13px navy, gạch chân, cách mục bên dưới) */
.tothf__submenu > li.tothf__group-start::before{font-size:13px;letter-spacing:.08em;color:#002157;padding:4px 14px 9px;margin-bottom:6px;border-bottom:1px solid rgba(10,13,49,.10)}
@media (min-width: 1024px) {
	.tothf__menu > li:first-child > .tothf__submenu { column-gap: 16px; padding-top: 12px; padding-bottom: 10px; }
	.tothf__menu > li:first-child > .tothf__submenu > li:first-child::before,
	.tothf__menu > li:first-child > .tothf__submenu > li.tothf__group-start::before { font-size: 13px; letter-spacing: .08em; color: #002157; padding: 4px 14px 9px; margin-bottom: 6px; border-bottom: 1px solid rgba(10,13,49,.10); }
}

/* 11/09/2026 slide 26 (vòng kiểm 2):
   (1) EN 1024–1077px: panel 2 cột canh giữa theo mục cha tràn mép trái (-26px, mất chữ đầu "SERVICES" + link) → 1024–1199px neo mép trái mục cha.
   (2) Panel đầu overflow:visible nhưng còn max-height min(70vh,520px) → màn thấp (<~620px) hàng cuối lòi khỏi nền trắng → bỏ max-height.
   (3) Drawer mobile (ul.tothf__msub) chưa có nhãn/gạch nhóm "Theo ngành" như bản desktop. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.tothf__menu > li:first-child > .tothf__submenu { left: 0; transform: translateY(8px); }
	.tothf__menu > li:first-child:hover > .tothf__submenu,
	.tothf__menu > li:first-child:focus-within > .tothf__submenu { transform: translateY(0); }
}
@media (min-width: 1024px) {
	.tothf__menu > li:first-child > .tothf__submenu { max-height: none; }
}
.tothf__msub > li.tothf__group-start { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(10,13,49,.10); }
.tothf__msub > li.tothf__group-start::before { content: "Theo ngành"; display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #002157; padding: 4px 8px 6px; }
html[lang^="en"] .tothf__msub > li.tothf__group-start::before { content: "By industry"; }

/* 11/09/2026 header mobile tràn ngang — đo bằng rect: EN 360px burger [342→378] > 360 (cắt nửa), EN 375 +6px,
   VI 320/344 +34px, VI+EN 481–520 (nhãn CTA dài) +16…41px. html/body overflow-x:hidden nên scrollWidth <html> KHÔNG thấy lỗi.
   Nguyên nhân chính: theme all.css "ol, ul:not(.wp-block-gallery){margin:0 1.5em .5em}" cùng độ ưu tiên (0,1,1) với
   ".tothf ul{margin:0}" nhưng nạp SAU → pill VI/EN ăn thêm lề 24px mỗi bên + 8px dưới (pill lệch tâm 4px).
   Chỉ gỡ ở <1024px để header desktop giữ nguyên. Không đổi chữ CTA, không đổi chiều cao nút (CTA 38px, burger 44px). */
@media (max-width: 1023.98px) {
	.tothf .tothf__lang-list { margin: 0; }
}
/* EN ≤340px (320px vẫn thiếu ~15px vì "AI consulting" dài hơn "Tư vấn AI"): siết lề/khoảng cách + chữ CTA 11.5px
   + logo 108→104px để còn dư ~5px phòng font máy thật rộng hơn */
@media (max-width: 340px) {
	html[lang^="en"] .tothf__inner { padding: 0 8px; }
	html[lang^="en"] .tothf__actions { gap: 5px; }
	html[lang^="en"] .tothf__cta { padding: 0 7px; font-size: 11.5px; }
	html[lang^="en"] .tothf .tothf__logo { max-width: 104px; }
}

/* 11/09/2026 (tiếp) lề ẩn của theme trên các <ul> còn lại của header — cùng nguyên nhân với khối trên
   (all.css "ol, ul:not(.wp-block-gallery){margin:0 1.5em .5em}" thắng ".tothf ul{margin:0}" vì nạp sau).
   (1) Desktop: .tothf__menu ăn margin-bottom 8px → hàng grid cao 84px trong thanh 76px → logo + CTA lệch xuống 4px
       so với chữ menu và pill (đo tâm 42 vs 38). Gỡ lề menu (menu canh giữa nên vị trí ngang không đổi) + GHIM lề ngang
       pill 24px như đang hiển thị, chỉ bỏ 8px dưới → mọi phần tử cùng tâm 38px, bố cục ngang giữ nguyên.
   (2) Drawer mobile: .tothf__mmenu thụt thêm 24px mỗi bên (chữ cách mép panel 40px thay vì 16px), .tothf__msub bị đè
       mất lề thiết kế 0 0 10px 6px → trả về đúng thiết kế ban đầu.
   CHƯA đụng: .tothf__submenu (dropdown desktop — vị trí slide 26 đã căn theo lề này) và ul footer (.tothf-f-menu/.tothf-f-social). */
.tothf .tothf__menu { margin: 0; }
.tothf .tothf__mmenu { margin: 0; }
.tothf .tothf__msub { margin: 0 0 10px 6px; }
@media (min-width: 1024px) {
	.tothf .tothf__lang-list { margin: 0 24px; }
}

/* 11/09/2026 (tiếp 2) lề ẩn theme trên dropdown desktop + ul footer — cùng nguyên nhân
   (all.css "ol, ul:not(.wp-block-gallery){margin:0 1.5em .5em}" thắng ".tothf ul{margin:0}" vì nạp sau).
   (1) .tothf__submenu ăn margin-left 24px → mọi dropdown lệch phải 24px: panel đầu ở 1024–1199 cách mép trái mục cha 24px
       thay vì 0, các panel canh giữa lệch tâm 24px. Gỡ lề → đúng thiết kế. Đã đo mọi panel 1024–1440 EN+VI (mở trang thẳng ở
       từng bề rộng): đều nằm trong màn, panel đầu EN 1200 mép trái 23px.
   (2) Footer .tothf-f-menu / .tothf-f-social ăn 0 22.5px 7.5px → link thụt 22.5px so với tiêu đề cột, icon MXH thụt so với logo,
       nhãn dài xuống dòng → gỡ cho thẳng hàng (footer thấp đi: EN 1024 937→781px, VI 1280 686→568px, VI 360 1678→1656px). */
.tothf .tothf__submenu { margin: 0; }
.tothf-footer .tothf-f-menu,
.tothf-footer .tothf-f-social { margin: 0; }

/* 11/09/2026 (tiếp 3) logo footer thụt ~36.6px so với chữ: KHÔNG phải lề CSS mà do file Logo-TOT-121.png (379×324, hiển thị
   rộng 156px) có viền trong suốt — vùng có hình chỉ x 89–289, y 61–261 (đo PIL/ImageMagick trên PNG + 2 bản .webp, trùng nhau).
   Cắt ngang bằng CSS (không đổi file ảnh, không sửa footer.php): khung rộng đúng phần hình, ảnh kéo trái đúng phần viền
   → icon thẳng mép chữ bên dưới; khoảng cách dọc giữ nguyên. :has() để bản chữ thay thế (khi không có ảnh) không bị bóp. */
.tothf-footer .tothf-f-logo:has(.tothf-f-logo-img) { width: calc(156px * 201 / 379); overflow: hidden; }
.tothf-footer .tothf-f-logo .tothf-f-logo-img { width: 156px; max-width: none; margin-left: calc(-156px * 89 / 379); }

/* 28/09/2026: bộ chuyển 3 ngôn ngữ EN/VI/JA rộng thêm ~35px → ở 1024–1199px menu VI chạm logo (gap 0). Co nút ngôn ngữ lại. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.tothf .tothf__lang-list { gap: 1px; padding: 2px; }
	.tothf .tothf__lang-link { min-width: 27px; min-height: 28px; padding: 3px 5px; font-size: 12px; }
}