/* Halo AI v0.3 (08/10/2026). Hướng: Minimalism / Swiss + kỹ thuật. Nền sáng, mực đen, MỘT họ màu nhấn xanh công nghệ cùng gam xanh Halo Media (hue 206): #2EB1FF sáng, #0072E5 đậm, chữ mono cho chi tiết.
   Nguồn: ui-ux-pro-max --design-system (Flat/Minimalism, Space Grotesk) + taste-skill (không gradient xanh, không card thừa).
   Hai thành phần tối duy nhất: khung console demo và khối CTA (như khối mã trong trang sáng).
   Flatsome vẫn nạp chung: mọi quy tắc gắn dưới .hai. */

:root {
	--hai-nen: #F6F8FB;
	--hai-the: #FFFFFF;
	--hai-xam: #EEF2F7;
	--hai-chu: #0B1220;
	--hai-chu-phu: #4B5568;
	--hai-chu-nhat: #667286;
	--hai-vien: #E2E7EF;
	--hai-vien-dam: #CBD3E1;
	--hai-nhan: #2EB1FF;
	--hai-nhan-dam: #0072E5;
	--hai-nhan-nhat: #E3F3FF;
	--hai-dem: #0A0F1A;
	--hai-dem-2: #111827;
	--hai-dem-chu: #E7E9EE;
	--hai-dem-phu: #9AA1AE;
	--hai-xanh: #0072E5;
	--hai-xanh-dam: #0058B8;
	--hai-ok: #15803D;
	--hai-thu: #B45309;
	--hai-cho: #52525B;
	--hai-f-tde: 'Manrope', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
	--hai-f-than: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
	--hai-f-so: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--hai-bo: 14px;
	--hai-bo-nho: 8px;
	--hai-rong: 1200px;
	--hai-de: cubic-bezier(.16, 1, .3, 1);
	--hai-nhanh: 180ms;
	--hai-vua: 320ms;
}

/* ---------- nền + chữ ---------- */
body.hai {
	margin: 0;
	background: var(--hai-nen);
	color: var(--hai-chu);
	font-family: var(--hai-f-than);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.hai main { overflow-x: clip; }
.hai *, .hai *::before, .hai *::after { box-sizing: border-box; }
.hai :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd) { margin: 0; }
.hai :where(h1, h2, h3, h4) {
	font-family: var(--hai-f-tde);
	color: var(--hai-chu);
	font-weight: 700;
	letter-spacing: -.022em;
	line-height: 1.15;
	text-transform: none;
}
.hai h1 { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.3rem); font-weight: 800; letter-spacing: -.032em; line-height: 1.08; }
.hai h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); letter-spacing: -.035em; }
.hai h3 { font-size: 1.2rem; }
.hai p { font-size: 1rem; }
.hai a { color: var(--hai-chu); text-decoration: underline; text-decoration-color: rgb(0 114 229 / .4); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--hai-nhanh); }
.hai a:hover { text-decoration-color: var(--hai-xanh); }
.hai img { max-width: 100%; height: auto; display: block; }
.hai .hai-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; stroke-width: 1.75; }
.hai .hai-so, .hai code { font-family: var(--hai-f-so); font-variant-numeric: tabular-nums; font-size: .92em; }
.hai :focus-visible { outline: 3px solid var(--hai-chu); outline-offset: 3px; border-radius: 4px; }
.hai ::selection { background: var(--hai-nhan); color: var(--hai-chu); }
.hai figure:not(:has(img)):not(.hai-cs-khung):not(.hai-ung-khung):not(.hai-sk) { display: none; }

.hai-wrap { width: 100%; max-width: var(--hai-rong); margin-inline: auto; padding-inline: 16px; }
.hai-wrap--hep { max-width: 760px; }
@media (min-width: 768px) { .hai-wrap { padding-inline: 32px; } }

.hai-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--hai-chu); color: #fff !important; padding: 10px 14px; border-radius: 8px; }
.hai-skip:focus { left: 8px; }
.hai-moc { position: absolute; top: 0; left: 0; width: 1px; height: 72px; pointer-events: none; }

/* thanh tiến độ cuộn: trình duyệt hỗ trợ thì hiện, không thì thôi */
.hai-tien { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: var(--hai-chu); transform-origin: left; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.hai-tien { animation: tien linear both; animation-timeline: scroll(root); }
	}
}
@keyframes tien { to { transform: scaleX(1); } }

/* ---------- nút + nhãn ---------- */
.hai .hai-btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	min-height: 48px; padding: 0 22px; border-radius: var(--hai-bo-nho);
	font: 600 .97rem/1 var(--hai-f-than); letter-spacing: 0; text-transform: none;
	text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent;
	transition: transform var(--hai-nhanh) var(--hai-de), background-color var(--hai-nhanh), border-color var(--hai-nhanh), color var(--hai-nhanh), box-shadow var(--hai-vua);
	margin: 0; box-shadow: none; touch-action: manipulation;
}
.hai .hai-btn:active { transform: translateY(1px) scale(.985); }
.hai .hai-btn--chinh { background: var(--hai-xanh); color: #fff; }
.hai .hai-btn--chinh:hover { color: #fff; background: var(--hai-xanh-dam); box-shadow: 0 10px 24px -8px rgb(0 114 229 / .6); transform: translateY(-1px); }
.hai .hai-btn--chinh .hai-icon { transition: transform var(--hai-vua) var(--hai-de); }
.hai .hai-btn--chinh:hover .hai-icon { transform: translateX(3px); }
.hai .hai-btn--phu { background: transparent; color: var(--hai-chu); border-color: var(--hai-vien-dam); }
.hai .hai-btn--phu:hover { border-color: var(--hai-chu); color: var(--hai-chu); background: var(--hai-the); }

.hai .hai-tt {
	display: inline-flex; align-items: center; gap: .4em; width: fit-content;
	padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hai-vien);
	background: var(--hai-the); font: 500 .78rem/1.4 var(--hai-f-so); letter-spacing: -.01em; color: var(--hai-cho);
}
.hai .hai-tt--dang-hoat-dong { color: var(--hai-ok); border-color: #BBE5C8; background: #F3FBF5; }
.hai .hai-tt--thu-nghiem { color: var(--hai-thu); border-color: #F5D9B0; background: #FFF9F0; }
.hai .hai-tt--sap-ra-mat { color: var(--hai-chu-phu); border-color: var(--hai-vien-dam); background: var(--hai-xam); }

.hai .hai-nhan-nho { display: inline-flex; align-items: center; gap: 8px; font: 500 .8rem/1.3 var(--hai-f-so); letter-spacing: .04em; text-transform: uppercase; color: var(--hai-chu-phu); }
.hai .hai-nhan-nho::before { content: "//"; color: var(--hai-xanh); font-weight: 600; letter-spacing: 0; }

/* ---------- logo ---------- */
.hai .hai-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--hai-chu); text-decoration: none; font: 700 1.2rem/1 var(--hai-f-tde); letter-spacing: -.03em; }
.hai .hai-brand:hover { color: var(--hai-chu); }
.hai .hai-brand__mark { flex: none; height: auto; transition: transform .6s var(--hai-de); }
.hai .hai-brand:hover .hai-brand__mark { transform: scale(1.08); }
.hai .hai-brand__chu { display: inline-flex; align-items: center; gap: 7px; }
.hai .hai-brand__chu b { font-weight: 700; }
.hai .hai-brand__chu i { font: 500 .68rem/1 var(--hai-f-so); font-style: normal; letter-spacing: .06em; padding: 4px 6px; border-radius: 6px; background: var(--hai-nhan); color: var(--hai-chu); }

/* ---------- header ---------- */
.hai-head { position: sticky; top: 0; z-index: 40; background: rgb(250 250 250 / .82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--hai-vua); }
.hai-head.is-cuon { border-bottom-color: var(--hai-vien); }
.hai-head__in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.hai-nav { display: none; margin-left: auto; }
.hai .hai-nav__ds { display: flex; gap: 0; list-style: none; padding: 0; margin: 0; }
.hai .hai-nav__ds a { position: relative; display: block; padding: 10px 12px; color: var(--hai-chu-phu); text-decoration: none; font-weight: 500; font-size: .95rem; transition: color var(--hai-nhanh); }
.hai .hai-nav__ds a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--hai-chu); transform: scaleX(0); transform-origin: left; transition: transform var(--hai-vua) var(--hai-de); }
.hai .hai-nav__ds a:hover, .hai .hai-nav__ds a[aria-current="page"] { color: var(--hai-chu); }
.hai .hai-nav__ds a:hover::after, .hai .hai-nav__ds a[aria-current="page"]::after { transform: scaleX(1); }
.hai-head__cta { display: none !important; }
.hai-menu { margin-left: auto; position: relative; }
.hai-menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--hai-vien-dam); background: var(--hai-the); color: var(--hai-chu); cursor: pointer; }
.hai-menu summary::-webkit-details-marker { display: none; }
.hai-menu .hai-menu__dong { display: none; }
.hai-menu[open] .hai-menu__dong { display: block; }
.hai-menu[open] .hai-menu__mo { display: none; }
.hai-menu__bang { position: absolute; right: 0; top: 54px; width: min(320px, calc(100vw - 32px)); background: var(--hai-the); border: 1px solid var(--hai-vien-dam); border-radius: var(--hai-bo); padding: 12px; display: grid; gap: 8px; box-shadow: 0 24px 48px -16px rgb(11 18 32 / .35); }
.hai .hai-menu__ds { list-style: none; padding: 0; margin: 0; display: grid; }
.hai .hai-menu__ds a { display: block; padding: 12px; border-radius: 8px; color: var(--hai-chu); text-decoration: none; font-weight: 500; }
.hai .hai-menu__ds a[aria-current="page"] { background: var(--hai-nhan); }
@media (min-width: 1100px) {
	.hai-nav { display: block; }
	.hai-head__cta { display: inline-flex !important; }
	.hai-menu { display: none; }
}

/* ---------- khung khối ---------- */
.hai-khoi { padding-block: 72px; }
.hai-khoi--sat { padding-block: 40px; }
.hai-khoi--the { background: var(--hai-the); border-block: 1px solid var(--hai-vien); }
@media (min-width: 1024px) { .hai-khoi { padding-block: 112px; } }
.hai-khoi__dau { max-width: 720px; display: grid; gap: 16px; align-content: start; margin-bottom: 48px; }
.hai-khoi__dau p { color: var(--hai-chu-phu); font-size: 1.1rem; max-width: 40em; }

/* chữ đánh dấu: vệt lime quét ra phía sau chữ, đúng từng dòng khi cụm chữ bị xuống hàng */
.hai .hai-bat { background: linear-gradient(var(--hai-nhan), var(--hai-nhan)) no-repeat 0 88% / 100% .4em; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .06em; margin-inline: -.06em; }

/* ---------- hero ---------- */
.hai-hero { position: relative; padding-block: 56px 72px; }
.hai-hero__luoi { display: grid; gap: 48px; align-items: center; }
.hai-hero__luoi > * { min-width: 0; }
.hai-hero__chu { display: grid; gap: 24px; justify-items: start; }
.hai-hero__chu > p { font-size: 1.15rem; color: var(--hai-chu-phu); max-width: 30em; }
.hai-hero__nut { display: flex; flex-wrap: wrap; gap: 12px; }
.hai .hai-tu { display: inline-block; }
@media (min-width: 1024px) { .hai-hero { padding-block: 80px 96px; } }
@media (min-width: 1180px) { .hai-hero__luoi { grid-template-columns: minmax(480px, .9fr) minmax(0, 1.1fr); gap: 48px; } }

