/* Tictag design system 2.0 — thành phần. Nạp trước: fonts.css và tictag-tokens.css (sinh từ tokens.json).
   Học cách Imperial dùng màu chủ đạo: nền trắng ngà, thẻ trắng bo vừa có viền mảnh và bóng nhẹ, chữ tối,
   màu thương hiệu (cam) ở dải đầu trang, nút và điểm nhấn, một khối tối chuyển sắc. Không mảng cam phẳng cỡ lớn.
   Một họ chữ không chân. Nhận diện thẻ: lỗ đục tròn cam trên thẻ chọn, tên dịch vụ và nhãn bước. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nen); color: var(--chu-chinh); font-family: var(--chu); font-size: var(--co-than); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--chu); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--chu-chinh); outline-offset: 3px; border-radius: 6px; }
.khoi-toi :focus-visible, .bo-chon :focus-visible, .chan-trang :focus-visible { outline-color: var(--cam-sang); }

.vung { width: min(var(--vung-rong), 100% - 2 * var(--le)); margin-inline: auto; }
.chi-doc-man-hinh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bo-qua { position: absolute; left: 12px; top: -80px; background: var(--muc); color: #fff; padding: 10px 16px; border-radius: var(--bo-o); z-index: 100; }
.bo-qua:focus { top: 12px; }

/* ---------- nút ---------- */
.nut-cam, .nut-muc {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px; border-radius: var(--bo-nut); border: 0;
  font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--nhanh) ease, transform var(--nhanh) ease;
}
.nut-cam { background: var(--cam); color: var(--muc); }
.nut-cam:hover { background: var(--cam-sang); }
.nut-muc { background: var(--muc); color: #fff; }
.nut-muc:hover { background: var(--than-3); }
.nut-cam:active, .nut-muc:active { transform: translateY(1px); }
.nut-cam[disabled], .nut-muc[disabled] { opacity: .65; cursor: progress; }
.nut-nho { min-height: 42px; padding: 0 20px; font-size: .94rem; }
.lien-ket { font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; text-decoration-color: var(--cam); }
.lien-ket:hover { text-decoration-color: currentColor; }

/* ---------- dải đầu trang: mảng cam lớn duy nhất ---------- */
.dau-trang { position: sticky; top: 0; z-index: 50; background: var(--cam); color: var(--muc); box-shadow: 0 2px 14px rgba(35, 26, 18, .16); }
.dau-trang .vung { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.logo { display: block; flex: none; }
.logo img { height: 40px; width: auto; }
.menu { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); margin-left: auto; }
.menu a { text-decoration: none; font-weight: 500; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.menu a:hover { border-bottom-color: var(--muc); }
.menu a.nut-muc { padding: 0 20px; border-bottom: 0; color: #fff; }
.nut-menu { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(26, 20, 16, .4); background: transparent; cursor: pointer; }
.nut-menu span, .nut-menu span::before, .nut-menu span::after { display: block; width: 18px; height: 2px; background: var(--muc); position: relative; margin-inline: auto; content: ""; transition: transform .2s ease, top .2s ease; }
.nut-menu span::before { position: absolute; top: -6px; left: 0; }
.nut-menu span::after { position: absolute; top: 6px; left: 0; }
.nut-menu[aria-expanded="true"] span { background: transparent; }
.nut-menu[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nut-menu[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ---------- khối tối chuyển sắc (nâu đen), tràn ngang, không bo ---------- */
.khoi-toi { background: var(--than); color: #fff; padding: var(--khoang-muc) 0; }
.khoi-toi p { color: var(--sang-tren-than); }

/* ---------- hero ---------- */
.hero { padding: clamp(56px, 8vw, 112px) 0 clamp(64px, 8vw, 104px); }
.hero .vung { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: start; }
.hero .vung > div:first-child { padding-top: clamp(8px, 4vw, 64px); }
.hero h1 { font-size: var(--co-hero); line-height: 1.22; max-width: 19ch; }
.hero .phu { margin-top: 22px; color: var(--chu-phu); font-size: 1.15rem; line-height: 1.65; max-width: 46ch; }
.hero .hanh-dong { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* bộ chọn tình huống: thẻ có lỗ đục */
.bo-chon { background: var(--than); color: #fff; border-radius: var(--bo-khoi); padding: clamp(20px, 2.6vw, 30px); box-shadow: var(--bong-noi); }
.bo-chon fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bo-chon legend { padding: 0; font-weight: 600; font-size: 1.35rem; line-height: 1.3; margin-bottom: 4px; }
.bo-chon .goi-y { color: var(--sang-tren-than); font-size: .94rem; margin-bottom: 14px; }
.the { position: relative; display: block; margin-top: 10px; padding: 15px 20px 15px 56px; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--bo-chon); cursor: pointer; line-height: 1.5; transform-origin: 20px 50%; transition: background-color var(--nhanh) ease, border-color var(--nhanh) ease; }
.the:hover { border-color: rgba(255, 255, 255, .55); }
.the input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.the::before { content: ""; position: absolute; left: 20px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 2px solid var(--xam-logo); background: var(--than-1); transition: border-color var(--nhanh) ease; }
.the:has(input:checked) { background: var(--nen); border-color: var(--nen); color: var(--chu-chinh); animation: lac var(--lac) ease-out; }
.the:has(input:checked)::before { border: 3px solid var(--cam); background: var(--nen); }
.the:has(input:focus-visible) { outline: 3px solid var(--cam-sang); outline-offset: 3px; }
@keyframes lac { 0% { transform: rotate(-2deg); } 35% { transform: rotate(1deg); } 70% { transform: rotate(-.4deg); } 100% { transform: rotate(0); } }

.ket-qua { display: none; margin-top: 18px; padding: 22px 22px 24px; border-radius: var(--bo-the); background: var(--than-1); }
.ket-qua h3 { font-size: 1.45rem; }
.ket-qua > p { margin-top: 10px; color: var(--sang-tren-than); font-size: 1rem; }
.ket-qua dl { margin: 16px 0 0; display: grid; gap: 12px; }
.ket-qua dt { font-weight: 600; font-size: .88rem; color: var(--cam-sang); }
.ket-qua dd { margin: 2px 0 0; font-size: .98rem; line-height: 1.55; }
.ket-qua .lien-ket { display: inline-block; margin-top: 18px; }
.bo-chon:has(#th-1:checked) #kq-1,
.bo-chon:has(#th-2:checked) #kq-2,
.bo-chon:has(#th-3:checked) #kq-3 { display: block; }
@supports not selector(:has(*)) {
  .ket-qua { display: block; }
  .the input { opacity: 1; position: static; margin-right: 8px; }
}

/* ---------- dải công nghệ ---------- */
.dai-cn { padding: 8px 0 0; }
.dai-cn .vung { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 0; padding-top: 28px; border-top: 1px solid var(--vien); }
.dai-cn p { color: var(--chu-phu); font-size: .96rem; margin-right: 28px; max-width: 34ch; }
.dai-cn ul { display: flex; flex-wrap: wrap; gap: 10px 0; }
.dai-cn li { font-weight: 500; font-size: 1rem; padding: 0 20px; border-left: 1px solid var(--vien); }
.dai-cn li:first-child { border-left: 0; padding-left: 0; }

/* ---------- khung mục ---------- */
.muc-nen { padding: var(--khoang-muc) 0; }
.muc-nen.sat-tren { padding-top: 0; }
.dau-muc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.dau-muc h2 { font-size: var(--co-h2); max-width: 20ch; }
.dau-muc p { color: var(--chu-phu); max-width: 50ch; }
.khoi-toi .dau-muc p { color: var(--sang-tren-than); }

/* ---------- ba dịch vụ ---------- */
.dv { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px clamp(28px, 5vw, 80px); background: var(--trang); border: 1px solid var(--vien); border-radius: var(--bo-the); box-shadow: var(--bong-the); padding: clamp(28px, 4vw, 52px); }
.dv + .dv { margin-top: 20px; }
.dv h3 { font-size: var(--co-h3-lon); display: flex; align-items: baseline; gap: 14px; }
.dv h3::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; border: 3px solid var(--cam); transform: translateY(-.04em); }
.dv .loi-hua { margin-top: 14px; font-size: 1.1rem; line-height: 1.55; max-width: 30ch; padding-left: calc(.5em + 14px + 3px); color: var(--chu-phu); }
.dv .mo-ta { max-width: 60ch; }
.dv .viec { margin-top: 18px; display: grid; gap: 10px; }
.dv .viec li { position: relative; padding-left: 24px; max-width: 62ch; }
.dv .viec li::before { content: ""; position: absolute; left: 0; top: .66em; width: 8px; height: 8px; border-radius: 50%; background: var(--cam); }
.dv dl { margin: 26px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; padding-top: 22px; border-top: 1px solid var(--vien); }
.dv dt { font-weight: 600; font-size: .9rem; color: var(--cam-chu); }
.dv dd { margin: 3px 0 0; font-size: .98rem; line-height: 1.6; }

/* ---------- cách làm ---------- */
.cac-buoc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.buoc { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--bo-the); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
@supports (grid-template-rows: subgrid) {
  .buoc { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; }
}
.buoc .so { font-weight: 600; font-size: .9rem; color: var(--cam-sang); display: flex; align-items: center; gap: 10px; }
.buoc .so::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cam); }
.buoc h3 { font-size: 1.45rem; margin-bottom: 4px; }
.buoc .ai, .buoc .co-van { border-radius: var(--bo-chon); padding: 14px 16px; font-size: .96rem; line-height: 1.55; }
.buoc .ai { border: 1px dashed rgba(255, 255, 255, .36); color: var(--sang-tren-than); }
.buoc .co-van { background: var(--nen); color: var(--chu-chinh); flex: 1; }
.buoc b { display: block; font-size: .85rem; margin-bottom: 4px; }
.buoc .ai b { color: #fff; }
.buoc .co-van b { color: var(--cam-chu); }

/* ---------- giám đốc chuyển đổi số thuê ngoài ---------- */
.cto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cto h2 { font-size: var(--co-h2); max-width: 18ch; }
.cto .tieu-phu { margin-top: 12px; font-weight: 600; font-size: 1.35rem; color: var(--cam-chu); }
.cto .dan { margin-top: 20px; color: var(--chu-phu); max-width: 52ch; }
.cto h3 { font-family: var(--chu); font-weight: 600; font-size: 1rem; letter-spacing: 0; margin: 32px 0 12px; }
.cto ul { display: grid; gap: 10px; }
.cto li { position: relative; padding-left: 30px; }
.cto .gom li::before { content: ""; position: absolute; left: 3px; top: .4em; width: 7px; height: 13px; border: solid var(--cam-chu); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.cto .khong li { color: var(--chu-phu); }
.cto .khong li::before { content: ""; position: absolute; left: 1px; top: .86em; width: 14px; height: 3px; background: var(--chu-phu); opacity: .55; }
.so-sanh-khung { background: var(--trang); border: 1px solid var(--vien); border-radius: var(--bo-the); box-shadow: var(--bong-the); overflow-x: auto; }
.so-sanh { width: 100%; border-collapse: collapse; min-width: 520px; font-size: .98rem; line-height: 1.55; }
.so-sanh caption { text-align: left; padding: 24px 24px 10px; font-weight: 600; font-size: 1.35rem; }
.so-sanh th, .so-sanh td { padding: 16px 24px; text-align: left; vertical-align: top; border-top: 1px solid var(--vien); }
.so-sanh thead th { font-weight: 600; font-size: .9rem; color: var(--chu-phu); }
.so-sanh thead th:last-child { color: var(--cam-chu); }
.so-sanh tbody th { font-weight: 600; width: 22%; }
.so-sanh td:last-child { background: var(--cam-nhat); font-weight: 500; }

/* ---------- hỏi đáp ---------- */
.hoi-dap { max-width: 860px; }
.hoi { border-top: 1px solid var(--vien); }
.hoi:last-child { border-bottom: 1px solid var(--vien); }
.hoi summary { list-style: none; cursor: pointer; padding: 24px 56px 24px 0; font-weight: 600; font-size: clamp(1.2rem, 1.9vw, 1.45rem); line-height: 1.3; position: relative; }
.hoi summary::-webkit-details-marker { display: none; }
.hoi summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border: solid var(--cam-chu); border-width: 0 3px 3px 0; transform: rotate(45deg); transition: transform .22s ease, margin-top .22s ease; }
.hoi[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.hoi p { padding: 0 56px 26px 0; color: var(--chu-phu); max-width: 62ch; }

/* ---------- liên hệ (khối tối) ---------- */
.lien-he .vung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 84px); align-items: start; }
.lien-he h2 { font-size: clamp(2rem, 3.6vw, 3rem); max-width: 14ch; }
.lien-he .phu { margin-top: 20px; max-width: 42ch; font-size: 1.1rem; }
.lien-he address { font-style: normal; margin-top: 36px; display: grid; gap: 14px; }
.lien-he address span { display: block; font-size: .88rem; font-weight: 600; color: var(--cam-sang); }
.lien-he address a { text-decoration-color: var(--cam); text-underline-offset: 4px; }
.mau { background: var(--trang); color: var(--chu-chinh); border-radius: var(--bo-the); box-shadow: var(--bong-noi); padding: clamp(22px, 3vw, 36px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mau .o { display: grid; gap: 6px; }
.mau .rong { grid-column: 1 / -1; }
.mau label { font-weight: 600; font-size: .92rem; }
.mau input, .mau textarea { width: 100%; background: var(--nen); border: 1px solid var(--vien-o); border-radius: var(--bo-o); padding: 12px 14px; min-height: 48px; }
.mau textarea { min-height: 124px; resize: vertical; }
.mau input:focus, .mau textarea:focus { outline: 3px solid var(--chu-chinh); outline-offset: 1px; border-color: transparent; }
.mau .bao { grid-column: 1 / -1; padding: 14px 16px; border-radius: var(--bo-o); font-size: .96rem; }
.mau .bao[hidden] { display: none; }
.mau .bao.xong { background: var(--ok-nen); color: var(--ok-chu); }
.mau .bao.loi { background: var(--loi-nen); color: var(--loi-chu); }
.mau .bao a { color: inherit; }
.mau .nut-cam { justify-self: start; }
.mau .dong-y { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: .9rem; line-height: 1.55; color: var(--chu-phu); }
.mau .dong-y input { width: 22px; min-height: 22px; height: 22px; flex: none; margin: 1px 0 0; padding: 0; accent-color: var(--cam-chu); }
.mau .dong-y a { color: var(--chu-chinh); text-underline-offset: 3px; }
.mau :focus-visible { outline-color: var(--chu-chinh); }

/* ---------- chân trang tối ---------- */
.chan-trang { background: var(--muc); color: var(--sang-tren-than); padding: clamp(48px, 6vw, 80px) 0 36px; }
.chan-trang .vung { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.chan-trang .logo img { height: 48px; }
.chan-trang p, .chan-trang address { margin-top: 16px; font-style: normal; font-size: .96rem; max-width: 42ch; }
.chan-trang h4 { font-family: var(--chu); font-weight: 600; font-size: .95rem; letter-spacing: 0; color: #fff; margin-bottom: 12px; }
.chan-trang li + li { margin-top: 8px; }
.chan-trang a { text-decoration: none; }
.chan-trang a:hover { text-decoration: underline; text-decoration-color: var(--cam); text-underline-offset: 4px; }
.chan-trang .ban-quyen { display: flex; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: .9rem; }

/* ---------- co giãn ---------- */
@media (max-width: 1020px) {
  .hero .vung, .dau-muc, .dv, .cto, .lien-he .vung { grid-template-columns: minmax(0, 1fr); }
  .cac-buoc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero h1 { max-width: 20ch; }
  .dv .loi-hua { padding-left: 0; max-width: 44ch; }
  .chan-trang .vung { grid-template-columns: 1fr 1fr; }
  .chan-trang .vung > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .nut-menu { display: block; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--cam); box-shadow: 0 10px 18px rgba(35, 26, 18, .16); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--le) 20px; display: none; margin: 0; }
  .menu.mo { display: flex; }
  .menu a { padding: 14px 0; border-bottom: 1px solid rgba(26, 20, 16, .22); font-size: 1.05rem; }
  .menu a.nut-muc { margin-top: 14px; padding: 0 20px; border-bottom: 0; }
}
@media (max-width: 640px) {
  .cac-buoc { grid-template-columns: minmax(0, 1fr); }
  .dv dl, .mau { grid-template-columns: minmax(0, 1fr); }
  .dai-cn li { padding: 0 14px; }
  .chan-trang .vung { grid-template-columns: minmax(0, 1fr); }
  .hoi summary { padding-right: 40px; }
  .hoi p { padding-right: 0; }
}
/* =====================================================================
   CHUYỂN ĐỘNG (design system 3.0). Học enosta: không thư viện, chỉ CSS + IntersectionObserver.
   Mặc định (tắt JavaScript hoặc chọn giảm chuyển động): mọi thứ hiện sẵn ở trạng thái cuối.
   Trạng thái ẩn ban đầu chỉ có dưới html.co-chuyen-dong, lớp do tictag-motion.js thêm.
   ===================================================================== */
@property --goc { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- 1. hiện lên khi vào khung nhìn, lần lượt, một đường cong chung ---------- */
.co-chuyen-dong .hien, .co-chuyen-dong .hien-doi > * { opacity: 0; transform: translate3d(0, var(--khoang-hien), 0); }
.co-chuyen-dong .hien:focus-within, .co-chuyen-dong .hien:focus, .co-chuyen-dong .hien-doi > *:focus-within { opacity: 1; transform: none; }
.co-chuyen-dong .hien.da-hien, .co-chuyen-dong .hien-doi > .da-hien {
  opacity: 1; transform: none;
  transition: opacity var(--vao) var(--ease), transform var(--vao) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--buoc-tre));
}

/* ---------- 2. cảnh mở đầu: tiêu đề trồi từng từ, thẻ chọn nảy vào ---------- */
.hero { position: relative; overflow: clip; }
.hero .vung { position: relative; z-index: 1; }
.co-chuyen-dong .hero h1 .tu { display: inline-block; overflow: hidden; vertical-align: top; padding: .24em 0 .16em; margin: -.24em 0 -.16em; }
.co-chuyen-dong .hero h1 .tu > span { display: inline-block; transform: translate3d(0, 112%, 0); animation: tu-len .85s var(--ease) forwards; animation-delay: calc(140ms + var(--i, 0) * 60ms); }
@keyframes tu-len { to { transform: none; } }
.co-chuyen-dong .hero .phu, .co-chuyen-dong .hero .hanh-dong { opacity: 0; animation: cv-vao .75s var(--ease) forwards; }
.co-chuyen-dong .hero .phu { animation-delay: .62s; }
.co-chuyen-dong .hero .hanh-dong { animation-delay: .78s; }
@keyframes cv-vao { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.co-chuyen-dong .bo-chon { opacity: 0; animation: bang-vao .95s var(--ease) .4s forwards; }
@keyframes bang-vao { from { opacity: 0; transform: translate3d(32px, 0, 0) scale(.985); } to { opacity: 1; transform: none; } }
.co-chuyen-dong .bo-chon .the { animation: the-vao .6s var(--ease) both; animation-delay: calc(.85s + var(--i, 0) * 95ms); }
.co-chuyen-dong .bo-chon .the:has(input:checked) { animation: the-vao .6s var(--ease) both, lac var(--lac) ease-out; animation-delay: calc(.85s + var(--i, 0) * 95ms), 0s; }
@keyframes the-vao { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.97); } to { opacity: 1; transform: none; } }
.co-chuyen-dong .ket-qua { animation: cv-vao .5s var(--ease) both; }

/* hình trang trí: những tấm thẻ (tag) nhạt trôi sau tiêu đề */
.hero .tang-nen { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero .tang-nen svg { position: absolute; width: clamp(180px, 22vw, 320px); height: auto; color: var(--vien); }
.hero .tang-nen circle { stroke: var(--cam); opacity: .55; }
.hero .tang-nen .the-1 { left: -4%; bottom: -6%; transform: rotate(-14deg); }
.hero .tang-nen .the-2 { left: 38%; top: -10%; width: clamp(120px, 14vw, 200px); transform: rotate(18deg); }
.co-chuyen-dong .hero .tang-nen svg { animation: troi 16s ease-in-out infinite alternate; }
.co-chuyen-dong .hero .tang-nen .the-2 { animation-duration: 21s; animation-direction: alternate-reverse; }
.hero.ngoai-man-hinh .tang-nen svg { animation-play-state: paused; }
@keyframes troi { from { translate: 0 0; rotate: 0deg; } to { translate: 14px -22px; rotate: 6deg; } }

/* ---------- 3. chuyển cảnh theo cuộn: khối tối nở từ thẻ bo góc ra tràn ngang, rồi thu lại ---------- */
.khoi-toi { background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.6px), var(--than); background-size: 26px 26px, auto; }
@supports (animation-timeline: view()) {
  .co-chuyen-dong .khoi-toi { animation: nen-ra linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes nen-ra {
    0%   { clip-path: inset(0 var(--le-nen) round var(--bo-nen)); }
    22%  { clip-path: inset(0 0 round 0); }
    78%  { clip-path: inset(0 0 round 0); }
    100% { clip-path: inset(0 var(--le-nen) round var(--bo-nen)); }
  }
  /* thanh tiến độ cuộn dưới dải đầu trang */
  .co-chuyen-dong .dau-trang::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--muc); transform-origin: 0 50%; animation: tien-do linear both; animation-timeline: scroll(root block); }
  @keyframes tien-do { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- 4. dải chạy vô tận (chữ lớn và tên công cụ) ---------- */
.chay-chu { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.chay-chu .duong { display: flex; width: max-content; animation: chay var(--chay-chu) linear infinite; }
.chay-chu.dao-chieu .duong { animation-direction: reverse; }
.chay-chu ul { display: flex; flex: none; flex-wrap: nowrap; gap: 0; align-items: center; }
.chay-chu:hover .duong, .chay-chu:focus-within .duong, .chay-chu.ngoai-man-hinh .duong { animation-play-state: paused; }
@keyframes chay { to { transform: translate3d(-50%, 0, 0); } }
.dai-chu { padding: clamp(28px, 4vw, 48px) 0; border-block: 1px solid var(--vien); background: var(--kem); }
.dai-chu li { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); padding-right: clamp(20px, 3vw, 44px); font-size: clamp(1.7rem, 4.2vw, 3.2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; white-space: nowrap; }
.dai-chu li::after { content: ""; flex: none; width: .42em; height: .42em; border-radius: 50%; border: 3px solid var(--cam); }
.dai-cn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 28px; align-items: center; padding: 0; }
.dai-cn .vung { display: contents; }
.dai-cn > .vung > p { grid-column: 1; margin: 0; padding: 22px 0 22px var(--le); }
.dai-cn .chay-chu { grid-column: 2; }
.dai-cn .chay-chu li { padding: 22px 26px; font-weight: 500; font-size: 1.02rem; border-left: 1px solid var(--vien); white-space: nowrap; }

/* ---------- 5. thẻ dịch vụ: ánh sáng theo chuột và viền cam chạy quanh ---------- */
.dv { position: relative; }
.dv::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: conic-gradient(from var(--goc), transparent 0 68%, var(--cam) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: quay 3.6s linear infinite; animation-play-state: paused; }
.dv:hover::before, .dv:focus-within::before { opacity: 1; animation-play-state: running; }
@keyframes quay { to { --goc: 360deg; } }
.diem-sang { position: relative; }
.diem-sang > .anh-sang { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(242, 101, 34, .13), transparent 60%); }
.bo-chon.diem-sang > .anh-sang { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 127, 69, .20), transparent 62%); }
.diem-sang:hover > .anh-sang { opacity: 1; }
.diem-sang > :not(.anh-sang) { position: relative; z-index: 1; }

/* ---------- 6. nút: vệt sáng quét qua khi rê chuột ---------- */
.nut-cam, .nut-muc { position: relative; overflow: hidden; isolation: isolate; }
.nut-cam::after, .nut-muc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); transform: translate3d(-120%, 0, 0); transition: transform .7s var(--ease); }
.nut-cam:hover::after, .nut-muc:hover::after { transform: translate3d(120%, 0, 0); }

/* ---------- 7. đầu trang thu nhỏ khi cuộn ---------- */
.dau-trang .vung { transition: min-height .28s var(--ease); }
.dau-trang.thu-nho .vung { min-height: 56px; }
.dau-trang.thu-nho { box-shadow: 0 6px 22px rgba(35, 26, 18, .22); }
.dau-trang.thu-nho .logo img { height: 34px; }
.dau-trang .logo img { transition: height .28s var(--ease); }
.canh-dau { position: absolute; top: 0; left: 0; width: 1px; height: 28px; pointer-events: none; }

/* ---------- 8. hỏi đáp mở êm ---------- */
@supports (interpolate-size: allow-keywords) {
  .hoi-dap { interpolate-size: allow-keywords; }
  .hoi::details-content { block-size: 0; overflow: hidden; transition: block-size .38s var(--ease), content-visibility .38s allow-discrete; }
  .hoi[open]::details-content { block-size: auto; }
}

/* ---------- 9. hình minh hoạ tự vẽ nét ---------- */
.minh-hoa { margin-top: 26px; background: var(--kem); border-radius: var(--bo-the); padding: 14px; }
.minh-hoa svg { width: 100%; max-width: 460px; height: auto; display: block; overflow: visible; margin-inline: auto; }
.minh-hoa text { font-family: var(--chu); font-size: 13px; font-weight: 600; fill: var(--chu-chinh); }
.minh-hoa .nhat { fill: var(--chu-phu); font-weight: 500; }
.minh-hoa .khung { fill: var(--trang); stroke: var(--vien); stroke-width: 1.2; }
.minh-hoa .khung-cam { fill: var(--cam); stroke: none; }
.minh-hoa .khung-toi { fill: var(--than-2); }
.minh-hoa .net { fill: none; stroke: var(--xam-logo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.minh-hoa .net-cam { stroke: var(--cam); stroke-width: 2.4; }
.minh-hoa .lo { fill: var(--trang); stroke: var(--cam); stroke-width: 2.4; }
.minh-hoa .cham { fill: var(--cam); }
.minh-hoa .chu-trang { fill: #fff; }
.minh-hoa .chu-muc { fill: var(--muc); }
.minh-hoa .vien-cam { fill: var(--cam-nhat); stroke: none; }
.minh-hoa .chu-cam { fill: var(--cam-chu); }
.co-chuyen-dong .minh-hoa .net { stroke-dasharray: 1; stroke-dashoffset: 1; }
.co-chuyen-dong .minh-hoa .nut-hinh { opacity: 0; transform: scale(.9); transform-box: fill-box; transform-origin: center; }
.co-chuyen-dong .minh-hoa.dang-ve .net { animation: ve 1s var(--ease) forwards; animation-delay: calc(.2s + var(--i, 0) * .14s); }
.co-chuyen-dong .minh-hoa.dang-ve .nut-hinh { animation: nay .5s var(--ease) forwards; animation-delay: calc(var(--i, 0) * .12s); }
@keyframes ve { to { stroke-dashoffset: 0; } }
@keyframes nay { to { opacity: 1; transform: none; } }
.minh-hoa .cham { offset-rotate: 0deg; opacity: 0; }
.co-chuyen-dong .minh-hoa.dang-ve .cham { animation: di 2.8s linear infinite; animation-delay: calc(1.4s + var(--i, 0) * .55s); }
.co-chuyen-dong .minh-hoa.ngoai-man-hinh .cham { animation-play-state: paused; }
@keyframes di { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.co-chuyen-dong .minh-hoa .cham { animation-fill-mode: both; }

/* ---------- 10. tiêu đề tách từ: để lại chữ cho trình đọc màn hình ---------- */
.hero h1 [aria-hidden="true"] { display: inline; }

@media (max-width: 860px) {
  .hero .tang-nen .the-2 { display: none; }
  .diem-sang > .anh-sang { display: none; }
  .dai-cn { grid-template-columns: minmax(0, 1fr); }
  .dai-cn > .vung > p { grid-column: 1; padding: 18px var(--le) 0; }
  .dai-cn .chay-chu { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .chay-chu ul[aria-hidden="true"] { display: none; }
  .chay-chu { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .chay-chu .duong { width: auto; }
  .minh-hoa .cham { display: none; }
  .nut-cam::after, .nut-muc::after { display: none; }
}

/* ---------- ba cấp số của doanh nghiệp (số hoá thông tin, số hoá quy trình, chuyển đổi số) ---------- */
.cap-so { background: var(--trang); border-block: 1px solid var(--vien); }
.cap-so .bac-thang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bac { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo-the); padding: clamp(22px, 2.6vw, 34px); box-shadow: var(--bong-the); }
@supports (grid-template-rows: subgrid) {
  .bac { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 10px; }
}
@supports not (grid-template-rows: subgrid) {
  .bac .dau-hieu { margin-top: auto; }
}
.bac .cap-nhan { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9rem; color: var(--cam-chu); }
.bac .cap-nhan::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cam); }
.bac h3 { font-size: var(--co-h3-lon); }
.bac .ten-en { color: var(--chu-phu); font-weight: 500; font-size: .95rem; margin-top: -4px; }
.bac .mo-mau { margin: 8px 0 4px; }
.bac .mo-ta { color: var(--chu-chinh); }
.bac .dau-hieu { padding-top: 16px; border-top: 1px solid var(--vien); color: var(--chu-phu); font-size: .95rem; }
.bac .dau-hieu b { display: block; color: var(--cam-chu); font-size: .85rem; margin-bottom: 4px; }
.bac .the-kep { align-self: flex-start; padding: 6px 14px; border-radius: var(--bo-nut); border: 1.5px dashed var(--cam); color: var(--cam-chu); font-weight: 600; font-size: .85rem; }
.bac:not(:last-child)::after { content: ""; position: absolute; top: 46%; right: -20px; width: 20px; height: 20px; z-index: 2; background: var(--cam); clip-path: polygon(0 28%, 55% 28%, 55% 0, 100% 50%, 55% 100%, 55% 72%, 0 72%); }
.bac-3 { background: var(--than); background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.6px), var(--than); background-size: 26px 26px, auto; color: #fff; border-color: transparent; box-shadow: var(--bong-noi); }
.bac-3 .cap-nhan { color: var(--cam-sang); }
.bac-3 .ten-en, .bac-3 .dau-hieu { color: var(--sang-tren-than); }
.bac-3 .mo-ta { color: #fff; }
.bac-3 .dau-hieu { border-top-color: rgba(255, 255, 255, .18); }
.bac-3 .dau-hieu b { color: var(--cam-sang); }
.bac-3 .the-kep { border: 0; background: var(--cam); color: var(--muc); }
.bac .minh-hoa { background: var(--trang); }
.bac-3 .minh-hoa { background: rgba(255, 255, 255, .07); }
.bac-3 .minh-hoa .net-icon { stroke: var(--sang-tren-than); }
.minh-hoa .net-icon { fill: none; stroke: var(--chu-chinh); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.minh-hoa .mui-ten { fill: none; stroke: var(--cam); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.minh-hoa .sang { fill: var(--cam); stroke: none; }
.minh-hoa .net-icon.cam { stroke: var(--cam); }
.co-chuyen-dong .minh-hoa .net-icon, .co-chuyen-dong .minh-hoa .mui-ten { stroke-dasharray: 1; stroke-dashoffset: 1; }
.co-chuyen-dong .minh-hoa.dang-ve .net-icon, .co-chuyen-dong .minh-hoa.dang-ve .mui-ten { animation: ve 1s var(--ease) forwards; animation-delay: calc(.1s + var(--i, 0) * .13s); }
.co-chuyen-dong .minh-hoa .sang { opacity: 0; transform-box: fill-box; transform-origin: center; }
.co-chuyen-dong .minh-hoa.dang-ve .sang { animation: nay .6s var(--ease) forwards, nhap 2.4s ease-in-out 2.2s infinite; animation-delay: calc(var(--i, 0) * .13s), calc(2.2s + var(--i, 0) * .13s); }
.co-chuyen-dong .minh-hoa.ngoai-man-hinh .sang { animation-play-state: paused; }
@keyframes nhap { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.co-so { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 3.5vw, 44px); }
.co-so figure { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border-left: 3px solid var(--cam); background: var(--nen); border-radius: 0 var(--bo-chon) var(--bo-chon) 0; }
.co-so blockquote { margin: 0; font-weight: 600; font-size: 1.05rem; line-height: 1.5; letter-spacing: -0.01em; }
.co-so figcaption { margin-top: auto; font-size: .88rem; color: var(--chu-phu); line-height: 1.5; }
.co-so figcaption a { color: var(--cam-chu); font-weight: 600; text-underline-offset: 3px; }
.tieu-nho { margin-top: clamp(40px, 5vw, 64px); font-size: var(--co-h3-lon); max-width: 26ch; }
.tieu-nho + p { margin-top: 10px; color: var(--chu-phu); max-width: 56ch; }
.ghi-nguon { margin-top: 14px; font-size: .88rem; color: var(--chu-phu); }
.nam-tru { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 4vw, 52px); }
.nam-tru li { position: relative; background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo-chon); padding: 18px 18px 20px; font-size: .94rem; line-height: 1.55; color: var(--chu-phu); transition: background-color var(--nhanh) ease, box-shadow var(--nhanh) ease, translate var(--nhanh) var(--ease); }
.nam-tru li::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--cam); margin-bottom: 12px; }
.nam-tru li b { display: block; color: var(--chu-chinh); font-weight: 600; font-size: 1rem; margin-bottom: 4px; line-height: 1.35; }
.nam-tru li:hover { translate: 0 -4px; background: var(--trang); box-shadow: var(--bong-the); }
.cau-noi { margin-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px clamp(24px, 5vw, 80px); align-items: center; }
.cau-noi h3 { font-size: var(--co-h3-lon); max-width: 26ch; margin-bottom: 14px; }
.cau-noi p { color: var(--chu-phu); max-width: 54ch; }
.cau-noi ul { display: grid; gap: 10px; }
.cau-noi li { padding: 14px 0; border-top: 1px solid var(--vien); }
.cau-noi li:last-child { border-bottom: 1px solid var(--vien); }
.cau-noi li a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--cam); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.cau-noi li a:hover { text-decoration-color: currentColor; }
.cau-noi li span { display: block; color: var(--chu-phu); font-size: .95rem; margin-top: 2px; }

@media (max-width: 1020px) {
  .cap-so .bac-thang { grid-template-columns: minmax(0, 1fr); }
  .bac:not(:last-child)::after { top: auto; right: auto; bottom: -20px; left: 50%; margin-left: -10px; transform: rotate(90deg); }
  .nam-tru { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-so { grid-template-columns: minmax(0, 1fr); }
  .cau-noi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .nam-tru { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}