/* ===== Bổ sung cho website (ngoài template gốc style.css) ===== */

/* Menu điện thoại: mỗi nhóm xổ xuống danh sách trang thật.
   Tiền tố :root:not(#_) để thắng phần reset trong shell.css ở trang con */
:root:not(#_) .mnav__group summary { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 22px; font-weight: 700; color: var(--black); cursor: pointer; list-style: none; }
:root:not(#_) .mnav__group summary::-webkit-details-marker { display: none; }
:root:not(#_) .mnav__group summary i { font-style: normal; font-size: 12px; color: var(--red); }
:root:not(#_) .mnav__group summary svg { width: 20px; height: 20px; margin-left: auto; align-self: center; color: var(--gray); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: rotate .3s; }
:root:not(#_) .mnav__group[open] summary svg { rotate: 180deg; }
:root:not(#_) .mnav__sub { list-style: none; margin: 0; padding: 6px 0 10px 26px; border-bottom: 1px solid var(--line); }
:root:not(#_) .mnav__list .mnav__sub a { padding: 10px 0; border: 0; font-size: 16px; font-weight: 500; color: var(--text); }
:root:not(#_) .mnav__cta { display: grid; place-items: center; height: 52px; border-radius: 15px; border: 1.5px solid var(--red); color: var(--red); font-weight: 700; }

/* Logo trong các ô giải pháp có link riêng */
.pillar__logos a { display: contents; }

/* Form liên hệ: trạng thái đang gửi / lỗi máy chủ */

/* ===== Trang con còn dùng giao diện cũ (body.vw-legacy) ===== */
/* Trang chủ để header đè lên slider; trang con thì header nằm trên nội dung */
:root:not(#_) body.vw-legacy .header { margin-bottom: 0; }
/* Trang con đã có sẵn nút hotline nổi của giao diện cũ ở cùng góc */
:root:not(#_) body.vw-legacy .float-call { display: none; }

/* ===== Popup "Hotline tư vấn" (layouts/_vw_popup.php) – chỉ có ở trang giao diện mới ===== */
.vpop { position: fixed; inset: 0; width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 34px 30px 30px; border: 0; border-radius: 24px; overflow: hidden auto; isolation: isolate; color: #fff; font-family: var(--font); background: radial-gradient(420px 300px at 100% 0%, rgba(255,120,110,.45), transparent 70%), linear-gradient(150deg, #c9242b, var(--red) 45%, var(--red-dark)); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
.vpop::backdrop { background: rgba(10,13,36,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vpop[open] { animation: vpopIn .45s var(--ease) both; }
@keyframes vpopIn { from { opacity: 0; translate: 0 24px; scale: .97; } }
.vpop__hex { position: absolute; right: -70px; top: -60px; z-index: -1; width: 240px; height: 212px; fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1; }
.vpop__close { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--red); background: #fff; transition: transform .3s var(--ease); }
.vpop__close:hover { transform: rotate(90deg); }
.vpop__close svg { width: 18px; height: 18px; stroke-width: 2.4; }
.vpop__title { font-size: 19px; font-weight: 500; }
.vpop__phone { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.3); font-size: 30px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: #fff; }
.vpop__phone span { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff; }
.vpop__phone svg { width: 22px; height: 22px; stroke-width: 2; }
.vpop__lead { margin-top: 18px; font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.92); }
.vpop__form { display: grid; gap: 12px; margin-top: 18px; }
.vpop__field { display: block; }
.vpop__field span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vpop__field :is(input, select) { display: block; width: 100%; height: 48px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 12px; font: 500 15.5px var(--font); color: var(--black); background: #fff; outline: 0; transition: border-color .25s, box-shadow .25s; }
.vpop__field select { padding-right: 40px; -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23727272' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 20px no-repeat; }
.vpop__field input::placeholder { color: #8a8a8a; }
.vpop__field :is(input, select):focus-visible { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.vpop__field small { display: none; margin-top: 6px; font-size: 13px; color: #ffe1e1; }
.vpop__field.is-err :is(input, select) { border-color: #ffb3b3; }
.vpop__field.is-err small { display: block; }
.vpop__fail { margin: 0; font-size: 13.5px; color: #ffe1e1; }
.vpop__submit { height: 50px; margin-top: 4px; border-radius: 100px; font-size: 15.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--red); background: #fff; transition: transform .25s var(--ease), box-shadow .25s; }
.vpop__submit:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(0,0,0,.6); }
.vpop__submit:focus-visible, .vpop__close:focus-visible, .vpop__phone:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vpop.is-sending .vpop__submit { opacity: .75; pointer-events: none; cursor: progress; }
.vpop:focus, .vpop:focus-visible { outline: 0; } /* bỏ viền xanh quanh hộp thoại khi vừa mở */
.vpop__done { margin-top: 20px; padding: 18px; border-radius: 14px; font-size: 15.5px; line-height: 1.6; color: var(--black); background: #fff; }
@media (max-width: 480px) {
  .vpop { padding: 30px 20px 22px; border-radius: 20px; }
  .vpop__phone { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .vpop[open] { animation: none; } }

/* ============ LIÊN HỆ (#lien-he) – nền sáng, đỏ chỉ làm điểm nhấn ============ */
.contact { position: relative; padding: 96px 0; color: #fff; background: radial-gradient(900px 420px at 12% 0%, rgba(255,255,255,.14), transparent 70%), radial-gradient(800px 420px at 100% 100%, rgba(0,0,0,.22), transparent 70%), linear-gradient(160deg, #cf2229, var(--red) 55%, #8f0a10); }
.contact .badge { border-color: #fff; }
.contact { overflow: hidden; }
.contact > .container { position: relative; z-index: 1; }
.contact .hexfield { height: 100%; }
.contact .cform { color: var(--black); background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.contact .cform__done { background: #fff; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 80px; align-items: center; }
.contact__title { margin-top: 26px; font-size: 36px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.contact__title em { font-style: normal; color: #ffd9b8; white-space: nowrap; }
.contact__lead { max-width: 500px; margin-top: 18px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.86); }

.advisor { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; align-items: center; max-width: 500px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.28); }
.advisor__photo { grid-row: span 2; position: relative; overflow: hidden; width: 64px; height: 64px; border-radius: 50%; background: #fff; }
.advisor__photo img { position: absolute; left: 50%; top: 5px; width: 104%; max-width: none; height: auto; translate: -50% 0; }
.advisor__who { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.8); }
.advisor__who b { display: block; font-size: 15px; color: var(--black); }
.advisor__reach { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-top: 2px; font-size: 14.5px; }
.advisor__reach a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); transition: border-color .2s; }
.advisor__reach a:hover { border-color: currentColor; }
.advisor__call { font-size: 19px; font-weight: 700; letter-spacing: .01em; }

.cform { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 32px; border-radius: 20px; background: var(--beige); }
.cform__head { grid-column: 1 / -1; margin-bottom: 6px; }
.cform__head h3 { font-size: 21px; font-weight: 700; }
.cform__head p { margin-top: 4px; font-size: 13.5px; color: var(--gray); }
.cform i { font-style: normal; color: var(--red); }
.field { position: relative; display: block; grid-column: 1 / -1; }
.field--half { grid-column: auto; }
.field input, .field select {
  width: 100%; height: 56px; padding: 20px 16px 6px; border: 1px solid #e3ded3; border-radius: 10px;
  background: #fff; color: var(--black); font: inherit; font-size: 15px; outline: 0; transition: border-color .2s, box-shadow .2s;
}
.field select {
  padding-right: 42px; cursor: pointer; appearance: none; -webkit-appearance: none; text-overflow: ellipsis;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23727272' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
}
.field input:hover, .field select:hover { border-color: #cfc8b9; }
.field input:focus, .field select:focus { border-color: var(--black); box-shadow: 0 0 0 3px rgba(54,54,54,.08); }
.field select:has(option[value=""]:checked) { color: var(--gray); }
.field__label { position: absolute; left: 17px; top: 18px; font-size: 14.5px; color: var(--gray); pointer-events: none; transition: top .2s, font-size .2s; }
.field:has(input:focus, input:not(:placeholder-shown)) .field__label, .field--select .field__label { top: 8px; font-size: 11.5px; }
.field__err { display: none; margin: 5px 0 0 2px; font-size: 12px; color: var(--red); }
.field.is-err input, .field.is-err select { border-color: var(--red); animation: shake .4s; }
.field.is-err .field__err { display: block; }
.cform__submit { grid-column: 1 / -1; margin-top: 8px; }
.cform__submit .btn { width: 100%; height: 54px; justify-content: space-between; padding-left: 24px; font-size: 16px; filter: none; }
.cform__submit .btn__ic { width: 46px; height: 46px; }
.cform.is-sending .cform__submit { opacity: .6; pointer-events: none; }
.cform__fail { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--red); }
.cform__done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; border-radius: inherit; text-align: center; background: var(--beige); opacity: 0; pointer-events: none; transition: opacity .4s; font-size: 16px; line-height: 1.6; }
.cform.is-done .cform__done { opacity: 1; pointer-events: auto; }
.cform__done svg { stroke: #1f8a4c; stroke-width: 2.5; }
.cform__done circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.cform__done path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.cform.is-done .cform__done circle { animation: draw .6s .1s forwards; }
.cform.is-done .cform__done path { animation: draw .4s .6s forwards; }


@media (max-width: 1024px) {
  .contact { padding: 72px 0; }
  .contact__grid { grid-template-columns: 1fr; gap: 44px; }
  .contact__title, .contact__lead, }
@media (max-width: 640px) {
  .contact { padding: 56px 0; }
  .contact__title { margin-top: 20px; }
  .contact__title br { display: none; }
  .cform { grid-template-columns: 1fr; padding: 22px 18px; border-radius: 16px; }
  .field--half { grid-column: 1 / -1; }
}

/* ============ MENU KIỂU "THANH RỘNG" KHI CUỘN (body.hdr-bar – bật/tắt bằng $headerMode trong layouts/main.php) ============
   Khi cuộn: nền trắng hết chiều ngang hiện ra sau menu, bám mép trên; vạch đỏ ở mép trên chạy theo tiến độ cuộn.
   Chỉ chuyển bằng opacity/transform (không đổi padding, max-width) để lúc đổi trạng thái không bị giật:
   viên thuốc giữ nguyên vị trí ngang, chỉ mất nền riêng và trượt lên sát mép trên. */
.hdr-bar .header { --barh: 58px; --lift: 12px; }
.hdr-bar .header::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--barh); pointer-events: none;
  background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(20,20,50,.08), 0 14px 30px -20px rgba(20,20,50,.4);
  opacity: 0; transition: opacity .3s;
}
.hdr-bar .header.is-scrolled::before { opacity: 1; }
/* $headerMode = 'flat': thanh trắng luôn bám mép trên, cao hơn và hơi trong (nhoè nền) để thấy nội dung trượt phía dưới */
.hdr-flat .header::before { background: rgba(255,255,255,.86); }
@media (min-width: 1025px) {
  .hdr-flat .header { --barh: 68px; }
  .hdr-flat .header.is-scrolled .nav { height: 68px; }
  .hdr-flat .header.is-scrolled .nav__cta { height: 46px; }
  .hdr-bar.hdr-flat .header.is-scrolled .mega { top: 58px; }
  .hdr-bar.hdr-flat .subnav { top: 108px; }
}
@media (min-width: 1201px) {
  .hdr-flat .header.is-scrolled .nav__logo { width: 148px; }
  .hdr-flat .nav { padding: 0 20px; } /* khung 1200px, lề 20px mỗi bên → logo và nút thẳng mép nội dung 1160px và menu con */
}
.hdr-bar .nav, .hdr-bar .mbar { transition: height .35s var(--ease), transform .35s var(--ease), background .3s, box-shadow .3s; }
.hdr-bar .header.is-scrolled .nav, .hdr-bar .header.is-scrolled .mbar {
  background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: translateY(calc(var(--lift) * -1));
}
.hdr-bar .header.is-scrolled .mega { top: 48px; }
.hprogress { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 3px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .3s; }
.hprogress i { display: block; height: 100%; background: linear-gradient(90deg, #e0333a, var(--red)); transform-origin: left; transform: scaleX(var(--p, 0)); }
.header.is-scrolled .hprogress { opacity: 1; }
.hdr-bar .readbar { display: none; }
@media (max-width: 1024px) {
  .hdr-bar .header { --barh: 60px; --lift: 10px; }
}

/* Theo dõi chuyển đổi (GTM): chữ ẩn "ĐĂNG KÝ NGAY" trong nút gửi – vẫn nằm trong văn bản của nút nhưng không hiển thị;
   phần tử con của nút không nhận click để mục tiêu click luôn là chính nút (như nút của form cũ). */
.gtm-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cform__submit .btn > * { pointer-events: none; }
.cform__done .alert, .vpop__done .alert { margin: 0; }

/* ============ NÚT "LIÊN HỆ" NỔI (góc dưới trái, mở popup tư vấn) – layouts/_vw_contact_fab.php ============ */
.float-contact {
  position: fixed; left: 20px; bottom: 20px; z-index: 30;
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid #fff; border-radius: 50%;
  background: var(--red); color: #fff; cursor: pointer;
  box-shadow: 0 10px 26px rgba(186,19,26,.4); animation: fcpulse 2.4s infinite;
  transition: bottom .45s var(--ease), transform .25s var(--ease);
}
.float-contact svg { width: 32px; height: 33px; fill: #fff; stroke: none; animation: fcwiggle 2.4s ease-in-out infinite; }
.float-contact:hover { transform: scale(1.06); }
/* Nút gọi hiện ra (sau khi cuộn qua banner) thì nút Liên hệ dời lên trên nó */
.float-call.is-on + .float-contact { bottom: 84px; }
@keyframes fcpulse { 0% { box-shadow: 0 10px 26px rgba(186,19,26,.4), 0 0 0 0 rgba(186,19,26,.45); } 70%, 100% { box-shadow: 0 10px 26px rgba(186,19,26,.4), 0 0 0 14px rgba(186,19,26,0); } }
@keyframes fcwiggle { 0%, 60%, 100% { rotate: 0deg; } 68% { rotate: -9deg; } 76% { rotate: 8deg; } 84% { rotate: -6deg; } 92% { rotate: 4deg; } }
@media (max-width: 1024px) { body.nav-open .float-contact { display: none; } }
@media (prefers-reduced-motion: reduce) { .float-contact, .float-contact svg { animation: none; } }

/* Menu điện thoại: khoá cuộn ở thẻ gốc (không đặt overflow cho body, kẻo thanh menu sticky hết bám màn hình).
   Lặp lại ở đây vì shell.css của các trang giao diện cũ không lấy được quy tắc html.nav-open từ style.css. */
@media (max-width: 1024px) {
  html.nav-open { overflow: hidden; }
  body.nav-open { overflow: visible; }
  .mnav { overscroll-behavior: contain; }
  .header.is-scrolled ~ .mnav { padding-top: 84px; }
}

/* Thanh mục lục bám dưới menu (trang AutoCAD, SketchUp, Google Workspace…): với menu kiểu thanh rộng (cao 58–60px)
   thì bám sát hơn, không để hở như khi menu là viên thuốc nổi. Thanh bám đáy (.subnav--dock, dock trong gws.css) không bị ảnh hưởng. */
.hdr-bar .subnav { top: 98px; } /* thanh cao 0, phần nổi lệch lên 26px → mép trên nằm cách thanh menu 14px */

/* Điện thoại: ẩn thanh mục lục trong trang (.subnav) ở mọi trang – màn hình hẹp không đủ chỗ, người xem cuộn dọc là chính */
@media (max-width: 680px) {
  .vw-page .subnav { display: none; }
}

/* Logo: vệt sáng lướt qua, cắt theo đúng hình logo (mask bằng chính tệp logo – biến --logo đặt ở thẻ a) */
.nav__logo, .mbar__logo { position: relative; }
.mbar__logo { display: block; }
.nav__logo::after, .mbar__logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.9) 50%, transparent 58%) 150% 0 / 250% 100% no-repeat;
  -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat;
  animation: logo-shine 5s var(--ease, ease) 1.2s infinite;
}
.nav__logo:hover::after, .mbar__logo:hover::after { animation-duration: 1.1s; animation-delay: 0s; animation-name: logo-shine-once; animation-iteration-count: 1; }
@keyframes logo-shine { 0% { background-position: 150% 0; } 24%, 100% { background-position: -50% 0; } }
@keyframes logo-shine-once { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .nav__logo::after, .mbar__logo::after { animation: none; } }

/* ===== Slide sản phẩm (Google / Microsoft / Lark / Odoo): nhân vật nâng biểu tượng AI trên tay, tương tác với hai màn hình =====
   Chu kỳ 9s: tia sáng chạy từ màn hình về tay → sang khung AI → AI trả lời từng dòng → bấm nút → màn hình báo đã xong.
   Màu quầng sáng và tia lấy theo --a / --b của từng slide. */
.hvis--host { --cyc: 9s; }
/* Hai màn hình nhỏ hơn bản gốc một chút và lùi sang phải để thoáng chỗ cho nhân vật */
.hvis--host .mwin, .hvis--host .lchat { left: 10%; width: 64%; }
.hvis--host .aipanel { width: 272px; padding: 14px; }
.hvis--gw .aipanel { top: 214px; }
/* Màn hình của 3 slide sau cao hơn Gmail: đẩy lên và rút gọn để đáy màn hình không chạm bàn tay */
.hvis--ms .mwin, .hvis--odoo .mwin { top: 24px; }
.hvis--ms .aipanel { top: 200px; }
.hvis--ms .mdoc { position: relative; padding-bottom: 20px; }
.hvis--ms .mdoc b { width: 42%; }
.hvis--ms .mdoc i:nth-last-of-type(-n+2) { display: none; }
.hvis--odoo .aipanel { top: 214px; }
.hvis--odoo .odash { position: relative; }
.hvis--odoo .odash__chart { height: 84px; }
.hvis--lark .lchat { top: 14px; }
.hvis--lark .lchat .lmsg:nth-of-type(4) { display: none; }
.hvis--lark .aipanel { top: 214px; }
/* Nhân vật nhỏ đứng ở góc dưới trái, bàn tay nằm ngay dưới mép màn hình thứ nhất */
.ghost { left: -245px; top: 172px; width: 500px; aspect-ratio: 1000 / 667; pointer-events: none; animation: none; }
.ghost > img { display: block; width: 100%; height: 100%; -webkit-mask: linear-gradient(#000 84%, transparent); mask: linear-gradient(#000 84%, transparent); }
.ghost__halo { position: absolute; left: 40%; top: 46%; width: 62%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 38%, transparent), color-mix(in srgb, var(--b) 16%, transparent) 55%, transparent); }
/* Biểu tượng AI lơ lửng trên lòng bàn tay (toạ độ % theo ảnh nên luôn bám đúng tay) */
.gspark { position: absolute; left: 67.4%; top: 49.5%; width: 38px; height: 38px; translate: -50% -50%; display: grid; place-items: center; }
.gspark::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.75), color-mix(in srgb, var(--b) 50%, transparent) 45%, transparent); animation: gglow 2.6s ease-in-out infinite alternate; }
.gspark img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--a) 70%, transparent)); animation: gfloat 3.2s ease-in-out infinite alternate; }
.hvis--host:hover .gspark::before { inset: -28px; transition: inset .5s var(--ease); }
@keyframes gglow { from { opacity: .55; scale: .85; } to { opacity: 1; scale: 1.1; } }
@keyframes gfloat { from { transform: translateY(3px) rotate(-8deg) scale(.94); } to { transform: translateY(-5px) rotate(8deg) scale(1.06); } }
/* Tia sáng nối: màn hình → tay → khung AI */
.glink { left: 0; top: 0; width: 560px; height: 480px; overflow: visible; pointer-events: none; animation: none; }
.glink path { stroke: color-mix(in srgb, var(--b) 65%, #fff); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 9; opacity: 0; }
.hslide.is-active .glink__in { animation: gbeam var(--cyc) linear infinite; }
.hslide.is-active .glink__out { animation: gbeam var(--cyc) linear infinite; animation-delay: 1.5s; }
@keyframes gbeam { 0%, 4% { opacity: 0; stroke-dashoffset: 0; } 8%, 20% { opacity: .95; } 26%, 100% { opacity: 0; stroke-dashoffset: -110; } }
/* Nhãn "đã xong" hiện trên màn hình ở cuối chu kỳ */
.mrow__ok, .hdone { position: absolute; padding: 5px 10px 5px 24px; border-radius: 100px; background: #e6f4ea; color: #137333; font-size: 11.5px; font-weight: 700; font-style: normal; white-space: nowrap; opacity: 0; box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); }
.mrow__ok::before, .hdone::before { content: ""; position: absolute; left: 9px; top: 50%; width: 9px; height: 5px; border-left: 2px solid; border-bottom: 2px solid; rotate: -45deg; translate: 0 -75%; }
.mrow__ok { right: 12px; top: 50%; translate: 0 -50%; box-shadow: none; }
.hvis--ms .hdone { right: 18px; top: 16px; }
.hvis--lark .hdone { left: 22px; bottom: 24px; }
.hslide.is-active .hvis--lark .lchat__input span { animation: gtime var(--cyc) linear infinite; }
.hvis--odoo .hdone { left: 18px; top: 86px; }
.hslide.is-active .mrow__ok, .hslide.is-active .hdone { animation: gok var(--cyc) var(--ease) infinite; }
@keyframes gok { 0%, 66% { opacity: 0; scale: .8; } 71%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
/* Gmail: thư đang chọn nháy lên lúc bắt đầu, giờ nhận thư nhường chỗ cho nhãn */
.hvis--gw .mrow.is-new { position: relative; }
.hslide.is-active .hvis--gw .mrow.is-new { animation: gmail-pick var(--cyc) ease-in-out infinite; }
@keyframes gmail-pick { 0%, 14%, 100% { background: #eef4ff; } 5% { background: #d7e5ff; } }
.hslide.is-active .hvis--gw .mrow.is-new time { animation: gtime var(--cyc) linear infinite; }
@keyframes gtime { 0%, 64% { opacity: 1; } 68%, 97% { opacity: 0; } 100% { opacity: 1; } }
/* Khung AI trả lời lần lượt từng dòng rồi bấm nút */
.hvis--host .aipanel__out i { transform-origin: left; }
.hslide.is-active .hvis--host .aipanel__out i { animation: aiflow 2.4s linear infinite, gtype var(--cyc) var(--ease) infinite; }
.hslide.is-active .hvis--host .aipanel__out i:nth-child(2) { animation-delay: -.6s, .5s; }
.hslide.is-active .hvis--host .aipanel__out i:nth-child(3) { animation-delay: -1.2s, 1s; }
@keyframes gtype { 0%, 26% { transform: scaleX(0); } 36%, 100% { transform: scaleX(1); } }
.hslide.is-active .hvis--host .aipanel__list li { animation: glist var(--cyc) var(--ease) infinite; }
.hslide.is-active .hvis--host .aipanel__list li:nth-child(2) { animation-delay: .6s; }
@keyframes glist { 0%, 26% { opacity: 0; translate: -8px 0; } 36%, 100% { opacity: 1; translate: 0 0; } }
.hslide.is-active .hvis--host .aipanel__chips span:first-child { animation: gpress var(--cyc) var(--ease) infinite; }
@keyframes gpress { 0%, 58%, 68%, 100% { scale: 1; box-shadow: none; } 62% { scale: .92; box-shadow: 0 0 0 6px color-mix(in srgb, var(--b) 30%, transparent); } }
/* Một cột (tablet): giữ cụm hình gọn ở giữa thay vì dàn hết bề ngang */
@media (max-width: 1024px) { .hvis--host { width: min(100%, 560px); margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
  .gspark::before, .gspark img, .hslide.is-active .glink path, .hslide.is-active .hvis--gw .mrow.is-new, .hslide.is-active .hvis--gw .mrow.is-new time, .hslide.is-active .hvis--lark .lchat__input span,
  .hslide.is-active .hvis--host .aipanel__out i, .hslide.is-active .hvis--host .aipanel__list li,
  .hslide.is-active .hvis--host .aipanel__chips span:first-child { animation: none; }
  .hslide.is-active .mrow__ok, .hslide.is-active .hdone { animation: none; opacity: 0; }
}

/* ===== Bỏ toàn bộ nhãn đầu mục dạng viên thuốc (.badge) phía trên tiêu đề các khối – theo yêu cầu, nhìn thừa.
   Ẩn bằng CSS để áp dụng cho mọi trang một lần; phần tử đứng ngay sau nhãn bỏ luôn khoảng cách trên vốn dành cho nhãn.
   (Trang giao diện cũ còn dùng .badge của Bootstrap nên chỉ ẩn trong trang mới và khối liên hệ.) */
.vw-page .badge, .contact .badge { display: none; }
.vw-page .badge + *, .contact .badge + * { margin-top: 0 !important; }
/* Nhãn nằm riêng trong một khối căn giữa (.center) → khối đó rỗng, phần tử kế tiếp cũng bỏ khoảng cách trên */
.vw-page .center:has(> .badge:only-child) { display: none; }
.vw-page .center:has(> .badge:only-child) + * { margin-top: 0 !important; }