/**
 * HiTechCloud Layout Kit — phần BỔ SUNG cho bộ khối chung của PageKit.
 *
 * ---------------------------------------------------------------------------
 * TỆP NÀY KHÔNG PHẢI LÀ TRÌNH BÀY CHÍNH CỦA BỘ KHỐI
 * ---------------------------------------------------------------------------
 * Trình bày chính là `themes/hitechcloud-news-2026/css/hitechcloud-lir-nir.css`
 * — chính stylesheet của trang mẫu "Tài nguyên Internet". Bộ khối in ra thẳng
 * lớp `hir-*` và `includes/blocks.php` nạp tệp đó, nên các trang dùng bộ khối
 * KHÔNG "trông giống" trang mẫu mà dùng CÙNG MỘT stylesheet.
 *
 * Tệp này chỉ còn đúng ba việc:
 *
 *   1. Mang biến `--hir-*` và khổ trang sang `.hlk-page`. Hai trang dùng bộ
 *      dựng riêng (`/lien-he/`, `/doi-tac-dai-ly/`) có `<main class="ct-page
 *      hlk-page">` chứ không có `.hir-page`, mà `lir-nir.css` khai toàn bộ biến
 *      màu trên `.hir-page` — thiếu bước này hai trang đó mất sạch màu.
 *      Giá trị ánh xạ sang `--hc-*` của hệ thiết kế chứ không chép mã màu cứng.
 *
 *   2. Cho một vài lưới của trang mẫu nhận SỐ CỘT do khối khai
 *      (`--hir-cols`). Trang mẫu cố định số cột vì nó chỉ phục vụ một trang;
 *      bộ khối thì phải chạy cho mọi trang. Mọi bộ chọn ở đây đều bọc trong
 *      `.hlk-page` nên trang mẫu không hề bị đụng tới.
 *
 *   3. Style những khối KHÔNG có lớp `hir-*` tương ứng — trang mẫu không có
 *      kiểu trình bày nào cho chúng. Danh sách đầy đủ nằm trong
 *      CONTRACT-hlk.md: feature_strip, spec_tabs / pricing_tabs, timeline,
 *      quote_cards, phần bộ lọc của story_grid, richtext, ô chữ cái thay logo
 *      và biến thể dải logo chạy ngang.
 *
 * ---------------------------------------------------------------------------
 * VỀ CÁC KHAI BÁO `!important`
 * ---------------------------------------------------------------------------
 * `css/site-typography.css` nạp SAU mọi CSS của template và ép cỡ chữ, độ đậm,
 * letter-spacing của `h1–h6, p, li, dt, dd` cùng mọi class chứa
 * `eyebrow|label|title|name|tab|tag|metric|stat|value` bằng `!important`. Vì
 * `!important` thắng bất kể độ đặc hiệu, cách duy nhất để đặt được nhịp chữ
 * riêng là đối trọng bằng `!important` ở độ đặc hiệu cao hơn (`body h2` chỉ là
 * 0,0,1 — mọi bộ chọn có class ở đây đều thắng). Đây đúng là cách
 * `hitechcloud-lir-nir.css` đã làm.
 * ---------------------------------------------------------------------------
 */

/* ==========================================================================
   1. BIẾN VÀ KHỔ TRANG CHO `.hlk-page`
   Chép đúng khối khai báo của `.hir-page` trong lir-nir.css, nhưng ánh xạ màu
   sang `--hc-*` để đổi màu thương hiệu một chỗ là cả bộ đổi theo. (Bảng màu
   của trang mẫu vốn trùng khít `--hc-*`: #0969ff / #00c2ff / #071832 /
   #041020 / #22304a / #667895 / #d9e7f5 / #f5f9ff.)
   ========================================================================== */