/* ---------- console demo: người duyệt từng đề xuất ---------- */
.hai-cs { position: relative; border-radius: var(--hai-bo); background: var(--hai-dem); color: var(--hai-dem-chu); border: 1px solid #27272A; box-shadow: 0 40px 80px -36px rgb(0 114 229 / .55), 0 0 0 1px rgb(255 255 255 / .06) inset; overflow: hidden; font-family: var(--hai-f-so);  }
.hai-cs__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgb(255 255 255 / .1); font-size: .78rem; color: var(--hai-dem-phu); }
.hai-cs__bar strong { color: var(--hai-dem-chu); font-weight: 500; }
.hai-cs__bar span { padding: 2px 8px; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; }
.hai-cs__than { position: relative; display: grid; gap: 12px; padding: 20px 18px 22px; min-height: 400px; align-content: start; }
.hai .hai-cs__lenh, .hai .hai-cs__dong { font: 400 .86rem/1.6 var(--hai-f-so); color: var(--hai-dem-phu); }
.hai .hai-cs__lenh { color: var(--hai-dem-chu) !important; }
.hai .hai-cs__lenh::before { content: "$ "; color: var(--hai-nhan); }
.hai .hai-cs__dong b { font-weight: 500; color: var(--hai-dem-chu); }
.hai .hai-cs__dx { display: grid; gap: 8px; padding: 14px 14px 16px; border: 1px solid rgb(255 255 255 / .16); border-radius: 12px; background: var(--hai-dem-2); transition: border-color var(--hai-vua); }
.hai .hai-cs__nhan { font: 500 .72rem/1 var(--hai-f-so); letter-spacing: .06em; color: var(--hai-nhan); }
.hai .hai-cs__dx strong { font: 600 .98rem/1.35 var(--hai-f-tde); color: #fff; letter-spacing: -.01em; }
.hai .hai-cs__mo { font-family: var(--hai-f-than); font-size: .88rem; line-height: 1.55; color: var(--hai-dem-phu); }
.hai .hai-cs__nut { display: flex; gap: 8px; margin-top: 4px; }
.hai .hai-cs__nut span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 8px; font: 500 .82rem/1 var(--hai-f-so); border: 1px solid rgb(255 255 255 / .22); color: var(--hai-dem-chu); transition: background-color var(--hai-nhanh), color var(--hai-nhanh), transform var(--hai-nhanh), opacity var(--hai-vua); }
.hai .hai-cs__nut span.hai-cs__duyet { background: var(--hai-nhan); border-color: var(--hai-nhan); color: var(--hai-chu); font-weight: 600; }
.hai .hai-cs__dx.is-xong { border-color: var(--hai-nhan); }
.hai .hai-cs__dx.is-xong .hai-cs__nut span { opacity: .35; }
.hai .hai-cs__nut span.is-bam { transform: scale(.92); background: #fff; border-color: #fff; }
.hai .hai-cs__ok { display: flex; gap: 8px; align-items: flex-start; color: var(--hai-nhan) !important; }
.hai .hai-cs__ok .hai-icon { margin-top: 3px; }
.hai .hai-cs__dx--cho { border-style: dashed; }
.hai .hai-cs__con { position: absolute; z-index: 3; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none; opacity: 0; transition: transform .9s var(--hai-de), opacity .25s; color: #fff; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .6)); }
.hai .hai-cs-chu-thich { margin-top: 18px; font: 400 .85rem/1.5 var(--hai-f-so); color: var(--hai-chu-nhat); }
.hai .hai-cs__go::after { content: ""; display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; background: var(--hai-nhan); vertical-align: -.15em; animation: nhay 1s steps(1) infinite; }
@keyframes nhay { 50% { opacity: 0; } }

/* ---------- dải logo ---------- */
.hai .hai-logo { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 44px; align-items: center; }
.hai .hai-logo li { display: inline-flex; align-items: center; gap: 10px; color: var(--hai-chu-phu); font: 500 1rem/1 var(--hai-f-so); white-space: nowrap; }
.hai .hai-logo img { width: 24px; height: 24px; opacity: .75; filter: grayscale(1); }
.hai-ket-noi { display: grid; gap: 18px; padding-block: 28px; border-block: 1px solid var(--hai-vien); }
.hai-ket-noi > p { font-size: 1rem; color: var(--hai-chu-nhat); }
.hai .hai-chay { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hai .hai-chay .hai-logo { flex: none; flex-wrap: nowrap; min-width: 100%; justify-content: space-around; gap: 0 48px; padding-right: 48px; }
@media (prefers-reduced-motion: no-preference) {
	.hai .hai-chay .hai-logo { animation: chay 40s linear infinite; }
	.hai .hai-chay:hover .hai-logo { animation-play-state: paused; }
}
@keyframes chay { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
	.hai .hai-chay { -webkit-mask-image: none; mask-image: none; }
	.hai .hai-chay .hai-logo { flex-wrap: wrap; padding-right: 0; }
	.hai .hai-chay .hai-logo[aria-hidden] { display: none; }
}

/* ---------- số liệu: chữ to, không khung ---------- */
.hai .hai-bc { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; }
.hai .hai-bc li { display: grid; gap: 10px; align-content: start; padding: 28px 0; border-top: 1px solid var(--hai-vien); }
.hai .hai-bc li:first-child { border-top: 0; }
.hai .hai-bc__so { font: 600 clamp(2.6rem, 1.8rem + 3vw, 4.2rem)/1 var(--hai-f-tde); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--hai-chu); }
.hai .hai-bc p { color: var(--hai-chu-phu); font-size: 1rem; line-height: 1.55; max-width: 24em; }
@media (min-width: 640px) {
	.hai .hai-bc { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
	.hai .hai-bc li:nth-child(2) { border-top: 0; }
}
@media (min-width: 1100px) {
	.hai .hai-bc { grid-template-columns: repeat(4, 1fr); column-gap: 40px; }
	.hai .hai-bc li { border-top: 0; border-left: 1px solid var(--hai-vien); padding: 8px 0 8px 28px; }
	.hai .hai-bc li:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- chọn việc đang vướng: danh sách bên trái, chi tiết bên phải ---------- */
.hai-tab { display: grid; gap: 24px; }
.hai-tab__ds { display: none; }
.hai-js .hai-tab__ds { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.hai-tab__ds::-webkit-scrollbar { display: none; }
.hai .hai-tab__b {
	flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; margin: 0; border-radius: 999px;
	border: 1px solid var(--hai-vien-dam); background: var(--hai-the); color: var(--hai-chu-phu); box-shadow: none;
	font: 500 .95rem/1 var(--hai-f-than); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer;
	transition: background-color var(--hai-nhanh), color var(--hai-nhanh), border-color var(--hai-nhanh);
}
.hai .hai-tab__b:hover { border-color: var(--hai-chu); color: var(--hai-chu); }
.hai .hai-tab__b[aria-selected="true"] { background: var(--hai-chu); border-color: var(--hai-chu); color: #fff; }
.hai-js .hai-tab__bang:not(.is-on) { display: none; }
.hai-tab__bang { display: grid; gap: 28px; padding: 28px; margin-bottom: 16px; border-radius: var(--hai-bo); background: var(--hai-the); border: 1px solid var(--hai-vien); }
.hai-js .hai-tab__bang { margin-bottom: 0; }
.hai .hai-tab__van-de { display: grid; gap: 12px; align-content: start; }
.hai .hai-tab__van-de h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.03em; }
.hai .hai-tab__van-de p { color: var(--hai-chu-phu); }
.hai .hai-tab__sp { display: grid; gap: 12px; align-content: start; }
@media (min-width: 1024px) {
	.hai-js .hai-tab { grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
	.hai-js .hai-tab__ds { flex-direction: column; overflow: visible; padding: 0; gap: 4px; border-left: 1px solid var(--hai-vien); }
	.hai .hai-tab__b { border: 0; border-radius: 0 10px 10px 0; background: transparent; justify-content: flex-start; min-height: 56px; width: 100%; position: relative; margin-left: -1px; border-left: 2px solid transparent; padding-left: 20px; }
	.hai .hai-tab__b:hover { background: var(--hai-xam); border-left-color: var(--hai-vien-dam); }
	.hai .hai-tab__b[aria-selected="true"] { background: var(--hai-nhan); color: var(--hai-chu); border-left-color: var(--hai-chu); }
	.hai-tab__bang { grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px; align-items: center; margin-bottom: 0; }
}
@media (prefers-reduced-motion: no-preference) { .hai-tab__bang.is-on { animation: tab-vao var(--hai-vua) var(--hai-de); } }
@keyframes tab-vao { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hai .hai-the-sp {
	position: relative; display: grid; grid-template-columns: 40px 1fr 24px; gap: 4px 14px; align-items: center; padding: 16px 18px; border-radius: 12px;
	border: 1px solid var(--hai-vien); background: var(--hai-nen); color: var(--hai-chu); text-decoration: none;
	transition: border-color var(--hai-nhanh), transform var(--hai-vua) var(--hai-de);
}
.hai .hai-the-sp:hover { border-color: var(--hai-chu); transform: translateX(4px); color: var(--hai-chu); }
.hai .hai-chip { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--hai-nhan); color: var(--hai-chu); }
.hai .hai-chip .hai-icon { width: 20px; height: 20px; vertical-align: 0; }
.hai .hai-the-sp .hai-chip { grid-row: span 2; }
.hai .hai-the-sp__t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hai .hai-the-sp__t strong { font: 600 1.08rem/1.2 var(--hai-f-tde); }
.hai .hai-the-sp__mo { grid-column: 2; color: var(--hai-chu-phu); font-size: .93rem; line-height: 1.5; }
.hai .hai-the-sp__di { grid-column: 3; grid-row: 1 / span 2; }

/* ---------- vòng khép kín: cuộn tới đâu, vòng khép tới đó ---------- */
.hai-song__luoi { display: grid; gap: 40px; }
.hai .hai-song__ds { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: sg; border-left: 1px solid var(--hai-vien); }
.hai .hai-song__ds li { counter-increment: sg; position: relative; display: grid; gap: 8px; align-content: center; padding: 32px 0 32px 32px; transition: opacity var(--hai-vua); }
.hai .hai-song__ds li::before { content: counter(sg, decimal-leading-zero); position: absolute; left: -17px; top: 32px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hai-nen); border: 1px solid var(--hai-vien-dam); font: 500 .75rem/1 var(--hai-f-so); color: var(--hai-chu-phu); transition: background-color var(--hai-nhanh), border-color var(--hai-nhanh), color var(--hai-nhanh); }
.hai .hai-song__ten { display: flex; align-items: center; gap: 10px; font: 600 1.5rem/1.2 var(--hai-f-tde); letter-spacing: -.03em; }
.hai .hai-song__ten .hai-icon { width: 24px; height: 24px; }
.hai .hai-song p { color: var(--hai-chu-phu); max-width: 34em; }
.hai .hai-song__sp { font: 500 .8rem/1.4 var(--hai-f-so); color: var(--hai-chu-nhat); }
.hai .hai-song__sanh { display: none; }
@media (min-width: 1024px) {
	.hai-song__luoi { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
	.hai .hai-song__ds li { min-height: 52vh; }
	.hai-js .hai-song__ds li { opacity: .38; }
	.hai-js .hai-song__ds li.is-on { opacity: 1; }
	.hai-js .hai-song__ds li.is-on::before { background: var(--hai-nhan); border-color: var(--hai-chu); color: var(--hai-chu); }
	.hai .hai-song__sanh { display: block; position: sticky; top: calc(50vh - 240px); aspect-ratio: 1; width: min(100%, 480px); margin-inline: auto; container-type: inline-size; }
	.hai .hai-song__vong { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
	.hai .hai-song__vong circle { fill: none; }
	.hai .hai-song__vong .vet { stroke: var(--hai-vien); stroke-width: 2; }
	.hai .hai-song__vong .tien { stroke: var(--hai-chu); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 942.5; stroke-dashoffset: 942.5; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s var(--hai-de); }
	.hai .hai-song__nut { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(calc(var(--k) * 72deg)) translateY(-37.5cqw); }
	.hai .hai-song__nut span { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 56px; height: 56px; transform: translate(-50%, -50%) rotate(calc(var(--k) * -72deg)); border-radius: 50%; background: var(--hai-the); border: 1px solid var(--hai-vien-dam); color: var(--hai-chu-phu); transition: background-color var(--hai-vua), border-color var(--hai-vua), color var(--hai-vua), transform var(--hai-vua) var(--hai-de); }
	.hai .hai-song__nut .hai-icon { width: 22px; height: 22px; vertical-align: 0; }
	.hai .hai-song__tam { position: absolute; inset: 24%; display: grid; place-content: center; text-align: center; }
	.hai .hai-song__tam span { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity var(--hai-vua), transform var(--hai-vua) var(--hai-de); font: 600 1.35rem/1.2 var(--hai-f-tde); letter-spacing: -.03em; }
	.hai .hai-song__tam small { display: block; margin-top: 8px; font: 500 .78rem/1.4 var(--hai-f-so); color: var(--hai-chu-nhat); letter-spacing: 0; }
	.hai-song[data-b="1"] .tien { stroke-dashoffset: 895; } .hai-song[data-b="2"] .tien { stroke-dashoffset: 707; } .hai-song[data-b="3"] .tien { stroke-dashoffset: 518; } .hai-song[data-b="4"] .tien { stroke-dashoffset: 330; } .hai-song[data-b="5"] .tien { stroke-dashoffset: 0; }
	.hai-song[data-b="1"] .hai-song__nut[data-n="1"] span, .hai-song[data-b="2"] .hai-song__nut[data-n="2"] span, .hai-song[data-b="3"] .hai-song__nut[data-n="3"] span, .hai-song[data-b="4"] .hai-song__nut[data-n="4"] span, .hai-song[data-b="5"] .hai-song__nut[data-n="5"] span { background: var(--hai-nhan); border-color: var(--hai-chu); color: var(--hai-chu); transform: translate(-50%, -50%) rotate(calc(var(--k) * -72deg)) scale(1.18); }
	.hai-song[data-b="1"] .hai-song__tam span:nth-child(1), .hai-song[data-b="2"] .hai-song__tam span:nth-child(2), .hai-song[data-b="3"] .hai-song__tam span:nth-child(3), .hai-song[data-b="4"] .hai-song__tam span:nth-child(4), .hai-song[data-b="5"] .hai-song__tam span:nth-child(5) { opacity: 1; transform: none; }
}

/* ---------- lưới sản phẩm (bento): mỗi ô một chất liệu ---------- */
.hai-sp { display: grid; gap: 12px; }
.hai .hai-sp__o {
	position: relative; display: grid; gap: 14px; align-content: start; padding: 28px; isolation: isolate;
	border-radius: var(--hai-bo); background: var(--hai-the); border: 1px solid var(--hai-vien);
	color: var(--hai-chu); text-decoration: none; overflow: hidden; min-height: 240px;
	transition: border-color var(--hai-nhanh), transform var(--hai-vua) var(--hai-de);
}
.hai .hai-sp__o::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--hai-vua); background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgb(46 177 255 / .35), transparent 70%); }
.hai .hai-sp__o:hover { border-color: var(--hai-chu); color: var(--hai-chu); transform: translateY(-3px); }
.hai .hai-sp__o:hover::after { opacity: 1; }
.hai .hai-sp__o--1 { background: var(--hai-nhan); border-color: var(--hai-chu); }
.hai .hai-sp__o--1::after { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .45), transparent 70%); }
.hai .hai-sp__o--3 { background: var(--hai-dem); border-color: var(--hai-dem); color: var(--hai-dem-chu); }
.hai .hai-sp__o--3:hover { color: #fff; border-color: var(--hai-nhan); }
.hai .hai-sp__o--3 .hai-sp__mo { color: var(--hai-dem-phu); }
.hai .hai-sp__o--3 .hai-sp__xem { color: var(--hai-nhan); }
.hai .hai-sp__o--3 .hai-tt { background: transparent; border-color: rgb(255 255 255 / .22); color: var(--hai-dem-chu); }
.hai .hai-sp__o--4, .hai .hai-sp__o--6 { background: var(--hai-xam); }
.hai .hai-sp__nen { position: absolute; right: -14px; bottom: -18px; width: 130px; height: 130px; color: currentColor; opacity: .07; z-index: -1; transition: transform .6s var(--hai-de); }
.hai .hai-sp__nen .hai-icon { width: 100%; height: 100%; stroke-width: 1; vertical-align: 0; }
.hai .hai-sp__o:hover .hai-sp__nen { transform: rotate(-8deg) scale(1.08); }
.hai .hai-sp__ten { display: inline-flex; align-items: center; gap: 12px; font: 600 1.4rem/1.2 var(--hai-f-tde); letter-spacing: -.03em; }
.hai .hai-sp__o--1 .hai-chip { background: var(--hai-chu); color: var(--hai-nhan); }
.hai .hai-sp__mo { color: var(--hai-chu-phu); max-width: 34em; }
.hai .hai-sp__o--1 .hai-sp__mo { color: #0B2A44; }
.hai .hai-sp__diem { display: grid; gap: 8px; color: var(--hai-chu); font: 500 .95rem/1.5 var(--hai-f-than); }
.hai .hai-sp__diem span { display: flex; gap: 10px; align-items: flex-start; }
.hai .hai-sp__diem .hai-icon { margin-top: 3px; }
.hai .hai-sp__xem { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; margin-top: auto; }
.hai .hai-sp__xem .hai-icon { transition: transform var(--hai-vua) var(--hai-de); }
.hai .hai-sp__o:hover .hai-sp__xem .hai-icon { transform: translateX(4px); }
.hai .hai-sp__o--1 .hai-tt { background: var(--hai-chu); border-color: var(--hai-chu); color: #fff; }
.hai .hai-sp__anh { width: 100%; border-radius: 12px; border: 1px solid var(--hai-vien); margin-top: 4px; }
@media (min-width: 768px) {
	.hai-sp--bento { grid-template-columns: repeat(6, 1fr); }
	.hai-sp--bento .hai-sp__o--1 { grid-column: span 4; grid-row: span 2; padding: 36px; }
	.hai-sp--bento .hai-sp__o--1 .hai-sp__ten { font-size: 1.9rem; }
	.hai-sp--bento .hai-sp__o--1 .hai-sp__nen { width: 240px; height: 240px; opacity: .1; }
	.hai-sp--bento .hai-sp__o--2, .hai-sp--bento .hai-sp__o--3 { grid-column: span 2; }
	.hai-sp--bento .hai-sp__o--4, .hai-sp--bento .hai-sp__o--5, .hai-sp--bento .hai-sp__o--6 { grid-column: span 2; }
	.hai-sp--luoi { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) and (max-width: 1099px) {
	.hai-sp--bento .hai-sp__o--4, .hai-sp--bento .hai-sp__o--5 { grid-column: span 3; }
	.hai-sp--bento .hai-sp__o--6 { grid-column: span 6; }
}

/* ---------- máy đề xuất, người duyệt: đường ống 4 chặng ---------- */
.hai-duyet { display: grid; gap: 56px; }
.hai .hai-luong { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 12px; container-type: inline-size; }
.hai .hai-luong li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 4px 14px; align-items: center; padding: 18px; border-radius: var(--hai-bo); background: var(--hai-the); border: 1px solid var(--hai-vien); }
.hai .hai-luong__ic { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--hai-xam); color: var(--hai-chu); }
.hai .hai-luong__ic .hai-icon { width: 22px; height: 22px; vertical-align: 0; }
.hai .hai-luong strong { font: 600 1.05rem/1.3 var(--hai-f-tde); align-self: end; letter-spacing: -.02em; }
.hai .hai-luong li span:last-child { color: var(--hai-chu-phu); font-size: .95rem; line-height: 1.5; align-self: start; }
.hai .hai-luong li.hai-luong__nguoi { background: var(--hai-chu); border-color: var(--hai-chu); }
.hai .hai-luong li.hai-luong__nguoi strong { color: #fff; }
.hai .hai-luong li.hai-luong__nguoi span:last-child { color: #D4D4D8; }
.hai .hai-luong li.hai-luong__nguoi .hai-luong__ic { background: var(--hai-nhan); }
.hai .hai-luong li.hai-luong__chay { display: none; }
@media (min-width: 1024px) {
	.hai .hai-luong { grid-template-columns: repeat(4, 1fr); gap: 24px; }
	.hai .hai-luong li { grid-template-columns: 1fr; gap: 10px; padding: 24px; align-content: start; }
	.hai .hai-luong__ic { grid-row: auto; }
	.hai .hai-luong strong, .hai .hai-luong li span:last-child { align-self: auto; }
	.hai .hai-luong li:not(:last-child):not(.hai-luong__chay)::after { content: ""; position: absolute; left: 100%; top: 48px; width: 24px; height: 1px; background: var(--hai-chu); }
	.hai .hai-luong li.hai-luong__chay { display: block; position: absolute; left: 0; right: 0; top: -20px; height: 1px; padding: 0; border: 0; background: var(--hai-vien-dam); border-radius: 0; }
	.hai .hai-luong li.hai-luong__chay::after { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--hai-nhan); border: 1.5px solid var(--hai-chu); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.hai .hai-luong li.hai-luong__chay::after { animation: goi 7s var(--hai-de) infinite; }
	.hai .hai-luong li.hai-luong__nguoi { animation: nguoi 7s var(--hai-de) infinite; }
}
@keyframes goi { 0% { transform: translateX(0); } 52% { transform: translateX(62.5cqw); } 64% { transform: translateX(62.5cqw); } 100% { transform: translateX(100cqw); } }
@keyframes nguoi { 0%, 44% { box-shadow: 0 0 0 0 transparent; } 54%, 64% { box-shadow: 0 0 0 4px rgb(46 177 255 / .35); } 76%, 100% { box-shadow: 0 0 0 0 transparent; } }
.hai .hai-duyet__ds { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--hai-vien); }
.hai .hai-duyet__ds li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--hai-vien); }
.hai .hai-duyet__ds .hai-icon { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--hai-nhan); color: var(--hai-chu); }
.hai .hai-duyet__ds strong { display: block; font-family: var(--hai-f-tde); font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; letter-spacing: -.02em; }
.hai .hai-duyet__ds p { color: var(--hai-chu-phu); font-size: 1rem; }
@media (min-width: 768px) { .hai .hai-duyet__ds { grid-template-columns: repeat(2, 1fr); column-gap: 48px; } }

/* ---------- 3 lớp công nghệ ---------- */
.hai .hai-lop { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; position: relative; }
.hai .hai-lop li { display: grid; gap: 6px; padding: 22px 24px; border-radius: var(--hai-bo); border: 1px solid var(--hai-vien); background: var(--hai-the); transition: transform .7s var(--hai-de), opacity .7s var(--hai-de); }
.hai .hai-lop__ten { font: 600 1.1rem/1.3 var(--hai-f-tde); display: flex; align-items: center; gap: 12px; letter-spacing: -.02em; }
.hai .hai-lop__ten .hai-icon { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--hai-xam); }
.hai .hai-lop p { color: var(--hai-chu-phu); font-size: 1rem; }
.hai .hai-lop li:nth-child(3) { background: var(--hai-chu); border-color: var(--hai-chu); }
.hai .hai-lop li:nth-child(3) .hai-lop__ten { color: #fff; }
.hai .hai-lop li:nth-child(3) p { color: #D4D4D8; }
.hai .hai-lop li:nth-child(3) .hai-icon { background: var(--hai-nhan); color: var(--hai-chu); }
@media (min-width: 1024px) {
	.hai .hai-lop { display: flex; flex-direction: column-reverse; gap: 14px; }
	.hai .hai-lop li:nth-child(3) { margin-inline: 0 56px; }
	.hai .hai-lop li:nth-child(2) { margin-inline: 28px; }
	.hai .hai-lop li:nth-child(1) { margin-inline: 56px 0; }
	.hai-js .hai-lop:not(.is-in) li:nth-child(3) { transform: translateY(40px); opacity: 0; }
	.hai-js .hai-lop:not(.is-in) li:nth-child(2) { opacity: 0; }
	.hai-js .hai-lop:not(.is-in) li:nth-child(1) { transform: translateY(-40px); opacity: 0; }
}

/* ---------- dịch vụ: danh sách hàng ---------- */
.hai .hai-dv { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--hai-chu); }
.hai .hai-dv li { display: grid; gap: 10px; align-content: start; padding: 28px 0; border-bottom: 1px solid var(--hai-vien); transition: background-color var(--hai-nhanh), padding var(--hai-vua) var(--hai-de); }
.hai .hai-dv li:hover { background: var(--hai-nhan-nhat); padding-inline: 20px; }
.hai .hai-dv h3 { display: flex; align-items: center; gap: 14px; font-size: 1.4rem; letter-spacing: -.03em; }
.hai .hai-dv h3 .hai-icon { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--hai-nhan); color: var(--hai-chu); }
.hai .hai-dv p { color: var(--hai-chu-phu); max-width: 38em; }
@media (min-width: 900px) {
	.hai .hai-dv li { grid-template-columns: 1fr 1.2fr; gap: 12px 48px; align-items: start; }
	.hai .hai-dv li > h3 { grid-row: span 2; }
}

/* ---------- đào tạo: hai dạng khoá, thang năng lực, giáo trình ---------- */
.hai-khoa { display: grid; gap: 12px; }
.hai .hai-khoa__o { display: grid; gap: 18px; align-content: start; padding: 32px; border-radius: var(--hai-bo); border: 1px solid var(--hai-vien); background: var(--hai-the); }
.hai .hai-khoa__o--toi { background: var(--hai-dem); border-color: var(--hai-dem); color: var(--hai-dem-chu); box-shadow: 0 30px 60px -30px rgb(0 114 229 / .5); margin: 0; }
.hai .hai-khoa__o h3 { font-size: 1.6rem; letter-spacing: -.035em; }
.hai .hai-khoa__o--toi h3 { color: #fff; }
.hai .hai-khoa__the { display: flex; flex-wrap: wrap; gap: 8px; }
.hai .hai-khoa__the span { font: 500 .78rem/1 var(--hai-f-so); padding: 6px 10px; border: 1px solid var(--hai-vien-dam); border-radius: 999px; color: var(--hai-chu-phu); }
.hai .hai-khoa__o--toi .hai-khoa__the span { border-color: rgb(255 255 255 / .22); color: var(--hai-dem-phu); }
.hai .hai-khoa__o p { color: var(--hai-chu-phu); }
.hai .hai-khoa__o--toi p { color: var(--hai-dem-phu); }
.hai .hai-khoa__ds { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--hai-vien); }
.hai .hai-khoa__o--toi .hai-khoa__ds { border-top-color: rgb(255 255 255 / .16); }
.hai .hai-khoa__ds li { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hai-vien); font-size: .97rem; color: var(--hai-chu-phu); }
.hai .hai-khoa__o--toi .hai-khoa__ds li { border-bottom-color: rgb(255 255 255 / .16); color: var(--hai-dem-phu); }
.hai .hai-khoa__ds li > b { font: 500 .85rem/1.7 var(--hai-f-so); color: var(--hai-chu); }
.hai .hai-khoa__o--toi .hai-khoa__ds li > b { color: var(--hai-nhan); }
.hai .hai-khoa__ds li strong { display: block; color: var(--hai-chu); font: 600 1rem/1.4 var(--hai-f-tde); }
.hai .hai-khoa__o--toi .hai-khoa__ds li strong { color: #fff; }
@media (min-width: 900px) { .hai-khoa { grid-template-columns: 1fr 1fr; gap: 20px; } }

.hai .hai-bac { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; align-items: end; counter-reset: bac; }
.hai .hai-bac li { counter-increment: bac; display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: var(--hai-bo); border: 1px solid var(--hai-vien); background: var(--hai-the); }
.hai .hai-bac li::before { content: "M" counter(bac); font: 600 1.6rem/1 var(--hai-f-so); color: var(--hai-chu-nhat); letter-spacing: -.04em; }
.hai .hai-bac strong { font: 600 1.1rem/1.3 var(--hai-f-tde); letter-spacing: -.02em; }
.hai .hai-bac p { color: var(--hai-chu-phu); font-size: .97rem; line-height: 1.5; }
.hai .hai-bac li.hai-bac__kho { background: var(--hai-nhan); border-color: var(--hai-chu); }
.hai .hai-bac li.hai-bac__kho::before { color: var(--hai-chu); }
.hai .hai-bac li.hai-bac__kho p { color: #0B2A44; }
@media (min-width: 1024px) {
	.hai .hai-bac { grid-template-columns: repeat(5, 1fr); }
	.hai .hai-bac li:nth-child(1) { min-height: 190px; } .hai .hai-bac li:nth-child(2) { min-height: 230px; } .hai .hai-bac li:nth-child(3) { min-height: 270px; } .hai .hai-bac li:nth-child(4) { min-height: 310px; } .hai .hai-bac li:nth-child(5) { min-height: 350px; }
}

.hai .hai-chuong { display: grid; gap: 0; border-top: 1px solid var(--hai-chu); }
.hai .hai-chuong > div { display: grid; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--hai-vien); }
.hai .hai-chuong h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.hai .hai-chuong p { color: var(--hai-chu-phu); max-width: 46em; }
.hai .hai-chuong .hai-so { color: var(--hai-chu-nhat); font-size: .85rem; }
@media (min-width: 900px) { .hai .hai-chuong > div { grid-template-columns: 220px 1fr; gap: 12px 48px; } }

/* ---------- câu hỏi ---------- */
.hai-hoi { display: grid; gap: 32px; }
.hai .hai-hoi__ds { display: grid; border-top: 1px solid var(--hai-chu); }
.hai .hai-hoi__ds details { border-bottom: 1px solid var(--hai-vien); }
.hai .hai-hoi__ds summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; font: 600 1.08rem/1.4 var(--hai-f-tde); letter-spacing: -.02em; }
.hai .hai-hoi__ds summary::-webkit-details-marker { display: none; }
.hai .hai-hoi__ds summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--hai-vien-dam); border-radius: 50%; font: 400 1.2rem/1 var(--hai-f-so); transition: transform var(--hai-vua) var(--hai-de), background-color var(--hai-nhanh); }
.hai .hai-hoi__ds summary:hover::after { background: var(--hai-nhan); }
.hai .hai-hoi__ds details[open] summary::after { transform: rotate(45deg); background: var(--hai-nhan); border-color: var(--hai-chu); }
.hai .hai-hoi__ds details > div { padding: 0 0 24px; color: var(--hai-chu-phu); display: grid; gap: 10px; max-width: 46em; }
@media (min-width: 1024px) { .hai-hoi { grid-template-columns: .8fr 1.2fr; gap: 72px; } }

