/* =====================================================================
   v2.49 · 08/10/2026 — THANH ĐIỀU HƯỚNG SECTION (trang chi tiết Phần mềm + Giải pháp)
   Dính đáy màn hình; tới hết section cuối thì trôi lên cùng nội dung.
   [←] [tên section đang xem] [→] · bấm tên → mở danh sách section · chữ dài tự chạy.
   Mobile: rộng hết container · Tablet/desktop: ~4 cột, canh giữa.
   ===================================================================== */
.sec-nav-wrap { position: sticky; bottom: 2.4rem; z-index: 900; display: flex; justify-content: center; padding: 0 var(--grid-margin); margin: 4rem 0 2.4rem; pointer-events: none; }
.sec-nav { --col: calc((100vw - 2 * var(--grid-margin) - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns));
  width: calc(4 * var(--col) + 3 * var(--grid-gutter)); min-width: 36rem; max-width: 100%; pointer-events: auto; font-family: var(--font-display); }
.sec-nav-card { background: #fff; border-radius: 3.2rem; padding: .6rem; box-shadow: 0 .8rem 3.2rem rgba(17, 24, 39, .14), 0 0 0 1px rgba(17, 24, 39, .06);
  transition: border-radius .35s var(--ease); }
.sec-nav.is-open .sec-nav-card { border-radius: 2rem; }
/* danh sách section (mở khi bấm tên) */
.sec-nav-pop { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.sec-nav.is-open .sec-nav-pop { grid-template-rows: 1fr; }
.sec-nav-list { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0; }
.sec-nav-list-in { max-height: min(60vh, 48rem); overflow-y: auto; overscroll-behavior: contain; padding: .8rem 0 1.2rem; display: flex; flex-direction: column; gap: .2rem; }
.sec-nav-item { display: block; width: 100%; padding: 1rem 1.6rem; border-radius: 1.2rem; font-size: 1.8rem; line-height: 1.3; color: var(--fg); text-align: center; transition: background-color .2s var(--ease); }
.sec-nav-item.is-active { background: var(--light-gray, #F2F2F2); }
/* thanh dưới: ← · tên · → */
.sec-nav-bar { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) 4.4rem; align-items: center; gap: .6rem; }
.sec-nav-arrow { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--light-gray, #F2F2F2); color: var(--fg); transition: opacity .2s var(--ease), background-color .2s var(--ease); }
.sec-nav-arrow svg { width: 1.8rem; height: 1.8rem; }
.sec-nav-arrow:disabled { opacity: .35; cursor: default; }
.sec-nav-cur { position: relative; height: 4.4rem; min-width: 0; overflow: hidden; border-radius: 2.2rem; font-size: 1.5rem; font-weight: 500; color: var(--fg); }
.sec-nav-label, .sec-nav-close { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 1.2rem; transition: opacity .25s var(--ease), transform .3s var(--ease); }
.sec-nav-label { overflow: hidden; }
.sec-nav-text { display: inline-block; white-space: nowrap; }
.sec-nav-label.is-long { justify-content: flex-start;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.2rem, #000 calc(100% - 1.2rem), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 1.2rem, #000 calc(100% - 1.2rem), transparent 100%); }
.sec-nav-label.is-long .sec-nav-text { animation: secNavMarquee var(--dur, 8s) ease-in-out infinite alternate; }
@keyframes secNavMarquee { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(var(--dist, 0px)); } }
.sec-nav-close { opacity: 0; transform: translateY(40%); }
.sec-nav.is-open .sec-nav-label { opacity: 0; transform: translateY(-40%); }
.sec-nav.is-open .sec-nav-close { opacity: 1; transform: none; }
@media (min-width: 1200px) and (hover: hover) {
  .sec-nav-arrow:not(:disabled):hover { background: #E6E6E6; }
  .sec-nav-item:hover { background: var(--light-gray, #F2F2F2); }
  .sec-nav-cur:hover .sec-nav-text, .sec-nav-cur:hover .sec-nav-close { color: var(--primary); }
}
@media (max-width: 1199px) {
  .sec-nav-item { font-size: 1.6rem; }
  .sec-nav-cur { font-size: 1.4rem; }
}
@media (max-width: 767px) {
  .sec-nav-wrap { bottom: 1.6rem; margin-top: 3.2rem; }
  .sec-nav { width: 100%; min-width: 0; }
  /* dock Gọi · AI · Zalo đẩy lên trên thanh điều hướng */
  body.has-sec-nav .contact-dock { transform: translateY(-8rem); transition: opacity .25s; }
  body.sec-nav-open .contact-dock { opacity: 0; pointer-events: none; }
  body.sec-nav-open .contact-dock > * { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .sec-nav-label.is-long .sec-nav-text { animation: none; } }