.hlk-page {
	--hir-blue: var(--hc-blue);
	--hir-cyan: var(--hc-cyan);
	--hir-navy: var(--hc-navy);
	--hir-deep: var(--hc-deep);
	--hir-text: var(--hc-text);
	--hir-muted: var(--hc-muted);
	--hir-line: var(--hc-border);
	--hir-soft: var(--hc-bg);
	--hir-radius: 16px;

	/* Thanh tab lấy trình bày từ `product-pages-cloud26.css`, nhưng tệp đó khai
	   biến trên `.hc26-product-page` — lớp mà <main> của bộ khối không mang. Thiếu
	   biến này thì nút tab đang chọn có chữ trắng trên nền trong suốt. */
	--hc26-blue: var(--hc-blue);
	--hc26-navy: var(--hc-navy);
	--hc26-line: var(--hc-border);

	display: block;
	background: var(--hc-white);
	color: var(--hir-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	/* Chặn tràn ngang do ảnh nền hero tràn viền. `clip` chứ không `hidden`:
	   `hidden` biến <main> thành khung cuộn và giết `position:sticky` của thanh
	   tab gom section bên trong. */
	overflow-x: clip;
}

.hlk-page * {
	box-sizing: border-box;
}

.hlk-page .site-container {
	width: min(1260px, 100%);
	max-width: 1260px;
	margin-inline: auto;
	padding-inline: 24px;
}

.hlk-page a {
	text-decoration: none;
}

.hlk-page img {
	max-width: 100%;
	height: auto;
}

/* Vành focus dùng chung: không bao giờ `outline:none` trần, chỉ đổi màu vành
   cho nền tối để vẫn đủ tương phản. */
.hlk-page a:focus-visible,
.hlk-page button:focus-visible,
.hlk-page summary:focus-visible {
	outline: 3px solid var(--hir-blue);
	outline-offset: 3px;
	border-radius: 10px;
}

.hlk-page .hir-hero a:focus-visible,
.hlk-page .hir-cta a:focus-visible {
	outline-color: var(--hir-cyan);
}

/* --- Hai tông section mà trang mẫu không có -------------------------------
   Trang mẫu chỉ có `--soft`. Bộ khối cần thêm một tông tối cho khối nhấn và
   một tông thấp cho dải chèn giữa. */

.hlk-page .hir-section--dark {
	background: var(--hir-navy);
	color: color-mix(in srgb, #fff 88%, var(--hir-navy));
}

.hlk-page .hir-section--dark .hir-heading h2 {
	color: #fff !important; /* ghi đè site-typography */
}

.hlk-page .hir-section--dark .hir-heading p {
	color: color-mix(in srgb, #fff 78%, var(--hir-navy)) !important; /* ghi đè site-typography */
}

.hlk-page .hir-section--dark .hir-heading--lead {
	border-bottom-color: color-mix(in srgb, #fff 22%, transparent);
}

.hlk-page .hir-section--dark .hir-eyebrow {
	color: var(--hir-cyan);
}

.hlk-page .hir-section--tight {
	padding: 48px 0;
}

/* Cân giữa: tuỳ chọn, khai bằng `"align": "center"` trong tài liệu khối. */
.hlk-page .hir-heading.hlk-head--center {
	max-width: 880px;
	margin-inline: auto;
	text-align: center;
}

.hlk-page .hir-heading.hlk-head--center h2 {
	max-width: none;
}

.hlk-page .hir-heading.hlk-head--center p {
	margin-inline: auto;
}

/* ==========================================================================
   2. SỐ CỘT DO KHỐI KHAI (`--hir-cols`)
   Trang mẫu cố định số cột vì nó chỉ phục vụ một trang. Bộ khối phải nhận số
   cột từ dữ liệu. Mọi bộ chọn bọc trong `.hlk-page` nên trang mẫu không đổi.

   Các ngắt phải khai lại y như lir-nir.css: media query không cộng thêm độ đặc
   hiệu, nên nếu chỉ khai ở mức gốc thì bộ chọn hai lớp ở đây sẽ thắng cả quy
   tắc thu cột của trang mẫu và lưới không bao giờ xuống dòng trên mobile.
   ========================================================================== */

.hlk-page .hir-metric-grid { grid-template-columns: repeat(var(--hir-cols, 4), minmax(0, 1fr)); }
.hlk-page .hir-roadmap     { grid-template-columns: repeat(var(--hir-cols, 4), minmax(0, 1fr)); }
.hlk-page .hir-paths       { grid-template-columns: repeat(var(--hir-cols, 3), minmax(0, 1fr)); }
.hlk-page .hir-steps       { grid-template-columns: repeat(var(--hir-cols, 3), minmax(0, 1fr)); }
.hlk-page .hir-docs__grid  { grid-template-columns: repeat(var(--hir-cols, 6), minmax(0, 1fr)); }
.hlk-page .hir-chart-row   { grid-template-columns: repeat(var(--hir-cols, 2), minmax(0, 1fr)); }

@media (max-width: 1100px) {
	.hlk-page .hir-metric-grid,
	.hlk-page .hir-roadmap,
	.hlk-page .hir-steps { grid-template-columns: repeat(min(var(--hir-cols, 4), 2), minmax(0, 1fr)); }

	.hlk-page .hir-paths,
	.hlk-page .hir-chart-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	.hlk-page .hir-docs__grid { grid-template-columns: repeat(min(var(--hir-cols, 6), 3), minmax(0, 1fr)); }
}

@media (max-width: 782px) {
	.hlk-page .hir-metric-grid,
	.hlk-page .hir-roadmap,
	.hlk-page .hir-steps,
	.hlk-page .hir-docs__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Sơ đồ vòng và FAQ cũng nhận số cột từ khối, cùng cơ chế `--hir-cols`. */
.hlk-page .hir-orbits    { grid-template-columns: repeat(var(--hir-cols, 2), minmax(0, 1fr)); }
.hlk-page .hir-faq-list  { grid-template-columns: repeat(var(--hir-cols, 2), minmax(0, 1fr)); }

/* Tỉ lệ hai panel: 4/8 như trang mẫu, hoặc 6/6 khi khối khai `variant: even`. */
.hlk-page .hir-panel-split {
	grid-template-columns: minmax(0, var(--hir-split, 4fr)) minmax(0, 1fr);
}

@media (max-width: 1100px) {
	.hlk-page .hir-orbits,
	.hlk-page .hir-panel-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.hlk-page .hir-faq-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Thẻ trơn (dùng trong `panel_split`): trang mẫu in lớp này nhưng không khai. */
.hlk-page .hir-card--plain {
	padding: 0;
	border: 0;
	background: none;
}

/* ==========================================================================
   3. BẢNG XẾP CHỒNG DƯỚI 768px
   `.hir-table` của trang mẫu chỉ cho cuộn ngang. Bộ khối in sẵn `data-label`
   trên mọi ô nên dựng được chế độ xếp chồng — dễ đọc hơn hẳn trên điện thoại.
   ========================================================================== */

@media (max-width: 768px) {
	.hlk-page .hir-table-wrap {
		overflow-x: visible;
		border: 0;
		background: none;
	}

	/* Gỡ min-width, nếu không bảng đã xếp chồng vẫn đẩy trang tràn ngang. */
	.hlk-page .hir-table {
		min-width: 0;
	}

	.hlk-page .hir-table thead {
		/* Ẩn tiêu đề cột: mỗi ô đã tự mang nhãn qua data-label. Dùng clip thay
		   display:none để trình đọc màn hình vẫn còn quan hệ hàng–cột. */
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.hlk-page .hir-table tbody tr {
		display: block;
		margin-bottom: 16px;
		border: 1px solid var(--hir-line);
		border-radius: var(--hir-radius);
		background: #fff;
		overflow: hidden;
	}

	.hlk-page .hir-table tbody tr:last-child {
		margin-bottom: 0;
	}

	.hlk-page .hir-table tbody th,
	.hlk-page .hir-table tbody td {
		display: block;
		width: auto;
		padding: 12px 18px;
	}

	.hlk-page .hir-table tbody th[scope="row"] {
		background: var(--hir-soft);
	}

	.hlk-page .hir-table tbody td[data-label] {
		display: grid;
		grid-template-columns: minmax(0, 40%) minmax(0, 60%);
		gap: 12px;
	}

	.hlk-page .hir-table tbody td[data-label]::before {
		content: attr(data-label);
		color: var(--hir-muted);
		font-size: 13px;
		line-height: 1.5;
	}
}

/* Bảng văn phòng: hàng trụ sở chính có vạch màu bên trái. */
.hlk-page .hlk-table--offices tbody tr.is-hq {
	background: color-mix(in srgb, var(--hir-blue) 6%, #fff);
	box-shadow: inset 3px 0 0 var(--hir-blue);
}

.hlk-page .hlk-table--offices tbody tr.is-hq th[scope="row"] {
	color: var(--hir-blue);
}

/* ==========================================================================
   4. LỚP PHỤ TRỢ KHÔNG CÓ TRONG TRANG MẪU
   ========================================================================== */

/* --- Nút trên nền SÁNG ---------------------------------------------------
   Trang mẫu chỉ có nút trắng và nút viền trắng vì nút của nó luôn nằm trên nền
   navy (hero, panel CTA). Bộ khối còn đặt nút giữa thân trang nền trắng, ở đó
   nút trắng là vô hình — nên chỉ ngoài hero và CTA mới đổi màu.
   -------------------------------------------------------------------------- */

.hlk-page .hir-section .hir-btn--primary {
	border-color: var(--hir-blue);
	background: var(--hir-blue);
	color: #fff;
}

.hlk-page .hir-section .hir-btn--primary:hover,
.hlk-page .hir-section .hir-btn--primary:focus-visible {
	border-color: var(--hc-blue-dark);
	background: var(--hc-blue-dark);
	color: #fff;
}

.hlk-page .hir-section .hir-btn--ghost,
.hlk-page .hir-section .hir-btn--outline,
.hlk-page .hir-section .hir-btn--light {
	border-color: var(--hir-line);
	background: #fff;
	color: var(--hir-navy);
}

.hlk-page .hir-section .hir-btn--ghost:hover,
.hlk-page .hir-section .hir-btn--outline:hover,
.hlk-page .hir-section .hir-btn--light:hover,
.hlk-page .hir-section .hir-btn--ghost:focus-visible,
.hlk-page .hir-section .hir-btn--outline:focus-visible,
.hlk-page .hir-section .hir-btn--light:focus-visible {
	border-color: var(--hir-blue);
	background: #fff;
	color: var(--hir-blue);
}

/* Trong panel CTA và hero thì trả về đúng nút của trang mẫu. */
.hlk-page .hir-cta .hir-btn--light,
.hlk-page .hir-hero .hir-btn--primary,
.hlk-page .hir-hero .hir-btn--light {
	border-color: #fff;
	background: #fff;
	color: var(--hir-navy);
}

.hlk-page .hir-cta .hir-btn--ghost,
.hlk-page .hir-hero .hir-btn--ghost,
.hlk-page .hir-hero .hir-btn--outline {
	border-color: rgba(255, 255, 255, .5);
	background: transparent;
	color: #fff;
}

/* --- Nhãn nhỏ, monogram -------------------------------------------------- */

.hlk-tag,
.hlk-card__tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--hir-soft);
	color: var(--hir-blue);
	font-size: 12px !important; /* ghi đè site-typography */
	font-weight: 600 !important; /* ghi đè site-typography */
	line-height: 1.4 !important; /* ghi đè site-typography */
	white-space: nowrap;
}

.hlk-card__tag {
	align-self: flex-start;
	margin-bottom: 12px;
}

.hlk-tag--muted {
	color: var(--hir-muted);
}

.hir-section--soft .hlk-tag,
.hir-section--soft .hlk-card__tag,
.hir-section--soft .hlk-logogroup__count {
	background: #fff;
}

.hlk-logogroup__count {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--hir-soft);
	color: var(--hir-blue);
	font-size: 12px !important; /* ghi đè site-typography */
	font-weight: 600 !important; /* ghi đè site-typography */
	line-height: 1.4 !important; /* ghi đè site-typography */
	vertical-align: middle;
}

.hlk-logogroup + .hlk-logogroup {
	margin-top: 44px;
}

.hlk-mono {
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 14px;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	/* Nền pha loãng từ chính màu thương hiệu để monogram và logo thật đứng cạnh
	   nhau vẫn cùng sắc độ, không phải một ô xám lạc lõng. */
	background: color-mix(in srgb, var(--hir-blue) 10%, #fff);
	color: var(--hir-blue);
	font-size: 15px !important; /* ghi đè site-typography */
	font-weight: 600 !important; /* ghi đè site-typography */
	line-height: 1.2 !important; /* ghi đè site-typography */
}

.hir-logo-card .hlk-mono,
.hir-orbit__core .hlk-mono {
	height: 44px;
	margin-bottom: 16px;
}

/* --- Thẻ có nút ở chân --------------------------------------------------- */

.hlk-page .hir-card.hlk-card--action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hlk-card__link {
	margin-top: auto;
	padding-top: 20px;
	color: var(--hir-blue);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}

.hlk-card__link:hover {
	color: var(--hc-blue-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   5. KHỐI `svc_hero`

   Ảnh hero: trang mẫu in `<img class="hc26-hero-image">` và lấy định vị từ
   `product-pages-cloud26.css`, nhưng quy tắc ở đó bó trong `.hc26-product-page`
   — lớp mà thẻ <main> của bộ khối không mang. Khai lại đúng bộ thuộc tính ấy,
   bó trong `.hlk-page`.
   ========================================================================== */

.hlk-page .hir-hero .hc26-hero-image {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Dải thông tin nhanh nằm trong hero: tách khỏi hàng nút phía trên. */
.hlk-page .hir-hero .hir-factrail__grid {
	margin-top: 30px;
}

/* ==========================================================================
   5. KHỐI `svc_hero` — phần trang mẫu không có
   ========================================================================== */

/* Trang mẫu không có hero nền sáng; biến thể `plain` dùng cho trang không có
   ảnh hero. */
.hlk-page .hir-hero.hlk-hero--plain {
	min-height: 0;
	padding: 92px 0 84px;
	background: var(--hir-soft);
	color: var(--hir-text);
}

.hlk-page .hir-hero.hlk-hero--plain::before {
	content: none;
}

.hlk-page .hir-hero.hlk-hero--plain .hir-hero__grid {
	min-height: 0;
}

.hlk-page .hir-hero.hlk-hero--plain .hir-hero__content {
	width: min(760px, 100%);
	padding-bottom: 0;
}

.hlk-page .hir-hero.hlk-hero--plain h1 {
	color: var(--hir-navy) !important; /* ghi đè site-typography */
}

.hlk-page .hir-hero.hlk-hero--plain p {
	color: var(--hir-muted) !important; /* ghi đè site-typography */
}

.hlk-page .hir-hero.hlk-hero--plain .hir-btn--primary {
	border-color: var(--hir-blue);
	background: var(--hir-blue);
	color: #fff;
}

.hlk-page .hir-hero.hlk-hero--plain .hir-btn--outline,
.hlk-page .hir-hero.hlk-hero--plain .hir-btn--ghost {
	border-color: var(--hir-line);
	color: var(--hir-navy);
}

/* ==========================================================================
   8. KHỐI `feature_strip`
   ========================================================================== */

.hlk-strip {
	padding: 30px 26px;
	border: 1px solid var(--hir-line);
	border-radius: var(--hir-radius);
	background: #fff;
}

.hlk-strip__title {
	margin: 0 0 20px;
	color: var(--hir-navy);
	font-size: 17px !important; /* ghi đè site-typography */
	font-weight: 600 !important; /* ghi đè site-typography */
	line-height: 1.4 !important; /* ghi đè site-typography */
}

/* auto-fit thay vì số cột cố định: dải này thường có số mục lẻ (5, 7, 9) nên
   để lưới tự cân đối đẹp hơn là ép 3 hay 4 cột rồi thừa ô trống. */
.hlk-strip__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hlk-strip__grid li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
}

.hlk-strip__icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--hir-blue);
	color: #fff;
	flex: 0 0 auto;
}

.hlk-strip__icon svg {
	width: 13px;
	height: 13px;
}

.hlk-strip__text {
	min-width: 0;
	color: var(--hir-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* ==========================================================================
   9. KHỐI `spec_tabs` / `pricing_tabs`
   Trang mẫu chỉ có thanh tab gom SECTION, không có tab nội dung trong khối.
   ========================================================================== */

.hlk-tabs {
	min-width: 0;
}

.hlk-tabs__nav {
	display: flex;
	gap: 8px;
	margin-bottom: 26px;
	padding: 6px;
	border: 1px solid var(--hir-line);
	border-radius: 999px;
	background: var(--hir-soft);
	/* Cuộn ngang giữ thanh tab một hàng; JS lo việc kéo tab đang chọn vào tầm
	   nhìn nên người dùng mobile không bị mất dấu. */
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.hlk-tabs__nav::-webkit-scrollbar {
	display: none;
}

.hlk-tabs__tab {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 10px 22px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--hir-muted);
	font-size: 15px !important; /* ghi đè site-typography */
	font-weight: 500 !important; /* ghi đè site-typography */
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.hlk-tabs__tab:hover {
	color: var(--hir-navy);
}

.hlk-tabs__tab.is-active {
	background: #fff;
	color: var(--hir-blue);
}

.hlk-tabs__lead {
	margin: 0 0 20px;
	color: var(--hir-muted);
	font-size: 16px !important; /* ghi đè site-typography */
	font-weight: 400 !important; /* ghi đè site-typography */
	line-height: 1.6 !important; /* ghi đè site-typography */
}

.hlk-tabs__panels {
	min-width: 0;
}

/* Panel ẩn bằng `display:none` chứ không phải `visibility`: nội dung ẩn không
   được lọt vào thứ tự Tab của bàn phím. */
.hlk-tabs__panel {
	display: none;
}

.hlk-tabs__panel.is-active {
	display: block;
}

/* --- Thẻ gói giá --------------------------------------------------------- */

.hlk-plans {
	display: grid;
	gap: 20px;
	align-items: stretch;
}

.hlk-plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hlk-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hlk-plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hlk-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 26px 26px;
	border: 1px solid var(--hir-line);
	border-radius: var(--hir-radius);
	background: #fff;
	transition: border-color .18s ease;
}

.hlk-plan:hover {
	border-color: var(--hir-blue);
}

/* Gói nổi bật chỉ đổi viền, không phóng to bằng `scale`: các thẻ đứng cạnh
   nhau trong lưới nên phóng to sẽ chèn lên hàng bên cạnh trên tablet. */
.hlk-plan.is-featured {
	border-color: var(--hir-blue);
	box-shadow: 0 0 0 1px var(--hir-blue);
}

.hlk-plan__badge {
	position: absolute;
	top: -13px;
	left: 26px;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--hir-blue);
	color: #fff;
	font-size: 12px !important; /* ghi đè site-typography */
	font-weight: 500 !important; /* ghi đè site-typography */
	line-height: 1.5 !important; /* ghi đè site-typography */
	white-space: nowrap;
}

.hlk-plan__name {
	margin: 0 0 6px;
	color: var(--hir-navy);
	font-size: 19px !important; /* ghi đè site-typography */
	font-weight: 500 !important; /* ghi đè site-typography */
	line-height: 1.3 !important; /* ghi đè site-typography */
}

.hlk-plan__note {
	margin: 0 0 18px;
	color: var(--hir-muted);
	font-size: 15px !important; /* ghi đè site-typography */
	font-weight: 400 !important; /* ghi đè site-typography */
	line-height: 1.55 !important; /* ghi đè site-typography */
}

.hlk-plan__price {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: baseline;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--hir-line);
}

.hlk-plan__price b {
	color: var(--hir-blue);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.01em;
	/* Số tiền phải ngắt được dòng trên máy hẹp, nếu không thẻ sẽ tràn ngang. */
	overflow-wrap: anywhere;
}

.hlk-plan__price span {
	color: var(--hir-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.hlk-plan__specs {
	margin: 18px 0 24px;
	padding: 0;
	list-style: none;
}

.hlk-plan__specs li {
	display: flex;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--hir-line);
	font-size: 14.5px !important; /* ghi đè site-typography */
	font-weight: 400 !important; /* ghi đè site-typography */
	line-height: 1.5 !important; /* ghi đè site-typography */
}

.hlk-plan__specs li:last-child {
	border-bottom: 0;
}

.hlk-plan__specs span {
	min-width: 0;
	color: var(--hir-muted);
}

.hlk-plan__specs b {
	min-width: 0;
	color: var(--hir-navy);
	font-weight: 500;
	text-align: right;
}

/* CTA đẩy xuống đáy để các thẻ trong cùng hàng có nút thẳng hàng nhau bất kể
   danh sách thông số dài ngắn khác nhau. */
.hlk-page .hlk-plan__cta {
	margin-top: auto;
	width: 100%;
	min-height: 52px;
	font-size: 16px;
}

@media (max-width: 1200px) {
	.hlk-plans--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.hlk-plans--3,
	.hlk-plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.hlk-plans--2,
	.hlk-plans--3,
	.hlk-plans--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   11. KHỐI `timeline`
   (Lộ trình theo GIAI ĐOẠN dùng `.hir-roadmap` của trang mẫu.)
   ========================================================================== */

.hlk-timeline {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Đường dọc vẽ bằng pseudo-element trên từng mốc chứ không phải một đường
   chung: mốc cuối tự tắt đường nên không có đuôi thừa dưới mục cuối cùng. */
.hlk-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 24px;
	padding-bottom: 34px;
}

.hlk-timeline__item:last-child {
	padding-bottom: 0;
}

.hlk-timeline__item::before {
	content: "";
	position: absolute;
	top: 56px;
	bottom: 0;
	left: 27px;
	width: 2px;
	background: var(--hir-line);
}

.hlk-timeline__item:last-child::before {
	display: none;
}

.hlk-timeline__marker {
	display: flex;
	width: 56px;
	height: 56px;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--hir-blue);
	border-radius: 50%;
	background: #fff;
	color: var(--hir-blue);
	font-size: 17px;
	font-weight: 600;
	flex: 0 0 auto;
}

.hlk-timeline__body {
	min-width: 0;
	padding-top: 4px;
}

.hlk-timeline__when {
	display: inline-block;
	margin-bottom: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--hir-soft);
	color: var(--hir-blue);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

.hir-section--soft .hlk-timeline__when {
	background: #fff;
}

.hlk-timeline__body h3 {
	margin: 0 0 8px;
	color: var(--hir-navy);
	font-size: 19px !important; /* ghi đè site-typography */
	font-weight: 500 !important; /* ghi đè site-typography */
	line-height: 1.3 !important; /* ghi đè site-typography */
}

.hlk-timeline__body p {
	margin: 0;
	color: var(--hir-muted);
	font-size: 16px !important; /* ghi đè site-typography */
	font-weight: 400 !important; /* ghi đè site-typography */
	line-height: 1.6 !important; /* ghi đè site-typography */
}

@media (max-width: 640px) {
	.hlk-timeline__item {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 16px;
	}

	.hlk-timeline__marker {
		width: 48px;
		height: 48px;
		font-size: 15px;
	}

	.hlk-timeline__item::before {
		top: 48px;
		left: 23px;
	}
}

/* ==========================================================================
   13. KHỐI `quote_cards`
   ========================================================================== */

.hlk-quotes {
	display: grid;
	gap: 20px;
}

.hlk-quotes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hlk-quotes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hlk-quote {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 30px 26px;
	border: 1px solid var(--hir-line);
	border-radius: var(--hir-radius);
	background: #fff;
}

.hlk-quote blockquote {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	flex: 1 1 auto;
}

/* Dấu ngoặc kép dựng bằng pseudo-element để không phải chèn ký tự trang trí
   vào HTML — trình đọc màn hình bỏ qua nó. */
.hlk-quote blockquote::before {
	content: "\201C";
	display: block;
	margin-bottom: -14px;
	color: color-mix(in srgb, var(--hir-blue) 30%, #fff);
	font-size: 54px;
	line-height: 1;
}

.hlk-quote blockquote p {
	margin: 0;
	color: var(--hir-text);
	font-size: 17px !important; /* ghi đè site-typography */
	font-weight: 400 !important; /* ghi đè site-typography */
	line-height: 1.7 !important; /* ghi đè site-typography */
}

.hlk-quote__by {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 2px 14px;
	align-items: center;
	padding-top: 20px;
	border-top: 1px solid var(--hir-line);
}

.hlk-quote__logo {
	display: flex;
	width: 52px;
	height: 52px;
	align-items: center;
	justify-content: center;
	grid-row: span 2;
	flex: 0 0 auto;
}

.hlk-quote__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.hlk-quote__name {
	min-width: 0;
	color: var(--hir-navy);
	font-size: 15px !important; /* ghi đè site-typography */
	font-weight: 600 !important; /* ghi đè site-typography */
	line-height: 1.35 !important; /* ghi đè site-typography */
}

.hlk-quote__role {
	min-width: 0;
	color: var(--hir-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}

@media (max-width: 900px) {
	.hlk-quotes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.hlk-quotes--2,
	.hlk-quotes--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   14. KHỐI `story_grid` — phần bộ lọc và phần phụ của thẻ
   ========================================================================== */

.hlk-storyfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}

.hlk-storyfilter__btn {
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid var(--hir-line);
	border-radius: 999px;
	background: #fff;
	color: var(--hir-muted);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.hlk-storyfilter__btn:hover {
	border-color: var(--hir-blue);
	color: var(--hir-navy);
}

.hlk-storyfilter__btn.is-active {
	border-color: var(--hir-blue);
	background: var(--hir-blue);
	color: #fff;
}

/* Nhóm bị lọc ẩn bằng thuộc tính `hidden` do JS đặt; khai báo lại vì nhiều
   reset của theme đặt `display` cho div và vô hiệu hoá `hidden` mặc định. */
.hlk-storygroup[hidden] {
	display: none;
}

.hlk-storygroup + .hlk-storygroup {
	margin-top: 46px;
}

.hlk-page .hir-card.hlk-story {
	display: flex;
	flex-direction: column;
}

.hlk-story__top {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.hlk-story__logo {
	display: flex;
	width: 56px;
	height: 40px;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.hlk-story__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.hlk-story__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 14px;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--hir-line);
	list-style: none;
}

.hlk-story__meta li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 12px !important; /* ghi đè site-typography */
	line-height: 1.4 !important; /* ghi đè site-typography */
}

.hlk-story__meta b {
	color: var(--hir-blue);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
}

.hlk-story__meta span {
	color: var(--hir-muted);
}

/* ==========================================================================
   15. KHỐI `logo_wall` — biến thể dải chạy ngang
   Dải chạy cần danh sách được in HAI LẦN trong HTML (bản sao thứ hai đặt
   `aria-hidden="true"`) thì vòng lặp mới liền mạch, vì khung hình dịch đúng
   một nửa chiều rộng rồi quay về 0.
   ========================================================================== */

.hlk-page .hir-logo-grid.hlk-logowall--marquee {
	display: flex;
	width: max-content;
	max-width: none;
	grid-template-columns: none;
	gap: 16px;
	will-change: transform;
}

.hlk-page .hlk-logowall--marquee .hir-logo-card {
	width: 200px;
	flex: 0 0 auto;
}

/* Nhóm chứa dải chạy phải cắt phần tràn, nếu không dải rộng hơn màn hình sẽ
   đẩy cả trang cuộn ngang. */
.hlk-logogroup:has(.hlk-logowall--marquee) {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.hlk-logowall--marquee {
		animation: hlk-marquee 44s linear infinite;
	}

	/* Dừng khi rê chuột hoặc khi một logo bên trong nhận focus bàn phím, để
	   người dùng đọc kịp tên đối tác. */
	.hlk-logowall--marquee:hover,
	.hlk-logowall--marquee:focus-within {
		animation-play-state: paused;
	}
}

@keyframes hlk-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ==========================================================================
   17. KHỐI `richtext`
   ========================================================================== */

.hlk-prose {
	max-width: 900px;
	color: var(--hir-text);
}

.hlk-prose h2 {
	margin: 32px 0 12px;
	color: var(--hir-navy);
	font-size: clamp(24px, 2.2vw, 30px) !important; /* ghi đè site-typography */
	font-weight: 400 !important; /* ghi đè site-typography */
	line-height: 1.2 !important; /* ghi đè site-typography */
	letter-spacing: -.01em !important; /* ghi đè site-typography */
}

.hlk-prose h3 {
	margin: 28px 0 10px;
	color: var(--hir-navy);
	font-size: 19px !important; /* ghi đè site-typography */
	font-weight: 500 !important; /* ghi đè site-typography */
	line-height: 1.3 !important; /* ghi đè site-typography */
}

.hlk-prose h2:first-child,
.hlk-prose h3:first-child {
	margin-top: 0;
}

.hlk-prose p,
.hlk-prose li {
	color: var(--hir-muted);
	font-size: 16px !important; /* ghi đè site-typography */
	font-weight: 400 !important; /* ghi đè site-typography */
	line-height: 1.7 !important; /* ghi đè site-typography */
}

.hlk-prose p {
	margin: 0 0 18px;
}

.hlk-prose p:last-child {
	margin-bottom: 0;
}

.hlk-prose ul,
.hlk-prose ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.hlk-prose a {
	color: var(--hir-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hlk-prose blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--hir-blue);
	color: var(--hir-muted);
}

/* ==========================================================================
   18. THANH TAB GOM SECTION — phần bổ sung cho `.hc26-tabs`
   Thanh tab lấy trọn trình bày từ `product-pages-cloud26.css`, đúng như trang
   mẫu. Ở đây chỉ thêm hai điều trang mẫu tự thêm trong lir-nir.css: nút co lại
   cho vừa một hàng, và bỏ viền dưới thừa khi panel đầu có nền trắng.
   ========================================================================== */

.hlk-page .hir-tabs button {
	flex: 1 1 0;
	min-width: 0;
	padding-inline: 10px;
	font-size: 15px;
	line-height: 1.3;
}

.hlk-page .hc26-tab-panel > section {
	width: 100%;
}

@media (max-width: 1100px) {
	.hlk-page .hir-tabs button {
		flex: 0 0 auto;
		min-width: max-content;
		font-size: 14px;
	}
}

/* ==========================================================================
   19. GIẢM CHUYỂN ĐỘNG
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	/* Chốt chặn cuối: mọi chuyển tiếp trong bộ khối đều chỉ là trang trí. */
	.hlk-page *,
	.hlk-page *::before,
	.hlk-page *::after {
		animation-duration: .001ms;
		animation-iteration-count: 1;
		transition-duration: .001ms;
	}

	.hlk-tabs__nav,
	.hlk-page .hc26-tabs__inner {
		scroll-behavior: auto;
	}
}