/* v08 · 28/09/2026 — Mọi hiệu ứng :hover chỉ chạy trên desktop ≥1200px có chuột (@media (min-width: 1200px) and (hover: hover)). Mobile/tablet không có hover. */
/* ===================================================================
   Reusable components (ported/refined from the NEXORA demo)
   =================================================================== */

/* ===== Custom cursor — shown ONLY over the footer ===== */
/* footer hides the native cursor; every other section keeps the default cursor */
#footer, #footer * { cursor: none; }

.cursor, .cursor-dot { display: none; }               /* hidden by default */
body.cursor-fx .cursor, body.cursor-fx .cursor-dot { display: block; }

.cursor {
  position: fixed; top: 0; left: 0;
  width: 3.2rem; height: 3.2rem;
  border: 1px solid #fff;                               /* footer is dark → light ring */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  transition: width .3s var(--ease), height .3s var(--ease), background .3s ease, border-color .3s ease;
}
.cursor.is-hover { width: 6rem; height: 6rem; background: var(--primary); border-color: var(--primary); }
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 0.5rem; height: 0.5rem;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
}
@media (max-width: 1199px) { .cursor, .cursor-dot { display: none !important; } #footer, #footer * { cursor: auto; } }

/* ===== Marquee — horizontal auto-scroll (logo strip, etc.) ===== */
.marquee { overflow: hidden; width: 100%; }
.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap, 8rem);
  width: max-content;
  animation: marquee var(--marquee-speed, 32s) linear infinite;
}
@media (min-width: 1200px) and (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }
.marquee--reverse .marquee-track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* logo items inside a marquee */
.marquee-logo {
  height: var(--marquee-h, 4.4rem);
  width: auto;
  flex: none;
  opacity: .55;
  transition: opacity .3s ease;
}
@media (min-width: 1200px) and (hover: hover) { .marquee-logo:hover { opacity: 1; } }

/* ===================================================================
   Mega menu (Solutions + Devices)
   =================================================================== */
.mega { position: absolute; top: 100%; left: 0; right: 0; }
.mega-panel {
  position: absolute; top: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid var(--border);
  box-shadow: 0 40px 60px -34px rgba(15,27,45,.3);
  padding: 4.5rem 0; opacity: 0; transform: translateY(-1rem);
  transition: opacity .3s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.mega-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.mega-solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem 2.4rem; }
.mega-sol { display: flex; flex-direction: column; gap: .5rem; padding: 1.8rem 2rem; border-radius: 1rem; transition: background .25s var(--ease), transform .25s var(--ease); }
@media (min-width: 1200px) and (hover: hover) { .mega-sol:hover { background: var(--light-gray); transform: translateY(-.2rem); } }
.mega-sol-t { font-size: 1.9rem; font-weight: 600; color: var(--fg); }
.mega-sol-s { font-size: 1.3rem; color: var(--fg-muted); }