/* ---------- CTA cuối: khối tối, các vòng "halo" lan ra ---------- */
.hai-cta { padding-block: 40px 80px; }
.hai-cta__in {
	position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 20px; justify-items: start; padding: 44px 26px;
	border-radius: var(--hai-bo); background: var(--hai-dem); color: var(--hai-dem-chu); box-shadow: 0 40px 80px -36px rgb(0 114 229 / .55), 0 0 0 1px rgb(255 255 255 / .06) inset; border: 1px solid #27272A; margin: 0;
}
.hai-cta__in::before, .hai-cta__in::after { content: ""; position: absolute; z-index: -1; right: -120px; top: 50%; width: 360px; height: 360px; margin-top: -180px; border-radius: 50%; border: 1px solid rgb(46 177 255 / .5); }
.hai-cta__in::after { width: 560px; height: 560px; margin-top: -280px; right: -220px; border-color: rgb(255 255 255 / .12); }
@media (prefers-reduced-motion: no-preference) {
	.hai-cta__in::before { animation: halo 4.5s ease-out infinite; }
	.hai-cta__in::after { animation: halo 4.5s ease-out 1.5s infinite; }
}
@keyframes halo { 0% { transform: scale(.55); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
.hai .hai-cta__in h2 { color: #fff; max-width: 18em; }
.hai .hai-cta__in p { color: var(--hai-dem-phu); max-width: 36em; }
.hai .hai-cta__in a { color: var(--hai-dem-chu); }
.hai .hai-cta__in .hai-btn--chinh { background: var(--hai-nhan); color: var(--hai-chu); }
.hai .hai-cta__in .hai-btn--chinh:hover { background: #fff; color: var(--hai-chu); box-shadow: 0 10px 24px -8px rgb(46 177 255 / .6); }
.hai .hai-cta__in .hai-btn--phu { color: #fff; border-color: rgb(255 255 255 / .3); }
.hai .hai-cta__in .hai-btn--phu:hover { background: transparent; border-color: #fff; color: #fff; }
@media (min-width: 768px) { .hai-cta__in { padding: 60px; } }
.hai .hai-cta__chu { display: grid; gap: 18px; justify-items: start; align-content: center; }
.hai .hai-cta__buoc { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: cb; border-top: 1px solid rgb(255 255 255 / .16); }
.hai .hai-cta__buoc li { counter-increment: cb; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid rgb(255 255 255 / .16); }
.hai .hai-cta__buoc li::before { content: counter(cb, decimal-leading-zero); font: 500 .85rem/1.9 var(--hai-f-so); color: var(--hai-nhan); }
.hai .hai-cta__buoc strong { display: block; font: 600 1.05rem/1.3 var(--hai-f-tde); color: #fff; }
.hai .hai-cta__buoc span { color: var(--hai-dem-phu); font-size: .95rem; }
@media (min-width: 1024px) { .hai-cta__in--2 { grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; } }

/* ---------- trang con: đầu trang ---------- */
.hai-dau-trang { padding-block: 56px 48px; display: grid; gap: 18px; justify-items: start; border-bottom: 1px solid var(--hai-vien); position: relative; }
.hai-dau-trang > p { font-size: 1.15rem; color: var(--hai-chu-phu); max-width: 40em; }
.hai-dau-trang + section.hai-wrap { padding-top: 48px; }
.hai-dau-trang + .hai-van-ban { padding-top: 48px; }
.hai-dau-trang + section.hai-khoi { padding-top: 64px; }
@media (min-width: 1024px) { .hai-dau-trang { padding-block: 88px 64px; } }

/* ---------- trang sản phẩm ---------- */
.hai .hai-tinh-nang { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.hai .hai-tinh-nang li { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--hai-bo); background: var(--hai-the); border: 1px solid var(--hai-vien); transition: transform var(--hai-vua) var(--hai-de), border-color var(--hai-nhanh); }
.hai .hai-tinh-nang li::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--hai-vua); background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgb(46 177 255 / .3), transparent 70%); }
.hai .hai-tinh-nang li:hover { transform: translateY(-3px); border-color: var(--hai-chu); }
.hai .hai-tinh-nang li:hover::after { opacity: 1; }
.hai .hai-tinh-nang h3 { display: flex; align-items: center; gap: 12px; font-size: 1.12rem; letter-spacing: -.02em; }
.hai .hai-tinh-nang h3 .hai-icon { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--hai-nhan); color: var(--hai-chu); }
.hai .hai-tinh-nang p { color: var(--hai-chu-phu); font-size: 1rem; }
@media (min-width: 768px) { .hai .hai-tinh-nang { grid-template-columns: repeat(2, 1fr); } }
.hai .hai-buoc { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: b; border-left: 1px solid var(--hai-vien-dam); margin-left: 16px; }
.hai .hai-buoc li { counter-increment: b; position: relative; padding: 0 0 28px 36px; }
.hai .hai-buoc li::before { content: counter(b); position: absolute; left: -17px; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--hai-nhan); border: 1px solid var(--hai-chu); display: grid; place-items: center; font: 500 .85rem/1 var(--hai-f-so); color: var(--hai-chu); }
.hai .hai-buoc h3 { font-size: 1.1rem; margin-bottom: 4px; letter-spacing: -.02em; }
.hai .hai-buoc p { color: var(--hai-chu-phu); }
.hai .hai-hai-cot { display: grid; gap: 40px; }
@media (min-width: 1024px) { .hai .hai-hai-cot { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } }
.hai .hai-o-vien { padding: 28px; border-radius: var(--hai-bo); border: 1px solid var(--hai-vien); background: var(--hai-the); display: grid; gap: 12px; }
.hai .hai-o-vien ul { padding-left: 1.2em; display: grid; gap: 6px; color: var(--hai-chu-phu); }

/* ---------- văn bản dài (chính sách, bài viết) ---------- */
.hai .hai-van-ban, .hai .hai-bai__than { font-size: 1.05rem; }
.hai .hai-van-ban > * + *, .hai .hai-bai__than > * + * { margin-top: 1.1em; }
.hai .hai-van-ban h2, .hai .hai-bai__than h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); margin-top: 2em; }
.hai .hai-van-ban h3, .hai .hai-bai__than h3 { font-size: 1.2rem; margin-top: 1.6em; }
.hai .hai-van-ban ul, .hai .hai-van-ban ol, .hai .hai-bai__than ul, .hai .hai-bai__than ol { padding-left: 1.3em; display: grid; gap: .45em; }
.hai .hai-van-ban li, .hai .hai-bai__than li { color: var(--hai-chu); }
.hai .hai-bai__than table, .hai .hai-van-ban table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.hai .hai-bai__than th, .hai .hai-bai__than td, .hai .hai-van-ban th, .hai .hai-van-ban td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hai-vien); vertical-align: top; }
.hai .hai-bai__than th, .hai .hai-van-ban th { font-weight: 600; background: var(--hai-xam); }
.hai .hai-bai__than blockquote { padding: 16px 20px; border-left: 3px solid var(--hai-chu); background: var(--hai-nhan-nhat); border-radius: 0 12px 12px 0; }
.hai .hai-ghi-chu { padding: 18px 20px; border-radius: 12px; border: 1px solid var(--hai-vien-dam); background: var(--hai-nhan-nhat); display: grid; gap: 6px; }
.hai .hai-ghi-chu strong { font-family: var(--hai-f-tde); }
.hai .hai-nguon { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--hai-vien); font-size: .92rem; color: var(--hai-chu-phu); }
.hai .hai-nguon h2 { font-size: 1.1rem; margin-top: 0; }
.hai .hai-nguon ol { word-break: break-word; }