/* keep header solid + readable while a mega panel is open */
.site-header.mega-open { background: #fff; color: var(--fg); box-shadow: 0 1px 0 var(--border); }
.site-header.mega-open .brand-name { color: var(--fg); }
.site-header.mega-open .brand-tagline { opacity: .55; }

/* ===================================================================
   Text scramble (decode) hover — logic in js/app.js scrambleText().
   The label sits in a .scr span; width is locked by JS during the
   effect so swapping glyphs never nudges neighbouring icons.
   =================================================================== */
.scr { display: inline-block; white-space: nowrap; }

/* ===================================================================
   Contact dock — Gọi · Trợ lý AI · Zalo
   =================================================================== */
.contact-dock { position: fixed; right: 3rem; bottom: 3rem; z-index: 1200; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.dock-items { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.dock-btn, .dock-toggle { position: relative; width: 6.2rem; height: 6.2rem; border-radius: 50%; color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  transition: transform .3s var(--ease), opacity .3s var(--ease), filter .25s var(--ease); }
.dock-btn svg, .dock-toggle svg { width: 3rem; height: 3rem; position: relative; z-index: 1; }
.dock-btn::before { content: ""; position: absolute; inset: -.8rem; border-radius: 50%; border: .2rem solid currentColor;
  color: var(--ring); opacity: .35; animation: dock-ring 2.4s ease-out infinite; pointer-events: none; }
@media (min-width: 1200px) and (hover: hover) { .dock-btn:hover { transform: translateY(-.3rem) scale(1.06); filter: brightness(1.08); transition-delay: 0s; } }
.dock-call { background: #E8262D; --ring: #E8262D; box-shadow: 0 12px 28px -10px rgba(232,38,45,.6); }
.dock-ai   { background: #2F9E55; --ring: #2F9E55; box-shadow: 0 12px 28px -10px rgba(47,158,85,.6); }
.dock-ai::before { animation-delay: .6s; }
.dock-staff { background: #F07C1E; --ring: #F07C1E; box-shadow: 0 12px 28px -10px rgba(240,124,30,.6); }
.dock-staff::before { animation-delay: .9s; }
.dock-zalo { background: #0068FF; --ring: #0068FF; box-shadow: 0 12px 28px -10px rgba(0,104,255,.6); }
.dock-zalo::before { animation-delay: 1.2s; }
.dock-zalo-txt { position: relative; z-index: 1; font: 800 1.5rem/1 var(--font-display); letter-spacing: -.02em; }
@keyframes dock-ring { 0% { transform: scale(.9); opacity: .45; } 70% { transform: scale(1.25); opacity: 0; } 100% { opacity: 0; } }

.dock-toggle { background: #E8262D; box-shadow: 0 12px 28px -10px rgba(232,38,45,.6); }
@media (min-width: 1200px) and (hover: hover) { .dock-toggle:hover { transform: translateY(-.2rem); } }
.dock-ico-arrow { display: flex; transition: transform .45s var(--ease); }
.contact-dock:not(.open) .dock-ico-arrow { transform: rotate(180deg); }   /* thu gọn: mũi tên hướng lên */

/* thu / mở: các nút trượt vào-ra nút mũi tên, giữ nguyên layout (không nhảy) */
.contact-dock { pointer-events: none; --slot: 7.8rem; }
.contact-dock > * { pointer-events: auto; }
.dock-items .dock-btn { transition: transform .45s var(--ease), opacity .35s var(--ease), filter .25s var(--ease), visibility 0s;
  transition-delay: calc(var(--i, 0) * 50ms); }
.dock-call { --i: 0; --n: 4; } .dock-ai { --i: 1; --n: 3; } .dock-staff { --i: 2; --n: 2; } .dock-zalo { --i: 3; --n: 1; }
.contact-dock:not(.open) .dock-items { pointer-events: none; }
.contact-dock:not(.open) .dock-items .dock-btn { opacity: 0; visibility: hidden;
  transform: translateY(calc(var(--slot) * var(--n))) scale(.5);
  transition: transform .4s var(--ease), opacity .3s var(--ease), visibility 0s .4s;
  transition-delay: calc((3 - var(--i)) * 40ms), calc((3 - var(--i)) * 40ms), .5s; }

/* nhãn khi rê chuột (desktop) */
.dock-tip { position: absolute; right: calc(100% + 1.6rem); top: 50%; transform: translate(.6rem, -50%); white-space: nowrap;
  background: var(--fg, #0F1B2D); color: #fff; font: 500 1.3rem/1 var(--font-display); padding: .9rem 1.2rem; border-radius: .6rem;
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); z-index: 2; }
.dock-btn:focus-visible .dock-tip { opacity: 1; transform: translate(0, -50%); }
@media (min-width: 1200px) and (hover: hover) { .dock-btn:hover .dock-tip { opacity: 1; transform: translate(0, -50%); } }

/* khung trợ lý AI */
.chatbot-card { position: absolute; right: calc(100% + 2rem); bottom: 0; width: 32rem; background: #fff; border: 1px solid var(--border); border-radius: 1.6rem;
  box-shadow: 0 30px 60px -24px rgba(15,27,45,.35); padding: 2.4rem 2.2rem 2.2rem; display: flex; flex-direction: column; gap: 1.4rem;
  opacity: 0; transform: translateX(1rem) scale(.96); transform-origin: bottom right; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.contact-dock.call-open .call-card, .contact-dock.ai-open .ai-card, .contact-dock.staff-open .staff-card { opacity: 1; transform: none; pointer-events: auto; }
.contact-dock.call-open .dock-call .dock-tip, .contact-dock.ai-open .dock-ai .dock-tip, .contact-dock.staff-open .dock-staff .dock-tip { opacity: 0; }
/* khung trợ lý AI */
.ai-card { width: 36rem; padding-bottom: 1.4rem; }
.ai-msgs { display: flex; flex-direction: column; gap: .8rem; max-height: 30rem; min-height: 12rem; overflow-y: auto; padding: .4rem 0; }
.ai-msg { max-width: 88%; font-size: 1.4rem; line-height: 1.55; padding: 1rem 1.3rem; border-radius: 1.4rem; white-space: pre-wrap; word-break: break-word; }
.ai-msg--in { align-self: flex-start; background: var(--light-gray, #F3F3F3); color: var(--fg); border-bottom-left-radius: .4rem; }
.ai-msg--out { align-self: flex-end; background: #2F9E55; color: #fff; border-bottom-right-radius: .4rem; }
.ai-typing { display: flex; gap: .5rem; align-items: center; min-height: 4.2rem; }
.ai-typing span { width: .7rem; height: .7rem; border-radius: 50%; background: #9aa0ac; animation: ai-dot 1.2s infinite ease-in-out; }
.ai-typing span:nth-child(2) { animation-delay: .15s; } .ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-.3rem); } }
.ai-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.ai-chip { font: 500 1.25rem/1.3 var(--font-display); color: #2F9E55; background: #fff; border: 1px solid #2F9E55; border-radius: 99rem; padding: .7rem 1.1rem; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
@media (min-width: 1200px) and (hover: hover) { .ai-chip:hover { background: #2F9E55; color: #fff; } }
.ai-form { display: flex; gap: .8rem; border-top: 1px solid var(--border); padding-top: 1.2rem; }
.ai-input { flex: 1; min-width: 0; font: 400 1.4rem/1.4 var(--font-display); color: var(--fg); padding: 1.1rem 1.3rem; border: 1px solid var(--border); border-radius: 99rem; background: #fff; }
.ai-input:focus { outline: none; border-color: #2F9E55; }
.ai-send { width: 4.2rem; height: 4.2rem; flex: none; border-radius: 50%; border: 0; background: #2F9E55; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ai-send:disabled { opacity: .5; cursor: default; }
.ai-send svg { width: 1.8rem; height: 1.8rem; }
.ai-note { font-size: 1.1rem; line-height: 1.4; color: var(--fg-muted); text-align: center; margin: -.4rem 0 0; }
/* khung chat nhân viên */
.staff-card { width: 34rem; padding-bottom: 1.6rem; }
.staff-msgs { display: flex; flex-direction: column; gap: .8rem; max-height: 26rem; min-height: 12rem; overflow-y: auto; padding: .4rem 0; }
.staff-msg { max-width: 85%; font-size: 1.4rem; line-height: 1.5; padding: 1rem 1.3rem; border-radius: 1.4rem; white-space: pre-wrap; word-break: break-word; }
.staff-msg--in { align-self: flex-start; background: var(--light-gray, #F3F3F3); color: var(--fg); border-bottom-left-radius: .4rem; }
.staff-msg--out { align-self: flex-end; background: #F07C1E; color: #fff; border-bottom-right-radius: .4rem; }
.staff-form { display: flex; gap: .8rem; border-top: 1px solid var(--border); padding-top: 1.2rem; }
.staff-input { flex: 1; min-width: 0; font: 400 1.4rem/1.4 var(--font-display); color: var(--fg); padding: 1.1rem 1.3rem; border: 1px solid var(--border); border-radius: 99rem; background: #fff; }
.staff-input:focus { outline: none; border-color: #F07C1E; }
.staff-send { width: 4.2rem; height: 4.2rem; flex: none; border-radius: 50%; border: 0; background: #F07C1E; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.staff-send svg { width: 1.8rem; height: 1.8rem; }
.chatbot-x { position: absolute; top: 1.2rem; right: 1.2rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chatbot-x svg { width: 1.8rem; height: 1.8rem; }
@media (min-width: 1200px) and (hover: hover) { .chatbot-x:hover { background: var(--light-gray); } }
.chatbot-head { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: .8rem; color: var(--fg); }
.chatbot-dot { width: .8rem; height: .8rem; border-radius: 50%; background: #2ca24d; box-shadow: 0 0 0 .3rem rgba(44,162,77,.18); }
.chatbot-msg { font-size: 1.4rem; line-height: 1.6; color: var(--fg-muted); }
.chatbot-cta { justify-content: center; }
.chatbot-tel { font-family: var(--font-mono); font-size: 1.3rem; color: var(--fg-muted); text-align: center; }

@media (max-width: 1199px) {
  .contact-dock { right: 16px; bottom: 16px; gap: 14px; --slot: 70px; }
  .dock-items { gap: 14px; }
  .dock-btn, .dock-toggle { width: 56px; height: 56px; }
  .dock-btn svg, .dock-toggle svg { width: 26px; height: 26px; }
  .dock-btn::before { inset: -6px; border-width: 2px; }
  .dock-zalo-txt { font-size: 13px; }
  .dock-tip { display: none; }
  .chatbot-card { position: fixed; right: 16px; left: 16px; bottom: 86px; width: auto; padding: 22px 20px 20px; gap: 12px; border-radius: 14px; }
  .chatbot-head { font-size: 15px; } .chatbot-msg { font-size: 14px; } .chatbot-tel { font-size: 13px; }
  .chatbot-x { width: 32px; height: 32px; top: 10px; right: 10px; } .chatbot-x svg { width: 18px; height: 18px; }
  /* mobile: mở trợ lý AI thì ẩn các nút để khung chat không bị che */
  .staff-msgs { max-height: 40vh; } .staff-msg { font-size: 14px; padding: 10px 13px; border-radius: 14px; }
  .staff-input { font-size: 16px; padding: 10px 14px; } .staff-send { width: 42px; height: 42px; } .staff-send svg { width: 18px; height: 18px; }
  .staff-form { gap: 8px; padding-top: 12px; }
  .ai-msgs { max-height: 42vh; } .ai-msg { font-size: 14px; padding: 10px 13px; border-radius: 14px; }
  .ai-chip { font-size: 13px; padding: 7px 11px; } .ai-note { font-size: 11px; }
  .ai-input { font-size: 16px; padding: 10px 14px; } .ai-send { width: 42px; height: 42px; } .ai-send svg { width: 18px; height: 18px; }
  .ai-form { gap: 8px; padding-top: 12px; }
  .contact-dock.call-open .dock-items, .contact-dock.ai-open .dock-items, .contact-dock.staff-open .dock-items { pointer-events: none; }
  .contact-dock.call-open .dock-items .dock-btn, .contact-dock.ai-open .dock-items .dock-btn, .contact-dock.staff-open .dock-items .dock-btn { opacity: 0; visibility: hidden; transform: translateY(calc(var(--slot) * var(--n))) scale(.5); }
}
@media (prefers-reduced-motion: reduce) { .dock-btn::before { animation: none; } }

/* ===================================================================
   Micro-interactions
   =================================================================== */
.btn { transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
@media (min-width: 1200px) and (hover: hover) { .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(232,38,45,.55); } }
@media (min-width: 1200px) and (hover: hover) { .btn--dark:hover, .btn--outline:hover, .btn--outline-light:hover { transform: translateY(-2px); } }
[data-hover] { transition: color .25s var(--ease), opacity .25s var(--ease); }

/* ===================================================================
   Inquiry form modal (B2B)
   =================================================================== */
.inquiry { position: fixed; inset: 0; z-index: 2000; display: none; }
.inquiry.open { display: block; }
.inquiry-overlay { position: absolute; inset: 0; background: rgba(15,27,45,.55); backdrop-filter: blur(4px); animation: inq-fade .3s ease; }
.inquiry-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(56rem, 92vw);
  background: #fff; border-radius: 1.8rem; padding: 4rem; box-shadow: 0 40px 90px -30px rgba(0,0,0,.55);
  max-height: 90vh; overflow-y: auto; animation: inq-pop .35s var(--ease); }
@keyframes inq-fade { from { opacity: 0; } }
@keyframes inq-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
.inquiry-x { position: absolute; top: 2rem; right: 2rem; width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--fg); transition: background .25s var(--ease); }
.inquiry-x svg { width: 2rem; height: 2rem; }
@media (min-width: 1200px) and (hover: hover) { .inquiry-x:hover { background: var(--light-gray); } }
.inquiry-title { font-size: 2.6rem; font-weight: 600; line-height: 1.25; margin: 1rem 0 2.6rem; }
.inquiry-form { display: flex; flex-direction: column; gap: 1.6rem; }
.inquiry-row { display: flex; gap: 1.6rem; }
.inquiry-form label { display: flex; flex-direction: column; gap: .8rem; font-size: 1.3rem; font-weight: 500; color: var(--fg-muted); flex: 1; }
.inquiry-form input, .inquiry-form select, .inquiry-form textarea {
  font-family: var(--font-display); font-size: 1.6rem; color: var(--fg);
  padding: 1.3rem 1.4rem; border: 1px solid var(--border); border-radius: .8rem; background: #fff; width: 100%;
  transition: border-color .25s var(--ease);
}
.inquiry-form textarea { resize: vertical; }
.inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus { outline: none; border-color: var(--primary); }
.inquiry-submit { justify-content: center; margin-top: .6rem; }
.inquiry-done { text-align: center; padding: 3rem 0; }
.inquiry-check { width: 6rem; height: 6rem; border-radius: 50%; background: #2ca24d; color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; }
.inquiry-check svg { width: 3rem; height: 3rem; }
.inquiry-done h3 { font-size: 2.4rem; font-weight: 600; margin-bottom: 1rem; }
.inquiry-done p { font-size: 1.6rem; color: var(--fg-muted); }
@media (max-width: 1199px) { .inquiry-card { padding: 3rem 2rem; } .inquiry-row { flex-direction: column; } }

/* ===================================================================
   CMS detail templates → focused reading width (~1280px)
   =================================================================== */
body.detail main .container { max-width: 1280px; margin-inline: auto; }

/* buttons use sentence case (text is authored that way) */
.btn { text-transform: none; }

/* lock page scroll while the mobile menu is open */
body.menu-lock { overflow: hidden; }

/* ===================================================================
   Responsive cards: 2 per row on tablet, 1 full-width on phone
   =================================================================== */
@media (min-width: 641px) and (max-width: 1199px) {
  .insight-card, .value-card, .feature-card, .award-item { grid-column: span 2 !important; }
}
@media (max-width: 640px) {
  .insight-card, .value-card, .feature-card, .award-item { grid-column: 1 / -1 !important; }
}

/* =====================================================================
   v12 · 29/09/2026 — Mega menu THIẾT BỊ (desktop ≥1200px)
   5 cột theo nhóm; mỗi máy là 1 link riêng tới trang chi tiết.
   ===================================================================== */
.mega-devices { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.4rem 3.2rem; align-items: start; }
.mega-dev-col { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.mega-dev-cat { font-size: 1.7rem; font-weight: 600; color: var(--fg); padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.mega-dev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.mega-dev-item { display: block; padding: .7rem 0; font-size: 1.4rem; line-height: 1.4; color: var(--fg-muted); transition: color .2s var(--ease), transform .2s var(--ease); }
.mega-dev-item.is-current { color: var(--primary); }
.mega-dev-all { grid-column: 1 / -1; justify-self: start; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 500;
  letter-spacing: .03em; text-transform: uppercase; color: var(--primary); padding-top: .8rem; }
@media (min-width: 1200px) and (hover: hover) {
  .mega-dev-cat:hover { color: var(--primary); }
  .mega-dev-item:hover { color: var(--fg); transform: translateX(.3rem); }
}

/* =====================================================================
   v14.2 — Mega menu GIẢI PHÁP chia cột giống THIẾT BỊ
   (dùng chung class .mega-dev-*; 6 giải pháp = 6 cột)
   ===================================================================== */
.mega-solutions-cols { grid-template-columns: repeat(6, 1fr); }
.mega-dev-cat.is-current { color: var(--primary); }
.m-sub-cat.is-current { color: var(--primary); }

/* =====================================================================
   v14.3 — Mega menu (Giải pháp + Thiết bị) bám lưới 12 cột của site:
   mỗi nhóm nội dung = đúng 2 cột lưới → 6 nhóm / hàng ở 1920px,
   khoảng cách giữa các nhóm = gutter của lưới (40px @1920).
   Nhóm thứ 7 trở đi tự xuống hàng, vẫn thẳng cột.
   ===================================================================== */
.mega-devices, .mega-solutions-cols {
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  row-gap: 2.4rem;
}
.mega-devices > .mega-dev-col { grid-column: span 2; }
.mega-devices > .mega-dev-all { grid-column: 1 / -1; }

/* =====================================================================
   v17 · 01/10/2026 — Mega menu GIẢI PHÁP + SẢN PHẨM (desktop ≥1200px)
   Lưới 12 cột: cột 1–3 thẻ nổi bật · cột 5–12 danh mục.
   SẢN PHẨM: Phần mềm (cột 5–10, 3 cột nhóm) + Thiết bị (cột 11–12).
   GIẢI PHÁP: mô hình kinh doanh (cột 5–12, 3 cột).
   Mục chưa có trang (.is-soon) hiện bình thường nhưng không bấm được.
   ===================================================================== */
.mega-panel { padding: 4rem 0 4.8rem; }
.mega-grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); column-gap: var(--grid-gutter); align-items: start; }
.mega-feat { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 1.2rem; }
.mega-block--soft { grid-column: 5 / span 6; }
.mega-block--hw { grid-column: 11 / span 2; }
.mega-block--concepts { grid-column: 5 / span 8; }

/* thẻ nổi bật */
.mega-card { display: grid; grid-template-columns: 9.6rem 1fr; gap: 1.6rem; align-items: center; padding: 1rem 1.6rem 1rem 1rem;
  border: 1px solid var(--border); border-radius: 1.2rem; background: #fff; color: var(--fg);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.mega-card-img { display: block; aspect-ratio: 1; border-radius: .8rem; overflow: hidden; background: var(--light-gray); }
.mega-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mega-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; min-width: 0; }
.mega-badge { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary); background: rgba(232, 38, 45, .08); padding: .3rem .8rem; border-radius: 99rem; }
.mega-card-t { font-size: 1.7rem; font-weight: 600; line-height: 1.25; }
.mega-card-d { font-size: 1.3rem; line-height: 1.45; color: var(--fg-muted); }

/* tiêu đề cột + danh sách */
.mega-h { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-muted); padding-bottom: 1.2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border); }
.mega-soft { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.8rem var(--grid-gutter); }
.mega-group { min-width: 0; }
.mega-group-t { display: block; font-size: 1.6rem; font-weight: 600; line-height: 1.3; color: var(--fg); margin-bottom: .6rem; }
.mega-group-t.is-current { color: var(--primary); }
.mega-list { list-style: none; margin: 0; padding: 0; }
.mega-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0;
  font-size: 1.4rem; line-height: 1.4; color: var(--fg-muted); transition: color .2s var(--ease), transform .2s var(--ease); }
.mega-item--hw { font-size: 1.5rem; color: var(--fg); padding: .7rem 0; }
.mega-count { font-family: var(--font-mono); font-size: 1.2rem; color: var(--fg-muted); }
.mega-concepts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--grid-gutter); }
.mega-concept { display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem 0 1.6rem; border-bottom: 1px solid var(--border); }
.mega-concept-t { font-size: 1.6rem; font-weight: 600; line-height: 1.3; color: var(--fg); transition: color .2s var(--ease); }
.mega-concept-d { font-size: 1.3rem; line-height: 1.45; color: var(--fg-muted); }
.mega-more { display: inline-block; margin-top: 2.4rem; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 500;
  letter-spacing: .03em; text-transform: uppercase; color: var(--primary); }
.mega .is-soon { cursor: default; }

@media (min-width: 1200px) and (hover: hover) {
  a.mega-card:hover { border-color: var(--primary); box-shadow: 0 1.2rem 2.4rem -1.6rem rgba(15, 27, 45, .35); transform: translateY(-.2rem); }
  a.mega-group-t:hover, a.mega-concept:hover .mega-concept-t { color: var(--primary); }
  a.mega-item:hover { color: var(--fg); transform: translateX(.3rem); }
  a.mega-item--hw:hover { color: var(--primary); }
}

/* =====================================================================
   v17.1 · 01/10/2026 — SẢN PHẨM gọn lại: 5 cột ngang hàng (Quản trị và báo cáo ·
   Hệ thống vận hành · Marketing và CRM · Tích hợp · Thiết bị), mỗi dòng 1 sản phẩm,
   không mô tả. GIẢI PHÁP: danh sách mô hình kinh doanh không mô tả, 3 cột.
   Cả 2 bảng: thẻ nổi bật cột 1–3, danh mục từ cột 4.
   ===================================================================== */
.mega-cols { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: var(--grid-gutter); align-items: start; }
.mega-cols--sol { grid-template-columns: repeat(5, 1fr); }
.mega-col--wide { grid-column: span 3; }   /* 3 cột danh sách thẳng hàng với 3 cột đầu của bảng SẢN PHẨM */
.mega-col { min-width: 0; }
a.mega-h, span.mega-h { display: block; }
.mega-item { color: var(--fg); font-size: 1.5rem; padding: .6rem 0; }
.mega-list--cols { columns: 3; column-gap: var(--grid-gutter); }
.mega-list--cols li { break-inside: avoid; }
@media (min-width: 1200px) and (hover: hover) {
  a.mega-h:hover { color: var(--primary); }
  a.mega-item:hover { color: var(--primary); }
}

/* =====================================================================
   v17.4 · 01/10/2026 — GIẢI PHÁP: bảng gọn, không full width.
   Đặt ngay dưới mục GIẢI PHÁP (JS tính vị trí left), bo góc dưới, đổ bóng.
   Trái: danh sách mô hình kinh doanh · Phải: 2 thẻ tư vấn.
   ===================================================================== */
.mega-panel--compact { right: auto; width: 96rem; padding: 3.2rem 3.2rem 3.6rem;
  border: 1px solid var(--border); border-top: 0; border-radius: 0 0 1.6rem 1.6rem; }
.mega-compact { display: grid; grid-template-columns: 1fr 1.15fr; column-gap: 4rem; align-items: start; }
.mega-feat--compact { grid-column: auto; }

/* v17.5 · thẻ nổi bật dùng icon nét: nền #f5f5f5, icon màu đỏ primary */
.mega-card-ico { display: flex; align-items: center; justify-content: center; background: #f5f5f5; color: var(--primary); }
.mega-card-ico svg { width: 3.6rem; height: 3.6rem; }
/* v17.10 · logo sản phẩm trong thẻ nổi bật (vd Quick Decision): nằm giữa khung nền #f5f5f5, cùng cỡ với icon */
.mega-card-ico img.mega-card-logo { width: 4.4rem; height: 4.4rem; object-fit: contain; }

/* =====================================================================
   v19 · 06/10/2026 — GIẢI PHÁP: dropdown đơn (không còn mega menu).
   Đặt ngay dưới mục GIẢI PHÁP (JS tính vị trí left như bảng gọn), mỗi dòng 1 trang giai-phap-<slug>.html.
   ===================================================================== */
.mega-panel--dd { width: auto; min-width: 32rem; padding: 1.2rem; }
.mega-dd { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mega-dd-item { display: block; padding: 1.1rem 1.6rem; border-radius: .6rem; font-size: 1.5rem; line-height: 1.4; color: var(--fg); white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease); }
.mega-dd-item.is-current { color: var(--primary); }
@media (min-width: 1200px) and (hover: hover) { a.mega-dd-item:hover { background: var(--light-gray); color: var(--primary); } }

/* v2.45 · dropdown GIẢI PHÁP — biểu tượng đầu mỗi mục */
.mega-dd-item { display: flex; align-items: center; gap: 1.2rem; padding: .8rem 1.6rem .8rem .8rem; }
.mega-dd-ico { display: grid; place-items: center; flex: none; width: 3.2rem; height: 3.2rem; border-radius: .8rem; background: var(--light-gray); color: var(--fg); transition: background-color .2s var(--ease), color .2s var(--ease); }
.mega-dd-ico svg { width: 1.8rem; height: 1.8rem; }
.mega-dd-item.is-current .mega-dd-ico { background: #FDEEEE; color: var(--primary); }
@media (min-width: 1200px) and (hover: hover) { a.mega-dd-item:hover .mega-dd-ico { background: #fff; color: var(--primary); } }