.hai-bai__dau { padding-block: 56px 40px; display: grid; gap: 16px; border-bottom: 1px solid var(--hai-vien); }
.hai .hai-bai__dau h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.8rem); }
.hai .hai-bai__mo { font-size: 1.15rem; color: var(--hai-chu-phu); }
.hai .hai-bai__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 .85rem/1.5 var(--hai-f-so); color: var(--hai-chu-nhat); }
.hai .hai-vet a { font: 500 .85rem/1 var(--hai-f-so); }
.hai-bai__than { padding-block: 48px 40px; }
.hai .hai-tac-gia { margin-top: 3em; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px; border-radius: var(--hai-bo); border: 1px solid var(--hai-vien); background: var(--hai-the); font-size: .95rem; }
.hai .hai-tac-gia > div + div { display: grid; gap: 6px; }
.hai .hai-tac-gia__chu { width: 56px; height: 56px; border-radius: 50%; background: var(--hai-chu); color: var(--hai-nhan); display: grid; place-items: center; font: 600 1.05rem/1 var(--hai-f-tde); }
.hai .hai-tac-gia__ten { font: 600 1.05rem/1.3 var(--hai-f-tde); }
.hai .hai-tac-gia p { color: var(--hai-chu-phu); }

/* ---------- danh sách bài ---------- */
.hai-bv { display: grid; gap: 12px; }
.hai .hai-bv__o { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--hai-bo); background: var(--hai-the); border: 1px solid var(--hai-vien); text-decoration: none; color: var(--hai-chu); overflow: hidden; transition: border-color var(--hai-nhanh), transform var(--hai-vua) var(--hai-de); }
.hai .hai-bv__o::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--hai-nhan); transform: scaleX(0); transform-origin: left; transition: transform var(--hai-vua) var(--hai-de); }
.hai .hai-bv__o:hover { border-color: var(--hai-chu); transform: translateY(-3px); color: var(--hai-chu); }
.hai .hai-bv__o:hover::before { transform: scaleX(1); }
.hai .hai-bv__ngay { font: 500 .8rem/1.3 var(--hai-f-so); color: var(--hai-chu-nhat); }
.hai .hai-bv__ten { font: 600 1.2rem/1.3 var(--hai-f-tde); letter-spacing: -.025em; }
.hai .hai-bv__mo { color: var(--hai-chu-phu); font-size: .95rem; }
.hai .hai-bv__xem { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; }
@media (min-width: 768px) { .hai-bv { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .hai-bv { grid-template-columns: repeat(3, 1fr); } }

/* ---------- form ---------- */
.hai-form { display: grid; gap: 20px; padding: 24px; border-radius: var(--hai-bo); background: var(--hai-the); border: 1px solid var(--hai-vien-dam); }
@media (min-width: 768px) { .hai-form { padding: 36px; } }
.hai .hai-form__hang { display: grid; gap: 20px; }
@media (min-width: 768px) { .hai .hai-form__hang { grid-template-columns: 1fr 1fr; } }
.hai .hai-truong { display: grid; gap: 8px; }
.hai .hai-truong > label, .hai .hai-truong > legend { display: block; overflow: visible; font: 600 .95rem/1.4 var(--hai-f-than); color: var(--hai-chu); margin: 0; padding: 0; text-transform: none; letter-spacing: 0; }
.hai .hai-truong .hai-bat-buoc { color: #B91C1C; }
.hai .hai-truong input[type="text"], .hai .hai-truong input[type="email"], .hai .hai-truong input[type="tel"], .hai .hai-truong input[type="url"], .hai .hai-truong textarea {
	width: 100%; min-height: 48px; height: auto; margin: 0; padding: 12px 14px; border-radius: var(--hai-bo-nho);
	border: 1px solid var(--hai-vien-dam); background: #fff; color: var(--hai-chu); box-shadow: none;
	font: 400 1rem/1.4 var(--hai-f-than); transition: border-color var(--hai-nhanh), box-shadow var(--hai-nhanh);
}
.hai .hai-truong textarea { min-height: 120px; resize: vertical; }
.hai .hai-truong input:focus, .hai .hai-truong textarea:focus { outline: none; border-color: var(--hai-chu); box-shadow: 0 0 0 3px rgb(46 177 255 / .35); }
.hai .hai-truong input::placeholder, .hai .hai-truong textarea::placeholder { color: #71717A; }
.hai .hai-truong .hai-goi-y { font-size: .85rem; color: var(--hai-chu-phu); }
.hai fieldset.hai-truong { border: 0; padding: 0; margin: 0; min-width: 0; }
.hai .hai-chon { display: grid; gap: 10px; }
@media (min-width: 768px) { .hai .hai-chon { grid-template-columns: 1fr 1fr; } }
.hai .hai-chon label, .hai .hai-dong-y label { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; min-height: 48px; border: 1px solid var(--hai-vien); border-radius: var(--hai-bo-nho); cursor: pointer; font: 500 .95rem/1.45 var(--hai-f-than); overflow: visible; margin: 0; text-transform: none; letter-spacing: 0; transition: border-color var(--hai-nhanh), background-color var(--hai-nhanh); }
.hai .hai-chon label:hover { border-color: var(--hai-chu); }
.hai .hai-chon input, .hai .hai-dong-y input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--hai-chu); }
.hai .hai-chon label:has(input:checked) { border-color: var(--hai-chu); background: var(--hai-nhan-nhat); }
.hai .hai-dong-y label { border: 0; padding: 0; font-weight: 400; color: var(--hai-chu-phu); }
.hai .hai-form__loi { padding: 14px 16px; border-radius: var(--hai-bo-nho); background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; font-size: .95rem; }
.hai .hai-form__gui { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hai .hai-form__gui .hai-btn { min-width: 200px; }
.hai .hai-form__gui .hai-btn[disabled] { opacity: .55; cursor: progress; }
.hai .hai-mat-ong { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.hai .hai-ai-note { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--hai-chu-phu); }
.hai .hai-ai-note .hai-icon { margin-top: 2px; }

/* ---------- footer ---------- */
.hai-foot { background: var(--hai-the); border-top: 1px solid var(--hai-vien); padding-block: 64px 32px; font-size: .95rem; }
.hai-foot__luoi { display: grid; gap: 32px; }
.hai .hai-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.hai .hai-foot a { color: var(--hai-chu-phu); text-decoration: none; }
.hai .hai-foot a:hover { color: var(--hai-chu); text-decoration: underline; text-decoration-color: var(--hai-nhan-dam); }
.hai .hai-foot .hai-brand { color: var(--hai-chu); }
.hai .hai-foot__tde { font: 500 .8rem/1.3 var(--hai-f-so); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; color: var(--hai-chu-nhat); }
.hai .hai-foot__thuong-hieu { display: grid; gap: 14px; max-width: 24em; color: var(--hai-chu-phu); }
.hai .hai-foot__phap-ly { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--hai-vien); font-style: normal; color: var(--hai-chu-phu); line-height: 1.75; }
.hai .hai-foot__phap-ly strong { color: var(--hai-chu); }
.hai .hai-foot__cuoi { margin-top: 16px; font-size: .85rem; color: var(--hai-chu-nhat); }
@media (min-width: 768px) { .hai-foot__luoi { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* ---------- chuyển động: hiện khi cuộn, so le 45ms/ô ---------- */
@media (prefers-reduced-motion: no-preference) {
	.hai-js .hai-hien { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--hai-de) calc(var(--i, 0) * 45ms), transform .5s var(--hai-de) calc(var(--i, 0) * 45ms); }
	.hai-js .hai-hien.is-in { opacity: 1; transform: none; }
	.hai .hai-sp__o.hai-hien.is-in { transition: border-color var(--hai-nhanh), transform var(--hai-vua) var(--hai-de); }
	/* hero: từng từ hiện lên, vệt lime quét sau cụm chữ nhấn */
	.hai-js .hai-tu { opacity: 0; transform: translateY(.5em); animation: tu-vao .6s var(--hai-de) forwards; animation-delay: calc(.08s * var(--t, 0) + .1s); }
	.hai-js .hai-bat { background-size: 0% .4em; animation: quet .8s var(--hai-de) .9s forwards; }
	.hai-js .hai-hero__chu > :not(h1) { opacity: 0; animation: tu-vao .6s var(--hai-de) .8s forwards; }
	.hai-js .hai-hero__nut { animation-delay: .9s; }
	.hai-js .hai-cs-khung { opacity: 0; animation: tu-vao .8s var(--hai-de) .5s forwards; }
}
@keyframes tu-vao { to { opacity: 1; transform: none; } }
@keyframes quet { to { background-size: 100% .4em; } }
@media (prefers-reduced-motion: reduce) {
	.hai *, .hai *::before, .hai *::after { transition: none !important; animation: none !important; }
}
.hai-khoi__dau[data-sat] { margin-bottom: 0; }
.hai .hai-anh--rong { width: 100%; border-radius: var(--hai-bo); border: 1px solid var(--hai-vien); }
.hai .hai-tinh-nang .hai-tt { margin-top: 4px; }

/* console demo: các mục ẩn trước khi phát (chỉ khi JS chạy và không giảm chuyển động) */
.hai .hai-cs [data-an] { transition: opacity var(--hai-vua), border-color var(--hai-vua); }
.hai .hai-cs [data-an].is-chua { opacity: 0; visibility: hidden; }

/* ---------- chuyển ngôn ngữ (GTranslate): viên chữ mono, bỏ cờ vì cờ là quốc gia chứ không phải ngôn ngữ ---------- */
.hai-ngon-ngu { margin-left: auto; }
.hai-head__in { gap: 12px; }
.hai-menu { margin-left: 0; }
.hai .hai-ngon-ngu .gtranslate_wrapper { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--hai-vien-dam); border-radius: 999px; background: var(--hai-the); }
.hai .hai-ngon-ngu a.glink { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font: 500 .8rem/1 var(--hai-f-so); letter-spacing: .04em; color: var(--hai-chu-phu); text-decoration: none; transition: background-color var(--hai-nhanh), color var(--hai-nhanh); }
.hai .hai-ngon-ngu a.glink img { display: none; }
.hai .hai-ngon-ngu a.glink:hover { color: var(--hai-chu); background: var(--hai-xam); }
.hai .hai-ngon-ngu a.glink.gt-current-lang { background: var(--hai-nhan); color: var(--hai-chu); }
body.hai { top: 0 !important; }
.hai .goog-te-banner-frame, .hai iframe.skiptranslate { display: none !important; }
@media (min-width: 1100px) { .hai-head__in { gap: 20px; } .hai-ngon-ngu { margin-left: 0; } }

/* dòng EEAT: ai soạn, khi nào cập nhật */
.hai .hai-cap-nhat { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 .97rem/1.5 var(--hai-f-so); color: var(--hai-chu-nhat); margin-top: 4px; }
.hai .hai-cap-nhat a { color: var(--hai-chu-phu); }

/* ======================================================================
   Giao diện app mô phỏng bằng HTML (Tình chỉ đạo 08/10/2026): các sản phẩm chưa có ảnh chụp.
   Luôn gắn nhãn "minh hoạ giao diện dự kiến, dữ liệu mẫu". Chữ nhỏ như app thật nên dùng div/span, không dùng p/li.
   ====================================================================== */
.hai-ung-khung { display: block; }
.hai .hai-ung-chu-thich { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hai-ung, .hai-iph { --u-vien: #E8EAEE; --u-nen: #F7F8FA; --u-mut: #6B7280; --u-xanh: #0072E5; --u-xanh-nhat: #E3F3FF;
	position: relative; border: 1px solid var(--hai-vien-dam); border-radius: var(--hai-bo); background: #fff; box-shadow: 0 30px 60px -30px rgb(0 114 229 / .5); overflow: hidden;
	font: 400 13px/1.45 var(--hai-f-than); color: var(--hai-chu); text-align: left; margin: 0; }
.hai-ung *, .hai-iph * { box-sizing: border-box; }
.hai-ung .hai-icon, .hai-iph .hai-icon { width: 16px; height: 16px; vertical-align: -3px; stroke-width: 1.8; }
.u-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--u-vien); background: #FAFAFA; flex-wrap: wrap; }
.u-top .hai-brand__mark { width: 20px; height: 20px; }
.u-tit { font: 600 13px/1 var(--hai-f-tde); letter-spacing: -.01em; }
.u-sel { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid #D8DBE0; border-radius: 7px; background: #fff; color: #374151; font-size: 12px; }
.u-du { margin-left: auto; font: 500 11px/1 var(--hai-f-so); color: var(--u-mut); }
.u-body { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.u-side { display: grid; gap: 4px; justify-items: center; align-content: start; padding: 10px 0; border-right: 1px solid var(--u-vien); background: #FAFAFA; }
.u-side > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #8A8F98; }
.u-side > span.on { background: var(--u-xanh-nhat); color: var(--u-xanh); }
.u-main { display: grid; gap: 12px; padding: 14px; min-width: 0; align-content: start; }
.u-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 14px/1.2 var(--hai-f-tde); letter-spacing: -.01em; }
.u-h small { font: 500 11px/1 var(--hai-f-so); color: var(--u-mut); }
.u-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.u-kpi { display: grid; gap: 4px; padding: 9px 11px; border: 1px solid var(--u-vien); border-radius: 10px; background: #fff; }
.u-kpi small { font-size: 11px; color: var(--u-mut); }
.u-kpi b { font: 600 17px/1.1 var(--hai-f-so); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.u-kpi em { font: 500 11px/1 var(--hai-f-so); font-style: normal; color: var(--hai-ok); }
.u-kpi em.bad { color: #B42318; }
.u-card { display: grid; gap: 7px; padding: 11px 12px; border: 1px solid var(--u-vien); border-radius: 10px; background: #fff; }
.u-card--nen { background: var(--u-nen); }
.u-card strong { font: 600 13px/1.35 var(--hai-f-tde); letter-spacing: -.01em; }
.u-card .m { color: var(--u-mut); font-size: 12px; }
.u-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; min-width: 0; }
.u-row > span { min-width: 0; }
.u-cot2 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.u-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.u-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 7px; border: 1px solid #D8DBE0; background: #fff; color: var(--hai-chu); font: 600 12px/1 var(--hai-f-than); }
.u-btn--p { background: var(--u-xanh); border-color: var(--u-xanh); color: #fff; }
.u-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font: 500 11px/1 var(--hai-f-so); white-space: nowrap; background: #F1F2F4; color: #4B5563; }
.u-tag--ok { background: #E8F7EE; color: #15803D; } .u-tag--warn { background: #FFF4E0; color: #B45309; } .u-tag--bad { background: #FDECEA; color: #B42318; } .u-tag--info { background: var(--u-xanh-nhat); color: var(--u-xanh); }
.u-tag .hai-icon { width: 12px; height: 12px; vertical-align: -2px; }
.u-ds { display: grid; gap: 0; }
.u-ds > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--u-vien); font-size: 12.5px; }
.u-ds > div:first-child { border-top: 0; }
.u-ds .m { color: var(--u-mut); font-size: 11.5px; }
.u-ds b { font-weight: 600; }
.u-mono { font: 500 11.5px/1.3 var(--hai-f-so); font-variant-numeric: tabular-nums; }
.u-bars { display: flex; align-items: flex-end; gap: 5px; height: 58px; padding-top: 4px; }
.u-bars i { flex: 1; min-width: 0; background: var(--hai-nhan); border-radius: 3px 3px 0 0; transform-origin: bottom; }
.u-bars i.hi { background: var(--u-xanh); }
.u-zalo { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px 12px 12px 3px; background: #E3F3FF; border: 1px solid #C9E4FA; font-size: 12px; line-height: 1.5; }
.u-zalo b { font-weight: 600; }
.hai-ung.is-in .u-bars i, .hai-hien.is-in .u-bars i { animation: u-lon .8s var(--hai-de) both; animation-delay: calc(var(--n, 0) * 55ms); }
@keyframes u-lon { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.u-nhay { animation: u-nhay 2s ease-in-out infinite; }
@keyframes u-nhay { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .u-nhay { animation: none; } }

/* điện thoại: Zalo Mini App */
.u-phone { width: 232px; margin-inline: auto; border: 6px solid #111; border-radius: 30px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px #3F3F46; }
.u-phone__tren { display: flex; justify-content: space-between; padding: 7px 14px 4px; font: 500 10px/1 var(--hai-f-so); color: #374151; background: #fff; }
.u-phone__dau { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--u-vien); font: 600 13px/1 var(--hai-f-tde); }
.u-phone__than { display: grid; gap: 8px; padding: 10px; background: var(--u-nen); min-height: 330px; align-content: start; }

/* cột thời gian dựng video (Halo Studio) */
.u-khung { display: flex; align-items: end; gap: 10px; justify-content: center; padding: 12px; background: #0F1114; border-radius: 10px; }
.u-khung > div { display: grid; place-items: center; text-align: center; color: #fff; font: 600 11px/1.25 var(--hai-f-tde); border-radius: 6px; background: linear-gradient(160deg, #1F2937, #0B2A44); border: 1px solid #2B3340; padding: 6px; }
.u-khung .d { width: 56px; aspect-ratio: 9/16; } .u-khung .v { width: 84px; aspect-ratio: 1; } .u-khung .n { width: 128px; aspect-ratio: 16/9; }
.u-khung small { display: block; margin-top: 4px; font: 500 9px/1 var(--hai-f-so); color: #9CA3AF; }
.u-tl { display: grid; gap: 5px; position: relative; padding: 8px; border: 1px solid var(--u-vien); border-radius: 10px; background: #fff; overflow: hidden; }
.u-tl > div { display: flex; gap: 3px; height: 20px; align-items: stretch; }
.u-tl i { border-radius: 4px; font: 500 9.5px/20px var(--hai-f-so); font-style: normal; padding: 0 6px; overflow: hidden; white-space: nowrap; color: #fff; background: var(--u-xanh); }
.u-tl i.a { background: #7C8AA0; } .u-tl i.b { background: #0072E5; } .u-tl i.c { background: #0B2A44; }
.u-tl .go { position: absolute; top: 0; bottom: 0; left: 18%; width: 2px; background: #EF4444; }
@media (prefers-reduced-motion: no-preference) { .u-tl .go { animation: u-go 7s linear infinite; } }
@keyframes u-go { from { left: 4%; } to { left: 94%; } }

/* vòng điểm (Halo Comply) */
.u-vong { position: relative; width: 84px; height: 84px; flex: none; }
.u-vong svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.u-vong circle { fill: none; stroke-width: 9; }
.u-vong .v { stroke: #E8EAEE; } .u-vong .t { stroke: var(--u-xanh); stroke-linecap: round; stroke-dasharray: 251; stroke-dashoffset: 54; }
.hai-hien.is-in .u-vong .t { animation: u-ve 1.2s var(--hai-de) both; }
@keyframes u-ve { from { stroke-dashoffset: 251; } }
.u-vong b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 18px/1 var(--hai-f-so); letter-spacing: -.04em; }

/* bậc năng lực (Halo Academy) */
.u-bac { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; }
.u-bac > div { display: grid; gap: 3px; align-content: end; padding: 8px; border-radius: 8px; background: #F1F2F4; color: #6B7280; font-size: 11px; }
.u-bac > div b { font: 600 13px/1 var(--hai-f-so); color: inherit; }
.u-bac > div.xong { background: var(--u-xanh-nhat); color: var(--u-xanh); }
.u-bac > div.nay { background: var(--u-xanh); color: #fff; }
.u-bac > div:nth-child(1) { min-height: 48px; } .u-bac > div:nth-child(2) { min-height: 64px; } .u-bac > div:nth-child(3) { min-height: 80px; } .u-bac > div:nth-child(4) { min-height: 96px; } .u-bac > div:nth-child(5) { min-height: 112px; }
.u-tien { height: 6px; border-radius: 99px; background: #E8EAEE; overflow: hidden; }
.u-tien i { display: block; height: 100%; background: var(--u-xanh); border-radius: 99px; transform-origin: left; }
.hai-hien.is-in .u-tien i { animation: u-dai 1s var(--hai-de) both; }
@keyframes u-dai { from { transform: scaleX(0); } }

/* ô sắp xếp các mô phỏng trên trang chủ */
.hai-trungbay { display: grid; gap: 28px; }
@media (min-width: 1024px) {
	.hai-trungbay { grid-template-columns: repeat(12, 1fr); gap: 36px 28px; align-items: start; }
	.hai-trungbay > :nth-child(1) { grid-column: 1 / span 7; }
	.hai-trungbay > :nth-child(2) { grid-column: 8 / span 5; align-self: center; }
	.hai-trungbay > :nth-child(3) { grid-column: 1 / span 5; align-self: center; }
	.hai-trungbay > :nth-child(4) { grid-column: 6 / span 7; }
}
@media (max-width: 760px) {
	.u-body { grid-template-columns: minmax(0, 1fr); }
	.u-side { display: none; }
	.u-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.u-cot2 { grid-template-columns: minmax(0, 1fr); }
	.u-bac { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
	.u-bac > div { padding: 6px 4px; font-size: 10px; word-break: break-word; }
}


/* ---------- nền chấm kỹ thuật ở hero (rất nhạt, tan dần xuống dưới) ---------- */
.hai-hero::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background-image: radial-gradient(rgb(9 9 11 / .16) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); pointer-events: none; }
.hai-hero { isolation: isolate; }

/* ---------- con trỏ kỹ thuật: tâm ngắm + vòng bám theo, to ra khi rê lên thứ bấm được ---------- */
@media (hover: hover) and (pointer: fine) {
	.hai, .hai a, .hai summary, .hai label, .hai [role="tab"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='square'%3E%3Cpath d='M16 3v8M16 21v8M3 16h8M21 16h8' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M16 3v8M16 21v8M3 16h8M21 16h8' stroke='%2309090B' stroke-width='1.6'/%3E%3C/g%3E%3Crect x='13.5' y='13.5' width='5' height='5' transform='rotate(45 16 16)' fill='%232EB1FF' stroke='%2309090B' stroke-width='1.2'/%3E%3C/svg%3E") 16 16, crosshair; }
	.hai a, .hai button, .hai summary, .hai label, .hai [role="tab"], .hai .hai-btn { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='square'%3E%3Cpath d='M5 11V5h6M21 5h6v6M27 21v6h-6M11 27H5v-6' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M5 11V5h6M21 5h6v6M27 21v6h-6M11 27H5v-6' stroke='%2309090B' stroke-width='1.8'/%3E%3C/g%3E%3Crect x='13' y='13' width='6' height='6' transform='rotate(45 16 16)' fill='%232EB1FF' stroke='%2309090B' stroke-width='1.2'/%3E%3C/svg%3E") 16 16, pointer; }
	.hai input[type="text"], .hai input[type="email"], .hai input[type="tel"], .hai input[type="url"], .hai textarea { cursor: text; }
	.hai-con-tro { position: fixed; left: 0; top: 0; z-index: 90; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid #fff; border-radius: 50%; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: opacity .2s, width .25s var(--hai-de), height .25s var(--hai-de), margin .25s var(--hai-de), background-color .2s; will-change: transform; }
	.hai-con-tro.is-hien { opacity: .9; }
	.hai-con-tro.is-tren { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgb(255 255 255 / .22); }
	.hai-con-tro.is-bam { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .hai-con-tro { display: none; } }
.hai .hai-ung-roi { display: grid; place-items: center; padding: 8px 0; }
.hai-trungbay .u-phone { margin-inline: auto; }

.u-pile { display: grid; gap: 10px; align-content: start; min-width: 0; }

/* ======================================================================
   Khung thiết bị đúng tỷ lệ, vẽ bằng CSS (không dùng logo hay chữ của hãng).
   - Laptop 14 inch đời mới: màn hình 3024x1964, viền mỏng, tai thỏ ~12,6% bề ngang, đế có rãnh nâng tay.
   - Điện thoại flagship: 9:19.5, viền titan mỏng, Dynamic Island, nút Action, âm lượng, nguồn, Camera Control.
   ====================================================================== */
.hai-mac { container-type: inline-size; position: relative; width: 100%; margin-inline: auto; }
.hai-mac__lid { position: relative; padding: 1.15cqw; border-radius: 3cqw 3cqw .7cqw .7cqw; background: #08090C; box-shadow: 0 0 0 .22cqw #AEB3BE, 0 0 0 .32cqw #7E838F, 0 5cqw 7cqw -4cqw rgb(11 18 32 / .55); }
.hai-mac__man { position: relative; aspect-ratio: 1040 / 676; border-radius: 1.1cqw; overflow: hidden; background: radial-gradient(70% 90% at 80% 10%, #3AA7FF 0%, transparent 60%), radial-gradient(60% 80% at 10% 100%, #0B2A6B 0%, transparent 70%), linear-gradient(135deg, #123C94, #1B67D6 55%, #4FB6FF); }
.hai-mac__cam { position: absolute; z-index: 5; top: 1.15cqw; left: 50%; transform: translateX(-50%); width: 12.6cqw; height: 3.1cqw; border-radius: 0 0 1.6cqw 1.6cqw; background: #08090C; }
.hai-mac__cam::after { content: ""; position: absolute; top: 1cqw; right: 2.6cqw; width: .9cqw; height: .9cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3B4A66, #10141C 70%); }
.hai-mac__man::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .09), rgb(255 255 255 / 0) 30%); }
.hai-mac__trong { position: absolute; left: 0; top: 0; width: 1040px; height: 676px; display: flex; flex-direction: column; transform-origin: 0 0; transform: scale(var(--s, .6)); }
.hai-mac__menu { display: flex; align-items: center; gap: 18px; flex: none; height: 24px; padding: 0 16px; background: rgb(8 14 30 / .28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font: 500 12.5px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--hai-f-than), sans-serif; color: #fff; white-space: nowrap; }
.hai-mac__menu b { font-weight: 700; } .hai-mac__menu .r { margin-left: auto; font-size: 12px; opacity: .95; }
.hai-mac__stage { flex: 1; min-height: 0; display: grid; padding: 16px 28px 6px; }
.hai-mac__stage .hai-ung { height: 100%; overflow: hidden; border: 0; border-radius: 12px; margin: 0; box-shadow: 0 40px 70px -24px rgb(0 0 0 / .6), 0 0 0 1px rgb(0 0 0 / .28); background: #fff; }
.hai-mac__dock { flex: none; display: flex; justify-content: center; padding: 4px 0 10px; }
.hai-mac__dock > div { display: flex; gap: 10px; padding: 7px 10px; border-radius: 20px; background: rgb(255 255 255 / .26); border: 1px solid rgb(255 255 255 / .34); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hai-mac__dock i { width: 42px; height: 42px; border-radius: 11px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25), 0 2px 4px rgb(0 0 0 / .25); }
.hai-mac__dock i:nth-child(1) { background: linear-gradient(160deg, #6FC3FF, #1E6FE0); } .hai-mac__dock i:nth-child(2) { background: linear-gradient(160deg, #F3F4F6, #BFC5CF); } .hai-mac__dock i:nth-child(3) { background: linear-gradient(160deg, #7CE08F, #1F9F4B); } .hai-mac__dock i:nth-child(4) { background: linear-gradient(160deg, #FFB86B, #F0731C); } .hai-mac__dock i:nth-child(5) { background: linear-gradient(160deg, #0B1220, #3B4560); } .hai-mac__dock i:nth-child(6) { background: linear-gradient(160deg, #C7A6FF, #6A3FD6); } .hai-mac__dock i:nth-child(7) { background: linear-gradient(160deg, #FF9AA9, #E2385A); }
.hai-mac__day { position: relative; height: 2cqw; margin: 0 -1.2cqw; border-radius: 0 0 2.4cqw 2.4cqw / 0 0 1.5cqw 1.5cqw; background: linear-gradient(180deg, #E6E8ED, #AAB0BC); box-shadow: inset 0 1px 0 #F7F8FA, 0 4cqw 4cqw -2.4cqw rgb(11 18 32 / .55); }
.hai-mac__day::before { content: ""; position: absolute; left: 50%; top: 0; width: 15cqw; height: .7cqw; transform: translateX(-50%); border-radius: 0 0 1cqw 1cqw; background: linear-gradient(180deg, #8F95A2, #B6BBC6); }
/* nút đóng, thu, phóng của cửa sổ app */
.hai-mac__stage .u-top::before, .hai-mac__stage .g-top::before, .hai-mac__stage .m-top::before { content: ""; flex: none; width: 52px; height: 12px; background: radial-gradient(circle at 6px 6px, #FF5F57 5.5px, transparent 6px), radial-gradient(circle at 26px 6px, #FEBC2E 5.5px, transparent 6px), radial-gradient(circle at 46px 6px, #28C840 5.5px, transparent 6px); }
@media (max-width: 760px) { .hai-mac__lid { padding: 1.3cqw; } }

.hai-iph { --u-vien: #E8EAEE; --u-nen: #F2F4F8; --u-xanh: #0068FF; --u-xanh-nhat: #E5F0FF; position: relative; width: 300px; aspect-ratio: 9 / 19.5; padding: 4px; border-radius: 56px; background: linear-gradient(145deg, #CBCED5, #8E929D 16%, #E6E8EC 38%, #878B96 60%, #D6D9DF 82%, #A5A9B3); box-shadow: 0 0 0 1px #6A6E79, 0 44px 64px -32px rgb(11 18 32 / .6); font: 400 13px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", var(--hai-f-than), sans-serif; color: #0B1220; text-align: left; margin-inline: auto; }
.hai-iph__bt { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #7B7F8A, #B7BBC5); }
.hai-iph__bt--a { left: -2.5px; top: 13%; height: 22px; } .hai-iph__bt--v1 { left: -2.5px; top: 20%; height: 42px; } .hai-iph__bt--v2 { left: -2.5px; top: 29%; height: 42px; } .hai-iph__bt--p { right: -2.5px; top: 25%; height: 68px; } .hai-iph__bt--c { right: -2px; top: 60%; height: 34px; width: 2.5px; }
.hai-iph__man { position: relative; height: 100%; padding: 5px; border-radius: 52px; background: #040508; }
.hai-iph__ecr { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 47px; background: #F2F4F8; overflow: hidden; }
.hai-iph__dao { position: absolute; z-index: 9; top: 10px; left: 50%; transform: translateX(-50%); width: 88px; height: 26px; border-radius: 16px; background: #000; }
.hai-iph__tt { position: relative; z-index: 8; display: flex; align-items: center; justify-content: space-between; flex: none; height: 48px; padding: 6px 26px 0 30px; font: 600 14px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; letter-spacing: -.01em; background: #fff; color: #0B1220; }
.hai-iph__tt--toi { background: transparent; color: #fff; position: absolute; top: 0; left: 0; right: 0; }
.hai-iph__tt .p { display: inline-flex; align-items: center; gap: 5px; }
.hai-iph__tt .sg { display: inline-flex; align-items: flex-end; gap: 1.6px; height: 11px; } .hai-iph__tt .sg i { width: 3px; border-radius: 1px; background: currentColor; } .hai-iph__tt .sg i:nth-child(1) { height: 4px; } .hai-iph__tt .sg i:nth-child(2) { height: 6.5px; } .hai-iph__tt .sg i:nth-child(3) { height: 9px; } .hai-iph__tt .sg i:nth-child(4) { height: 11px; }
.hai-iph__tt .wf { width: 16px; height: 12px; }
.hai-iph__tt .pin { position: relative; width: 24px; height: 11.5px; border: 1.2px solid currentColor; border-radius: 3.6px; opacity: .95; }
.hai-iph__tt .pin::before { content: ""; position: absolute; inset: 1.3px; right: 3.5px; border-radius: 1.8px; background: currentColor; }
.hai-iph__tt .pin::after { content: ""; position: absolute; right: -3.2px; top: 3px; width: 1.6px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; opacity: .6; }
.hai-iph__hi { position: absolute; z-index: 9; bottom: 8px; left: 50%; transform: translateX(-50%); width: 112px; height: 4.5px; border-radius: 3px; background: #0B1220; }
.hai-iph__hi--sang { background: #fff; }
.hai-iph__ecr--toi { background: #000; }
/* thông báo đẩy */
.hai-iph__tb { position: absolute; z-index: 10; top: 44px; left: 10px; right: 10px; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 22px; background: rgb(250 251 253 / .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 30px -10px rgb(11 18 32 / .5), 0 0 0 1px rgb(11 18 32 / .06); font-size: 11.5px; line-height: 1.35; color: #374151; transform: translateY(-150%); opacity: 0; transition: transform .6s var(--hai-de), opacity .3s; }
.hai-iph__tb b { color: #0B1220; font-weight: 700; }
.hai-iph__tb-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--hai-xanh); color: #fff; }
.hai-iph__tb-gio { display: none; }
.hai-iph__tb.is-hien { transform: none; opacity: 1; }
/* nội dung Zalo Mini App */
.mn-bar { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 4px 14px 10px; background: #fff; }
.mn-bar b { font: 700 17px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; letter-spacing: -.02em; }
.mn-cap { display: inline-flex; align-items: center; gap: 0; height: 28px; border: 1px solid #D5DAE3; border-radius: 99px; background: #fff; }
.mn-cap span { display: grid; place-items: center; width: 34px; height: 100%; color: #0B1220; } .mn-cap span + span { border-left: 1px solid #D5DAE3; } .mn-cap .hai-icon { width: 14px; height: 14px; }
.mn-than { flex: 1; display: grid; gap: 12px; align-content: start; padding: 4px 14px 0; overflow: hidden; background: #F2F4F8; }
.mn-chao { display: flex; align-items: center; gap: 10px; padding-top: 8px; } .mn-chao .av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #0068FF, #4FA3FF); color: #fff; font: 700 15px/1 sans-serif; }
.mn-chao b { display: block; font: 700 15px/1.2 sans-serif; } .mn-chao small { color: #6B7689; font-size: 11.5px; }
.mn-tom { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, #0068FF, #2E8BFF); color: #fff; }
.mn-tom small { font-size: 11.5px; opacity: .85; } .mn-tom b { font: 800 22px/1.15 sans-serif; letter-spacing: -.02em; }
.mn-tom .bar { height: 6px; border-radius: 99px; background: rgb(255 255 255 / .28); overflow: hidden; } .mn-tom .bar i { display: block; width: 96%; height: 100%; background: #fff; border-radius: 99px; }
.mn-nhom { display: grid; border-radius: 16px; background: #fff; overflow: hidden; }
.mn-hang { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border-top: 1px solid #EEF0F4; } .mn-hang:first-child { border-top: 0; }
.mn-hang .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; } .mn-hang .ic .hai-icon { width: 19px; height: 19px; }
.mn-hang b { display: block; font: 600 13.5px/1.25 sans-serif; } .mn-hang small { color: #6B7689; font-size: 11.5px; }
.mn-the { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; }
.mn-the .tr { display: flex; justify-content: space-between; align-items: center; } .mn-the b { font: 700 13.5px/1.2 sans-serif; }
.mn-buoc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; font-size: 10.5px; color: #8A93A3; text-align: center; }
.mn-buoc i { display: block; height: 4px; border-radius: 99px; background: #E3E7EE; margin-bottom: 4px; } .mn-buoc .on i { background: #0068FF; } .mn-buoc .on { color: #0B1220; font-weight: 600; }
.mn-nut { display: grid; place-items: center; height: 42px; border-radius: 13px; background: #0068FF; color: #fff; font: 700 14px/1 sans-serif; }
.mn-tab { display: grid; grid-template-columns: repeat(4, 1fr); flex: none; padding: 8px 6px 24px; background: rgb(255 255 255 / .96); border-top: 1px solid #E3E7EE; }
.mn-tab > span { display: grid; justify-items: center; gap: 3px; font: 500 10px/1.2 sans-serif; color: #8A93A3; } .mn-tab > span.on { color: #0068FF; font-weight: 700; } .mn-tab .hai-icon { width: 22px; height: 22px; }
.hai-ung-roi { display: grid; place-items: center; padding: 8px 0; }
.hai-trungbay .u-phone { margin-inline: auto; }

.u-pile { display: grid; gap: 10px; align-content: start; min-width: 0; }



/* ---------- cảnh sản phẩm ở hero: laptop + điện thoại, nghiêng 3D, nổi nhẹ ---------- */
.hai-sk { position: relative; display: block; margin: 0; perspective: 1600px; }
.hai-sk__nen { position: relative; transform-style: preserve-3d; transition: transform .5s var(--hai-de); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); padding-bottom: 8%; }
.hai-sk__may { position: relative; width: 94%; }
.hai-sk__dt { position: absolute; z-index: 3; right: -2%; bottom: 0; width: 34%; min-width: 150px; max-width: 232px; transform: translateZ(70px); }
@media (prefers-reduced-motion: no-preference) {
	.hai-sk__dt { animation: noi 7s ease-in-out infinite; }
	.hai-sk__may { animation: noi 9s ease-in-out -3s infinite; }
}
@keyframes noi { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.hai-con-ao { position: absolute; z-index: 6; left: 0; top: 0; opacity: 0; pointer-events: none; transition: transform 1s var(--hai-de), opacity .3s; filter: drop-shadow(0 3px 6px rgb(0 0 0 / .35)); }
.u-dx1 { transition: border-color .4s, background-color .4s; }
.u-dx1.is-xong { border-color: #15803D; background: #F4FBF7; }
.u-dx1.is-xong .u-nut1 { opacity: .35; }
.u-nut1 .is-bam { transform: scale(.92); background: #004E9E; }
.u-nk-moi { display: none !important; }
.u-nk-moi.is-hien { display: flex !important; animation: tu-vao .5s var(--hai-de) both; background: var(--u-xanh-nhat); margin: 0 -8px; padding: 9px 8px !important; border-radius: 6px; }
.hai-iph__tb { position: absolute; z-index: 6; top: 46px; left: 12px; right: 12px; display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 10px 12px; border-radius: 20px; background: rgb(255 255 255 / .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 30px -10px rgb(11 18 32 / .45), 0 0 0 1px rgb(11 18 32 / .06); font-size: 11px; line-height: 1.35; color: #374151; transform: translateY(-140%); opacity: 0; transition: transform .6s var(--hai-de), opacity .3s; }
.hai-iph__tb b { color: #0B1220; font-weight: 700; }
.hai-iph__tb-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--hai-xanh); color: #fff; }
.hai-iph__tb-gio { align-self: start; font: 500 9.5px/1 var(--hai-f-so); color: #8A93A3; }
.hai-iph__tb.is-hien { transform: none; opacity: 1; }
@media (max-width: 640px) { .hai-sk__dt { min-width: 118px; right: 0; } .hai-iph__tb { display: none; } }

/* ======================================================================
   Giao diện mô phỏng theo phong cách từng nền tảng (chỉ gợi màu và bố cục quen thuộc, đẹp và gọn hơn bản gốc).
   Không dùng giao diện hay logo chính thức; luôn có dòng chú thích bên dưới.
   ====================================================================== */
/* --- kiểu trình quản lý Google Ads --- */
.hai-ung--gads { --u-xanh: #1A73E8; --u-xanh-nhat: #E8F0FE; font-family: var(--hai-f-than); }
.g-top { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: #fff; border-bottom: 1px solid #DADCE0; font-size: 12.5px; color: #202124; flex-wrap: wrap; }
.g-ham { color: #5F6368; display: grid; } .g-logo { display: inline-grid; place-items: center; height: 22px; padding: 0 8px; border-radius: 5px; background: #1A73E8; color: #fff; font: 700 12px/1 var(--hai-f-tde); }
.g-tit { font: 600 15px/1 var(--hai-f-tde); color: #202124; } .g-tk { color: #5F6368; font-size: 11.5px; }
.g-halo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: #E8F0FE; color: #1967D2; font: 600 11.5px/1 var(--hai-f-than); }
.g-body { display: grid; grid-template-columns: 148px minmax(0, 1fr); background: #F8F9FA; }
.g-nav { display: grid; gap: 2px; align-content: start; padding: 10px 8px 10px 0; font-size: 12.5px; color: #3C4043; }
.g-nav span { padding: 8px 14px; border-radius: 0 20px 20px 0; } .g-nav .on { background: #E8F0FE; color: #1967D2; font-weight: 600; }
.g-main { display: grid; gap: 10px; padding: 12px 14px; min-width: 0; }
.g-hdr { display: flex; align-items: center; gap: 8px; } .g-hdr b { font: 600 17px/1 var(--hai-f-tde); color: #202124; }
.g-chip { padding: 4px 10px; border: 1px solid #DADCE0; border-radius: 6px; background: #fff; font-size: 11.5px; color: #3C4043; } .g-chip--x { margin-left: auto; background: #E8F0FE; color: #1967D2; border-color: #D2E3FC; font-weight: 600; }
.g-bang { background: #fff; border: 1px solid #DADCE0; border-radius: 8px; overflow: hidden; font-size: 12.5px; color: #202124; }
.g-bang > div { display: grid; grid-template-columns: 2.4fr 1fr .8fr .8fr .8fr; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid #E8EAED; }
.g-bang > .g-h { border-top: 0; background: #F8F9FA; color: #5F6368; font-weight: 600; font-size: 11.5px; }
.g-bang > .g-hl { background: #FEF7E0; }
.g-nhan { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-style: normal; font-size: 11px; color: #B06000; }
.g-d { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #34A853; }
.g-s { font: 500 12px/1 var(--hai-f-so); font-variant-numeric: tabular-nums; text-align: right; } .g-bad { color: #D93025; font-weight: 700; }
.g-de-xuat { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #fff; border: 1px solid #DADCE0; border-left: 4px solid #1A73E8; border-radius: 8px; font-size: 12.5px; line-height: 1.5; color: #3C4043; }
.g-de-xuat > span:nth-child(2) { flex: 1; min-width: 0; } .g-de-xuat b { color: #202124; }
.g-de-xuat__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #E8F0FE; color: #1A73E8; flex: none; }
.g-nut { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: 4px; background: #1A73E8; color: #fff; font: 600 12.5px/1 var(--hai-f-than); } .g-nut--p { background: #fff; color: #1A73E8; border: 1px solid #DADCE0; }
/* --- kiểu Meta Ads Manager --- */
.hai-ung--meta { --u-xanh: #0866FF; --u-xanh-nhat: #E7F3FF; }
.m-top { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #fff; border-bottom: 1px solid #CED0D4; font-size: 12.5px; color: #1C2B33; flex-wrap: wrap; }
.m-lg { font: 700 22px/1 var(--hai-f-tde); color: #0866FF; } .m-tit { font-weight: 700; } .m-tk { color: #65676B; }
.m-halo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: #E7F3FF; color: #0866FF; font: 700 11.5px/1 var(--hai-f-than); }
.m-body { display: grid; grid-template-columns: 52px minmax(0, 1fr); background: #F0F2F5; }
.m-side { display: grid; gap: 4px; justify-items: center; align-content: start; padding: 10px 0; background: #fff; border-right: 1px solid #CED0D4; }
.m-side > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #65676B; } .m-side > span.on { background: #E7F3FF; color: #0866FF; }
.m-main { display: grid; gap: 10px; padding: 12px 14px; min-width: 0; }
.m-tab { display: flex; gap: 2px; padding: 0 8px; background: #fff; border: 1px solid #CED0D4; border-radius: 8px; font-size: 12.5px; color: #65676B; }
.m-tab span { padding: 10px 12px; } .m-tab .on { color: #0866FF; font-weight: 700; box-shadow: inset 0 -3px #0866FF; }
.m-bang { background: #fff; border: 1px solid #CED0D4; border-radius: 8px; overflow: hidden; font-size: 12.5px; color: #1C2B33; }
.m-bang > div { display: grid; grid-template-columns: .6fr 2.6fr 1.1fr .6fr 1fr; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid #E4E6EB; }
.m-bang > .m-h { border-top: 0; background: #F5F6F7; color: #65676B; font-weight: 700; font-size: 11.5px; }
.m-bang > .m-hl { background: #F2F8FF; }
.m-sw { position: relative; width: 32px; height: 18px; border-radius: 99px; background: #BEC3C9; } .m-sw i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .2s; } .m-sw.on { background: #0866FF; } .m-sw.on i { left: 16px; }
.m-pp { color: #31A24C; font-weight: 600; font-size: 12px; } .m-pp--tat { color: #8A8D91; }
.m-nhan { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-style: normal; font-size: 11px; color: #0866FF; font-weight: 600; }
.m-s { font: 500 12px/1 var(--hai-f-so); font-variant-numeric: tabular-nums; } .m-ok { color: #31A24C; font-weight: 700; }
.m-de-xuat { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #fff; border: 1px solid #CED0D4; border-radius: 8px; font-size: 12.5px; line-height: 1.5; color: #65676B; }
.m-de-xuat > span:nth-child(2) { flex: 1; min-width: 0; } .m-de-xuat b { color: #1C2B33; }
.m-de-xuat__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #E7F3FF; color: #0866FF; flex: none; }
.m-nut { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 6px; background: #E4E6EB; color: #050505; font: 700 12.5px/1 var(--hai-f-than); } .m-nut--p { background: #0866FF; color: #fff; }
@media (max-width: 760px) { .g-body { grid-template-columns: minmax(0, 1fr); } .g-nav { display: none; } .g-bang > div, .m-bang > div { grid-template-columns: 2fr 1fr 1fr; } .g-bang > div > :nth-child(n+4), .m-bang > div > :nth-child(n+4) { display: none; } .g-halo, .m-halo { display: none; } }

/* --- khung xem video dọc kiểu TikTok --- */
.hai-iph__ecr--toi { background: #000; }
.t-vid { position: relative; flex: 1; background: radial-gradient(60% 40% at 30% 30%, #1d3b5f 0%, transparent 70%), radial-gradient(50% 40% at 80% 70%, #3a1f4a 0%, transparent 70%), #0b1220; color: #fff; overflow: hidden; }
.t-top { position: absolute; top: 48px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; font: 600 13px/1 var(--hai-f-than); color: rgb(255 255 255 / .6); } .t-top b { color: #fff; box-shadow: 0 6px 0 -4px #fff; padding-bottom: 5px; }
.t-canh { position: absolute; inset: 20% 14% 30% 8%; display: grid; place-content: center; gap: 12px; text-align: center; }
.t-tt { font: 800 28px/1.12 var(--hai-f-tde); letter-spacing: -.03em; text-shadow: 2px 0 #25F4EE, -2px 0 #FE2C55; }
.t-ph { justify-self: center; padding: 6px 10px; border-radius: 6px; background: rgb(0 0 0 / .62); font: 600 12px/1.35 var(--hai-f-than); }
.t-rail { position: absolute; right: 10px; bottom: 120px; display: grid; gap: 16px; justify-items: center; } .t-rail > span { display: grid; justify-items: center; gap: 3px; } .t-rail .hai-icon { width: 26px; height: 26px; stroke-width: 1.7; } .t-rail i { font: 600 10.5px/1 var(--hai-f-than); font-style: normal; }
.t-av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #2EB1FF, #0072E5); border: 2px solid #fff; box-shadow: 0 0 0 0 #FE2C55; }
.t-cap { position: absolute; left: 12px; right: 64px; bottom: 56px; font: 400 11.5px/1.45 var(--hai-f-than); } .t-cap b { font-weight: 700; } .t-nhac { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; opacity: .85; }
.t-halo { position: absolute; left: 10px; right: 10px; bottom: 22px; display: inline-flex; align-items: center; gap: 6px; justify-content: center; padding: 6px 10px; border-radius: 99px; background: rgb(255 255 255 / .92); color: #0B1220; font: 600 10.5px/1.2 var(--hai-f-than); }
.t-halo .hai-brand__mark { width: 16px; height: 13px; }
.hai-iph__hi--sang { background: #fff; }
/* --- khung trò chuyện kiểu Zalo OA --- */
.z-dau { display: flex; align-items: center; gap: 10px; flex: none; padding: 54px 14px 10px; background: #0068FF; color: #fff; font-size: 13px; line-height: 1.25; }
.z-dau small { font-size: 10.5px; opacity: .85; } .z-dau b { font-weight: 700; }
.z-lui { transform: rotate(180deg); display: grid; } .z-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #0068FF; font: 800 15px/1 var(--hai-f-tde); }
.z-tick { color: #9FD0FF; } .z-tick .hai-icon { width: 14px; height: 14px; vertical-align: -2px; }
.z-chat { flex: 1; display: grid; gap: 8px; align-content: start; padding: 10px; background: #E5EBF3; overflow: hidden; }
.z-gio { justify-self: center; padding: 3px 10px; border-radius: 99px; background: rgb(11 18 32 / .12); color: #4B5568; font: 500 10px/1.4 var(--hai-f-so); }
.z-bong { max-width: 84%; padding: 8px 11px; border-radius: 14px; font-size: 12px; line-height: 1.45; box-shadow: 0 1px 1px rgb(11 18 32 / .08); }
.z-bong--den { background: #fff; color: #0B1220; border-top-left-radius: 4px; } .z-bong--di { justify-self: end; background: #D4E6FF; color: #0B1220; border-top-right-radius: 4px; }
.z-the { display: grid; gap: 6px; max-width: 88%; padding: 10px 11px; border-radius: 14px; border-top-left-radius: 4px; background: #fff; box-shadow: 0 1px 1px rgb(11 18 32 / .08); font-size: 12px; } .z-the b { font-weight: 800; font-size: 13px; } 
.z-nut { display: grid; place-items: center; height: 32px; border-radius: 8px; border: 1px solid #0068FF; color: #0068FF; font: 700 12px/1 var(--hai-f-than); } .z-nut--p { background: #0068FF; color: #fff; }
.z-in { flex: none; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 10px 14px 28px; background: #fff; border-top: 1px solid #E2E7EF; font-size: 12px; color: #8A93A3; } .z-gui { color: #0068FF; display: grid; }

/* ======================================================================
   Sơ đồ hệ sinh thái nhiều nền tảng: một agent, nối bằng MCP, người duyệt ở giữa
   ====================================================================== */
.hai-hub { position: relative; display: grid; gap: 14px; }
.hai-hub__cot { display: grid; gap: 14px; align-content: center; }
.hai .hai-hub__nut { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 14px 16px; border-radius: var(--hai-bo); border: 1px solid var(--hai-vien); background: var(--hai-the); transition: transform var(--hai-vua) var(--hai-de), border-color var(--hai-nhanh), box-shadow var(--hai-vua); }
.hai .hai-hub__nut:hover { transform: translateY(-2px); border-color: var(--bc); box-shadow: 0 18px 34px -20px var(--bc); }
.hai .hai-hub__lg { grid-row: span 3; width: 40px; height: 40px; border-radius: 10px; background-color: color-mix(in srgb, var(--bc) 12%, #fff); position: relative; }
.hai .hai-hub__lg::after { content: ""; position: absolute; inset: 9px; background: var(--bc); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.hai .hai-hub__nut b { font: 700 .98rem/1.2 var(--hai-f-tde); } .hai .hai-hub__nut small { color: var(--hai-chu-phu); font-size: .85rem; line-height: 1.4; }
.hai .hai-hub__nut .hai-tt { margin-top: 4px; }
.hai .hai-hub__tam { position: relative; display: grid; gap: 12px; justify-items: center; align-content: center; padding: 28px 22px; border-radius: 22px; background: var(--hai-dem); color: var(--hai-dem-chu); text-align: center; overflow: hidden; box-shadow: 0 40px 80px -40px rgb(0 114 229 / .6); }
.hai .hai-hub__tam::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from var(--a, 0deg), transparent 0 70%, rgb(46 177 255 / .55) 85%, transparent 100%); animation: quay-tia 6s linear infinite; }
.hai .hai-hub__tam::after { content: ""; position: absolute; inset: 1px; border-radius: 21px; background: var(--hai-dem); }
.hai .hai-hub__tam > * { position: relative; z-index: 1; }
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes quay-tia { to { --a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .hai .hai-hub__tam::before { animation: none; } }
.hai .hai-hub__tam .hai-brand__mark { width: 56px; height: auto; color: #fff; }
.hai .hai-hub__tam h3 { color: #fff; font-size: 1.35rem; } .hai .hai-hub__tam p { color: var(--hai-dem-phu); font-size: 1rem; line-height: 1.5; }
.hai .hai-hub__the { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .hai .hai-hub__the span { padding: 4px 9px; border-radius: 99px; border: 1px solid rgb(255 255 255 / .22); font: 500 .74rem/1.2 var(--hai-f-so); color: #CFE6FF; }
.hai .hai-hub__mcp { font: 600 .72rem/1 var(--hai-f-so); letter-spacing: .08em; color: var(--hai-xanh); padding: 4px 8px; border-radius: 6px; background: var(--hai-nhan-nhat); width: fit-content; justify-self: center; }
.hai-hub__day { display: none; }
@media (min-width: 1000px) {
	.hai-hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; }
	.hai-hub__day { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
	.hai-hub__day path { fill: none; stroke: var(--hai-xanh); stroke-width: 1.5; stroke-dasharray: 5 7; opacity: .55; vector-effect: non-scaling-stroke; }
	.hai-hub > .hai-hub__cot, .hai-hub > .hai-hub__tam { position: relative; z-index: 1; }
}
@media (prefers-reduced-motion: no-preference) { .hai-hub__day path { animation: dong-mcp 1.8s linear infinite; } .hai-hub__day path.r { animation-direction: reverse; } }
@keyframes dong-mcp { to { stroke-dashoffset: -24; } }
.hai-hub-chu { margin-top: 28px; display: grid; gap: 0; border-top: 1px solid var(--hai-chu); }
@media (min-width: 900px) { .hai-hub-chu { grid-template-columns: repeat(3, 1fr); column-gap: 40px; } }
.hai-hub-chu > div { padding: 22px 0; border-bottom: 1px solid var(--hai-vien); display: grid; gap: 6px; align-content: start; }
.hai-hub-chu strong { font: 700 1.05rem/1.3 var(--hai-f-tde); } .hai-hub-chu p { color: var(--hai-chu-phu); }

/* chỉnh sau góp ý: tiêu đề hero vừa cột, thông báo đẩy gọn, điện thoại nhỏ lại */
.hai .hai-hero h1 { font-size: clamp(2.1rem, 1.2rem + 2.2vw, 2.85rem); }
.hai-iph__tb { grid-template-columns: 30px minmax(0, 1fr); padding: 9px 11px; font-size: 10.5px; }
.hai-iph__tb-gio { display: none; }
.hai-iph__tb-ic { width: 30px; height: 30px; }
.hai-sk__dt { width: 31%; max-width: 210px; }

.hai-sk__dt { height: var(--h, auto); }
.hai-sk__dt .hai-iph { width: 300px; transform-origin: 0 0; transform: scale(var(--s, .64)); }
.hai-doi { display: grid; gap: 40px; }
@media (min-width: 1100px) { .hai-doi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; } }

/* --- chỉnh khung trò chuyện Zalo và video TikTok theo chuẩn mới --- */
.z-dau { display: flex; align-items: center; gap: 9px; flex: none; padding: 52px 12px 10px; background: #0068FF; color: #fff; font-size: 13px; line-height: 1.25; }
.z-ten { flex: 1; min-width: 0; } .z-ten small { font-size: 10.5px; opacity: .85; } .z-ic { display: inline-flex; gap: 14px; } .z-ic .hai-icon { width: 18px; height: 18px; }
.z-bia { display: grid; place-items: center; height: 70px; border-radius: 10px; background: linear-gradient(135deg, #0068FF, #4FA3FF); color: #fff; } .z-bia .hai-icon { width: 30px; height: 30px; }
.z-kv { display: flex; justify-content: space-between; font-size: 11.5px; border-top: 1px solid #EEF0F4; padding-top: 6px; } .z-kv span { color: #6B7689; } .z-kv b { font-size: 11.5px; } .z-do { color: #D93025; }
.z-bong small { display: block; text-align: right; font-size: 9.5px; color: #6B7689; margin-top: 2px; }
.z-in { display: flex; align-items: center; gap: 12px; flex: none; padding: 9px 12px 26px; background: #fff; border-top: 1px solid #E2E7EF; font-size: 12px; color: #8A93A3; } .z-o { flex: 1; padding: 7px 12px; border-radius: 99px; background: #F2F4F8; } .z-ic2 { color: #5B6678; display: grid; } .z-ic2 .hai-icon { width: 19px; height: 19px; }
.z-chat { flex: 1; display: grid; gap: 8px; align-content: start; padding: 10px; background: #E6EBF3; overflow: hidden; }
.t-vid { position: relative; flex: 1; background: radial-gradient(70% 45% at 30% 28%, #234a78 0%, transparent 70%), radial-gradient(55% 40% at 82% 68%, #4a2557 0%, transparent 70%), #0A101C; color: #fff; overflow: hidden; }
.t-top { position: absolute; top: 56px; left: 0; right: 0; display: flex; justify-content: center; gap: 14px; font: 600 13px/1 -apple-system, "SF Pro Text", sans-serif; color: rgb(255 255 255 / .62); } .t-top b { color: #fff; box-shadow: 0 7px 0 -5px #fff; padding-bottom: 6px; }
.t-canh { position: absolute; inset: 22% 18% 34% 6%; display: grid; place-content: center; gap: 12px; }
.t-rail { position: absolute; right: 8px; bottom: 76px; display: grid; gap: 13px; justify-items: center; } .t-rail > span { display: grid; justify-items: center; gap: 2px; } .t-rail i { font: 600 10.5px/1 -apple-system, sans-serif; font-style: normal; }
.t-av { position: relative; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #2EB1FF, #0072E5); border: 2px solid #fff; margin-bottom: 8px; } .t-av i { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #FE2C55; font-size: 13px; }
.t-dia { width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(#222, #555, #222, #555, #222); border: 8px solid #1a1a1a; animation: xoay 5s linear infinite; }
@keyframes xoay { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .t-dia { animation: none; } }
.t-cap { position: absolute; left: 10px; right: 64px; bottom: 76px; font: 400 11.5px/1.45 -apple-system, "SF Pro Text", sans-serif; } .t-shop { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; margin-bottom: 6px; border-radius: 6px; background: rgb(255 255 255 / .18); font-weight: 600; font-size: 11px; backdrop-filter: blur(6px); } .t-shop .hai-icon { width: 13px; height: 13px; } .t-tag { font-weight: 600; }
.t-halo { position: absolute; left: 10px; right: 10px; bottom: 50px; display: flex; align-items: center; gap: 6px; justify-content: center; padding: 5px 10px; border-radius: 99px; background: rgb(255 255 255 / .94); color: #0B1220; font: 600 10px/1.2 -apple-system, "SF Pro Text", sans-serif; }
.t-bar { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 8px 4px 22px; background: #000; font: 600 10.5px/1 -apple-system, "SF Pro Text", sans-serif; color: rgb(255 255 255 / .6); text-align: center; } .t-bar span:first-child { color: #fff; }
.t-cong i { display: block; width: 42px; height: 28px; margin: 0 auto; border-radius: 9px; background: #fff; box-shadow: -3px 0 0 #25F4EE, 3px 0 0 #FE2C55; }
.t-halo { bottom: 62px; } .t-cap { bottom: 100px; } .t-rail { bottom: 98px; }

/* ======================================================================
   Trang Về chúng tôi: tầm nhìn, sứ mệnh, giá trị, mô hình nền tảng, bản đồ hệ sinh thái, lộ trình
   ====================================================================== */
.hai-tn { display: grid; gap: 14px; }
.hai .hai-tn__o { display: grid; gap: 18px; align-content: start; padding: 36px; border-radius: var(--hai-bo); border: 1px solid var(--hai-vien); background: var(--hai-the); }
.hai .hai-tn__o h2 { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.35rem); font-weight: 800; letter-spacing: -.035em; }
.hai .hai-tn__o p { color: var(--hai-chu-phu); font-size: 1.05rem; }
.hai .hai-tn__o--toi { background: var(--hai-dem); border-color: var(--hai-dem); box-shadow: 0 40px 80px -40px rgb(0 114 229 / .55); }
.hai .hai-tn__o--toi h2 { color: #fff; } .hai .hai-tn__o--toi p { color: var(--hai-dem-phu); } .hai .hai-tn__o--toi .hai-nhan-nho { color: #7DD3FF; } .hai .hai-tn__o--toi .hai-nhan-nho::before { color: #7DD3FF; }
@media (min-width: 900px) { .hai-tn { grid-template-columns: 1fr 1fr; gap: 20px; } .hai .hai-tn__o { padding: 48px; } }

.hai .hai-gt { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--hai-chu); }
.hai .hai-gt li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--hai-vien); }
.hai .hai-gt > li > .hai-icon { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--hai-nhan); color: var(--hai-chu); }
.hai .hai-gt strong { display: block; font: 700 1.15rem/1.3 var(--hai-f-tde); letter-spacing: -.02em; margin-bottom: 4px; } .hai .hai-gt p { color: var(--hai-chu-phu); }
@media (min-width: 900px) { .hai .hai-gt { grid-template-columns: repeat(2, 1fr); column-gap: 56px; } }
@media (min-width: 1200px) { .hai .hai-gt { grid-template-columns: repeat(3, 1fr); } }

.hai-mh { display: grid; gap: 14px; align-items: stretch; }
.hai .hai-mh__b { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--hai-bo); border: 1px solid var(--hai-vien); background: var(--hai-the); }
.hai .hai-mh__b:first-child { background: var(--hai-dem); border-color: var(--hai-dem); } .hai .hai-mh__b:first-child strong { color: #fff; } .hai .hai-mh__b:first-child p { color: var(--hai-dem-phu); }
.hai .hai-mh__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--hai-nhan); color: var(--hai-chu); } .hai .hai-mh__ic .hai-icon { width: 22px; height: 22px; vertical-align: 0; }
.hai .hai-mh__b strong { font: 700 1.2rem/1.3 var(--hai-f-tde); letter-spacing: -.02em; } .hai .hai-mh__b p { color: var(--hai-chu-phu); }
.hai-mh__mui { display: none; }
.hai .hai-mh__cuoi { margin-top: 28px; max-width: 52em; color: var(--hai-chu-phu); font-size: 1.05rem; padding: 18px 20px; border-left: 3px solid var(--hai-xanh); background: var(--hai-nhan-nhat); border-radius: 0 12px 12px 0; }
@media (min-width: 900px) {
	.hai-mh { grid-template-columns: 1fr 44px 1fr 44px 1fr; gap: 0; }
	.hai-mh__mui { display: block; position: relative; align-self: center; height: 2px; background: var(--hai-xanh); }
	.hai-mh__mui::after { content: ""; position: absolute; right: -1px; top: -4px; width: 9px; height: 9px; border-top: 2px solid var(--hai-xanh); border-right: 2px solid var(--hai-xanh); transform: rotate(45deg); }
}

/* bản đồ ba vòng quanh một lõi */
.hai-ecos { display: none; }
@media (min-width: 900px) {
	.hai-ecos { display: block; container-type: inline-size; position: relative; aspect-ratio: 1; width: min(100%, 780px); margin: 8px auto 56px; }
	.hai-ecos__v { position: absolute; border-radius: 50%; border: 1px dashed var(--hai-vien-dam); }
	.hai-ecos__v--1 { inset: 30cqw; border-color: #9DB6D9; } .hai-ecos__v--2 { inset: 16cqw; } .hai-ecos__v--3 { inset: 5cqw; border-style: dotted; border-color: var(--hai-vien-dam); }
	.hai-ecos__loi { position: absolute; z-index: 3; inset: 40cqw; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; background: var(--hai-dem); color: #fff; text-align: center; box-shadow: 0 30px 60px -24px rgb(0 114 229 / .65); }
	.hai-ecos__loi .hai-brand__mark { width: 5.4cqw; height: auto; color: #fff; } .hai-ecos__loi b { font: 800 1.8cqw/1.2 var(--hai-f-tde); letter-spacing: -.02em; } .hai-ecos__loi small { font: 500 1.15cqw/1.3 var(--hai-f-so); color: #9AA7BD; text-align: center; }
	.hai-ecos__song { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgb(46 177 255 / .7); z-index: -1; }
	.hai-ecos__n { position: absolute; z-index: 2; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(calc(var(--k) * 360deg / var(--n) + var(--o, 0deg))) translateY(calc(var(--r) * -1)) rotate(calc((var(--k) * 360deg / var(--n) + var(--o, 0deg)) * -1)); }
	.hai-ecos__n > span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: inline-flex; padding: .8cqw 1.5cqw; border-radius: 99px; white-space: nowrap; font: 600 1.8cqw/1.2 var(--hai-f-tde); letter-spacing: -.01em; }
	.hai-ecos__n--r1 > span { background: var(--hai-chu); color: #fff; box-shadow: 0 10px 20px -10px rgb(11 18 32 / .6); }
	.hai-ecos__n--r2 > span { background: #fff; color: var(--hai-chu); border: 1px dashed var(--hai-xanh); }
	.hai-ecos__n--r3 > span { background: rgb(255 255 255 / .75); color: var(--hai-chu-phu); border: 1px dotted #9AA7BD; font-weight: 500; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	.hai-ecos__song { animation: halo 5s ease-out infinite; z-index: 0; } .hai-ecos__song--2 { animation-delay: 2.5s; }
}
.hai-ecos__ds { display: grid; gap: 28px; }
@media (min-width: 900px) { .hai-ecos__ds { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.hai .hai-ecos__nhom { display: grid; gap: 14px; align-content: start; }
.hai .hai-ecos__tde { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hai-chu); } .hai .hai-ecos__tde h3 { font-size: 1.5rem; letter-spacing: -.03em; }
.hai .hai-ecos__nhom ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.hai .hai-ecos__nhom li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--hai-vien); font-size: 1rem; color: var(--hai-chu-phu); } .hai .hai-ecos__nhom li b { font: 700 1rem/1.3 var(--hai-f-tde); color: var(--hai-chu); }
.hai .hai-ecos__nhom li em { font: 500 .78rem/1 var(--hai-f-so); font-style: normal; color: var(--hai-chu-nhat); }

/* lộ trình */
.hai .hai-lt { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-left: 2px solid var(--hai-vien-dam); margin-left: 8px; }
.hai .hai-lt > li { position: relative; display: grid; gap: 8px; align-content: start; padding: 0 0 36px 28px; }
.hai .hai-lt > li::before { content: ""; position: absolute; left: -9px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--hai-nen); border: 2px solid var(--hai-vien-dam); }
.hai .hai-lt > li.hai-lt--nay::before { background: var(--hai-nhan); border-color: var(--hai-chu); box-shadow: 0 0 0 5px rgb(46 177 255 / .25); }
.hai .hai-lt__gio { font: 500 .85rem/1.2 var(--hai-f-so); color: var(--hai-chu-nhat); } .hai .hai-lt h3 { font-size: 1.5rem; letter-spacing: -.03em; }
.hai .hai-lt ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; } .hai .hai-lt ul li { position: relative; padding-left: 16px; color: var(--hai-chu-phu); font-size: 1rem; } .hai .hai-lt ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 2px; background: var(--hai-xanh); }
@media (min-width: 1000px) {
	.hai .hai-lt { grid-template-columns: repeat(4, 1fr); gap: 24px; border-left: 0; margin-left: 0; border-top: 2px solid var(--hai-vien-dam); padding-top: 28px; }
	.hai .hai-lt > li { padding: 0; }
	.hai .hai-lt > li::before { left: 0; top: -37px; }
	.hai .hai-lt > li.hai-lt--nay { }
}
.hai .hai-ecos__tde .hai-tt { white-space: nowrap; margin-left: auto; }

/* ======================================================================
   Mạch landing bán hàng cho trang giải pháp: nỗi đau, trước và sau, lợi ích
   ====================================================================== */
.hai .hai-kho { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.hai .hai-kho li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 24px; border-radius: var(--hai-bo); background: var(--hai-the); border: 1px solid var(--hai-vien); border-left: 4px solid #D92D20; transition: transform var(--hai-vua) var(--hai-de), box-shadow var(--hai-vua); }
.hai .hai-kho li:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -24px rgb(217 45 32 / .5); }
.hai .hai-kho__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #FEF3F2; color: #B42318; } .hai .hai-kho__ic .hai-icon { width: 22px; height: 22px; vertical-align: 0; }
.hai .hai-kho strong { display: block; font: 700 1.12rem/1.3 var(--hai-f-tde); letter-spacing: -.02em; margin-bottom: 4px; } .hai .hai-kho p { color: var(--hai-chu-phu); }
@media (min-width: 800px) { .hai .hai-kho { grid-template-columns: repeat(2, 1fr); } }

.hai .hai-ts { display: grid; border: 1px solid var(--hai-vien-dam); border-radius: var(--hai-bo); overflow: hidden; background: var(--hai-the); }
.hai .hai-ts__h { display: grid; gap: 6px; padding: 18px 20px; border-top: 1px solid var(--hai-vien); }
.hai .hai-ts__h:first-child { border-top: 0; }
.hai .hai-ts__h b { font: 700 1rem/1.3 var(--hai-f-tde); }
.hai .hai-ts__cu { color: var(--hai-chu-nhat); text-decoration: line-through; text-decoration-color: #D0D5DD; font-size: 1rem; }
.hai .hai-ts__moi { color: var(--hai-chu); font-weight: 600; font-size: 1rem; position: relative; padding-left: 22px; }
.hai .hai-ts__moi::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--hai-xanh); border-bottom: 2px solid var(--hai-xanh); transform: rotate(-45deg); }
.hai .hai-ts__tren { background: var(--hai-xam); }
.hai .hai-ts__tren b, .hai .hai-ts__tren span { font: 600 .8rem/1.3 var(--hai-f-so); letter-spacing: .04em; text-transform: uppercase; color: var(--hai-chu-phu); text-decoration: none; padding-left: 0; }
.hai .hai-ts__tren .hai-ts__moi { color: var(--hai-xanh); } .hai .hai-ts__tren .hai-ts__moi::before { display: none; }
@media (min-width: 800px) {
	.hai .hai-ts__h { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; padding: 18px 24px; }
	.hai .hai-ts__h .hai-ts__moi { background: var(--hai-nhan-nhat); margin: -18px -24px -18px 0; padding: 18px 24px 18px 46px; }
	.hai .hai-ts__h .hai-ts__moi::before { left: 24px; top: 1.45em; }
	.hai .hai-ts__tren .hai-ts__moi { background: #D7ECFF; padding-left: 24px; }
}

.hai .hai-loi { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.hai .hai-loi li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; padding: 26px; border-radius: var(--hai-bo); background: var(--hai-the); border: 1px solid var(--hai-vien); transition: transform var(--hai-vua) var(--hai-de), border-color var(--hai-nhanh); }
.hai .hai-loi li:hover { transform: translateY(-3px); border-color: var(--hai-chu); }
.hai .hai-loi li:nth-child(1) { background: var(--hai-chu); border-color: var(--hai-chu); } .hai .hai-loi li:nth-child(1) strong { color: #fff; } .hai .hai-loi li:nth-child(1) p { color: var(--hai-dem-phu); }
.hai .hai-loi__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--hai-nhan); color: var(--hai-chu); } .hai .hai-loi__ic .hai-icon { width: 24px; height: 24px; vertical-align: 0; }
.hai .hai-loi strong { display: block; font: 700 1.2rem/1.3 var(--hai-f-tde); letter-spacing: -.025em; margin-bottom: 4px; } .hai .hai-loi p { color: var(--hai-chu-phu); }
.hai .hai-loi__cta { margin-top: 32px; }
@media (min-width: 800px) { .hai .hai-loi { grid-template-columns: repeat(2, 1fr); } }

/* ảnh bài viết */
.hai .hai-bai__anh { margin-block: 32px 0; }
.hai .hai-bai__anh img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--hai-bo); border: 1px solid var(--hai-vien); }
.hai .hai-bai__anh figcaption { margin-top: 10px; font: 400 .85rem/1.5 var(--hai-f-so); color: var(--hai-chu-nhat); }
.hai .hai-bv__anh { display: block; margin: -26px -26px 4px; overflow: hidden; border-bottom: 1px solid var(--hai-vien); }
.hai .hai-bv__anh img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s var(--hai-de); }
.hai .hai-bv__o:hover .hai-bv__anh img { transform: scale(1.04); }

.hai .hai-bc__so--chu { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); letter-spacing: -.035em; line-height: 1.1; }


/* ---------- sửa theo QC độc lập 08/10 (L1 đến L15) ---------- */
.hai h1, .hai h2, .hai h3 { text-wrap: balance; }
/* L2, L8: lưới đặt trong nửa cột thì chỉ 1 cột, kẻo rớt từng chữ */
.hai-hai-cot .hai-gt, .hai-hai-cot .hai-tinh-nang { grid-template-columns: minmax(0, 1fr); }
.hai .hai-hai-cot > .hai-o-vien { align-self: stretch; }
/* L3: nút trong khung Zalo */
.z-the .z-nut--p { color: #fff; background: #0068FF; }
/* L4: lộ trình: bước chưa tới vẫn đọc được, bớt khoảng trống */
@media (min-width: 1024px) {
	.hai-js .hai-song__ds li { opacity: .62; }
	.hai .hai-song__ds li { min-height: 40vh; }
}
/* L5, L6: cửa sổ app vừa nội dung, phần còn lại là hình nền máy; bỏ phần đế thò ra ngoài lưới */
.hai-mac__stage { align-items: start; }
.hai-mac__stage .hai-ung { height: auto; max-height: 100%; }
.hai-mac__day { margin: 0 -.6cqw; }
.hai-sk__dt { width: 27%; max-width: 190px; right: -3%; }
/* L7: bốn số liệu cùng cỡ chữ, không xuống dòng */
.hai .hai-bc__so--chu { font-size: clamp(1.5rem, 1.05rem + 1.1vw, 2.2rem); white-space: nowrap; line-height: 1.15; }
/* L10: bảng trước và sau trên điện thoại: ghi nhãn ngay trên từng dòng, bỏ hàng tiêu đề tách rời */
@media (max-width: 799px) {
	.hai .hai-ts__tren { display: none; }
	.hai .hai-ts__cu::before { content: "Hiện nay: "; font: 500 .78rem/1 var(--hai-f-so); text-decoration: none; display: inline-block; color: var(--hai-chu-phu); margin-right: 4px; }
	.hai .hai-ts__moi { padding-left: 0; }
	.hai .hai-ts__moi::before { position: static; display: inline-block; width: auto; height: auto; border: 0; transform: none; content: "Với giải pháp: "; font: 600 .78rem/1 var(--hai-f-so); color: var(--hai-xanh); margin-right: 4px; }
}
/* L15: vạch đỏ bên trái thẻ nỗi đau: cắt gọn theo góc bo thay vì cong theo viền */
.hai .hai-kho li { position: relative; overflow: hidden; border-left: 1px solid var(--hai-vien); }
.hai .hai-kho li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #D92D20; }
/* L18 */
.hai .hai-bai__anh figcaption { font-size: .9rem; }

/* ô tick: vùng bấm là cả hàng nhãn (>= 44 px), ô vuông vẽ bằng ::before */
.hai .hai-chon label, .hai .hai-dong-y label { position: relative; }
.hai .hai-chon label::before, .hai .hai-dong-y label::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--hai-chu-nhat); border-radius: 5px; background: #fff center / 14px no-repeat; transition: background-color var(--hai-nhanh), border-color var(--hai-nhanh); }
.hai .hai-chon label:has(input:checked)::before, .hai .hai-dong-y label:has(input:checked)::before { background-color: var(--hai-chu); border-color: var(--hai-chu); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hai .hai-chon input, .hai .hai-dong-y input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.hai .hai-chon input:focus-visible + span, .hai .hai-dong-y input:focus-visible + span { outline: 3px solid var(--hai-chu); outline-offset: 4px; border-radius: 4px; }