/* =========================================================================
   w22nav — điều hướng cho TRANG DÀI (dùng chung nhiều landing)
   Markup: template-parts/w22nav.php · Logic: assets/js/w22nav.js

   MỘT danh sách, HAI hình thức tuỳ bề ngang màn hình:
   · màn hẹp (< 1500px): mục lục nằm im dưới đáy, mở ra bằng nút tròn — vì cột
     chấm dính mép phải sẽ đè lên nội dung ở khổ này.
   · màn rộng (≥ 1500px): cột chấm lặng lẽ bám mép phải, rê chuột mới bung tên.

   Hai biến để mỗi trang tự chỉnh (chỉ có tác dụng ở bản cột chấm):
     --w22nav-right : khoảng cách từ mép phải màn hình tới cột chấm
     --w22nav-w     : bề rộng phần tên khi mở (tên tiếng Việt dài thì nới ra)
   ========================================================================= */

/* --- Vạch tiến độ đọc ở đỉnh màn hình -----------------------------------
   Nằm TRÊN thanh menu (menu z-index 100) nhưng dưới menu mở toàn màn (200). */
.w22nav-bar{
  position:fixed; top:0; left:0; right:0; z-index:101;
  height:3px; pointer-events:none;
}
.w22nav-bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--accent-ink), var(--accent));
  border-radius:0 3px 3px 0;
}

/* =========================================================================
   BẢN MÀN HẸP — bảng mục lục trượt lên từ đáy
   ========================================================================= */
.w22nav{
  --w22nav-right:clamp(14px,1.5vw,24px);
  --w22nav-w:184px;

  position:fixed; z-index:120;
  left:0; right:0; bottom:0;
  width:100%; max-width:560px; margin:0 auto;
  max-height:min(74vh,640px); overflow-y:auto; overscroll-behavior:contain;
  background:#fff;
  border:1px solid var(--line); border-bottom:0; border-radius:18px 18px 0 0;
  box-shadow:0 -20px 50px -24px rgba(20,21,26,.5);
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
  /* Đóng thì trượt khuất xuống dưới; visibility để bàn phím và trình đọc màn
     hình bỏ qua chứ không tab lạc vào bảng đang đóng. */
  transform:translateY(101%); visibility:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), visibility .3s;
}
body.w22nav-open .w22nav{ transform:none; visibility:visible; }
/* Khoá cuộn nền khi bảng đang mở, để vuốt trong bảng không kéo trang phía sau. */
body.w22nav-open{ overflow:hidden; }

.w22nav-head{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 16px 11px; background:#fff; border-bottom:1px solid var(--line);
}
.w22nav-head::before{ /* vạch kéo nhỏ, dấu hiệu quen thuộc của bảng trượt */
  content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:38px; height:4px; border-radius:99px; background:var(--line);
}
.w22nav-head__t{
  font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--ink);
}
.w22nav-head__x{
  flex:0 0 auto; display:grid; place-items:center; width:32px; height:32px;
  border:1px solid var(--line); border-radius:50%; background:#fff;
  color:var(--ink-3); cursor:pointer;
}
.w22nav-head__x:hover{ color:var(--accent-ink); border-color:var(--accent); }

.w22nav ul{ display:flex; flex-direction:column; padding:2px 0 4px; }
.w22nav a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:46px; padding:9px 16px;
  color:var(--ink-3); text-decoration:none;
}
.w22nav li + li a{ border-top:1px solid var(--line); }
.w22nav .t{
  order:-1; /* số + tên đứng trước, chấm dạt về bên phải */
  display:flex; align-items:baseline; gap:10px;
  font-size:14.5px; line-height:1.35; text-align:left;
}
.w22nav .t b{
  flex:0 0 22px; /* ô số cố định để tên cũng bắt đầu cùng một vạch */
  font-family:var(--font-head); font-weight:800; font-size:11.5px; color:var(--accent);
}
.w22nav .d{
  flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  background:var(--line); transition:background-color .2s, transform .2s;
}
.w22nav a:active{ background:var(--bg); }

/* --- Nút tròn mở mục lục -------------------------------------------------
   Xếp ngay TRÊN nút "lên đầu trang" (46px, cùng lề phải) và chỉ hiện khi đã
   cuộn xuống — lúc mới vào trang màn hình còn sạch. Nút Chat Zalo ở góc TRÁI
   nên không tranh chỗ. */
.w22nav-fab{
  position:fixed; z-index:121;
  right:clamp(16px,4vw,28px);
  bottom:calc(clamp(16px,4vw,28px) + 56px + env(safe-area-inset-bottom,0px));
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; cursor:pointer;
  background:#fff; color:var(--ink);
  box-shadow:0 8px 22px -8px rgba(20,21,26,.35);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease,
             background-color .2s ease, color .2s ease;
}
.w22nav-fab.is-visible{ opacity:1; visibility:visible; transform:none; }
.w22nav-fab:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.w22nav-fab__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
/* Bảng đang mở, hoặc menu toàn màn hình đang mở → giấu nút cho gọn. */
body.w22nav-open .w22nav-fab{ opacity:0; visibility:hidden; }
body.w22-nav-open .w22nav-fab{ display:none; }

.w22nav-scrim{
  position:fixed; inset:0; z-index:119; background:rgba(15,14,17,.42);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
body.w22nav-open .w22nav-scrim{ opacity:1; visibility:visible; }

/* =========================================================================
   BẢN MÀN RỘNG — cột chấm bám mép phải (từ 1500px)
   Ngưỡng 1500px chứ không phải 1280px: vùng nội dung của các landing rộng gần
   hết màn, hẹp hơn ngưỡng này thì cột chấm che mất mép phải của thẻ (đo được ở
   1440, 1366 và 1280 đều đè).
   ========================================================================= */
@media (min-width:1500px){
  .w22nav-fab, .w22nav-scrim, .w22nav-head{ display:none; }
  body.w22nav-open{ overflow:visible; }

  .w22nav{
    position:fixed; z-index:89;
    left:auto; right:var(--w22nav-right); bottom:auto; top:50%;
    width:auto; max-width:none; margin:0;
    max-height:none; overflow:visible;
    transform:translateY(-50%); visibility:visible;
    padding:12px 10px; border:1px solid var(--line); border-radius:14px;
    background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
    box-shadow:0 10px 30px -22px rgba(20,21,26,.4);
    transition:none;
  }
  body.w22nav-open .w22nav{ transform:translateY(-50%); }

  .w22nav ul{ gap:2px; padding:0; }
  .w22nav a{
    justify-content:flex-end; gap:10px;
    min-height:0; padding:3px 0; border:0;
  }
  .w22nav li + li a{ border-top:0; }
  .w22nav .t{
    /* Khi mở thì lấy BỀ RỘNG CỐ ĐỊNH (không co theo độ dài tên) nên số thứ tự
       thẳng một vạch bên trái, tên thẳng theo, và chấm cũng thẳng một hàng. */
    align-items:center; gap:9px;
    width:0; overflow:hidden; white-space:nowrap;
    font-size:12.5px; line-height:1.2; color:var(--ink-3);
    opacity:0; transition:width .26s ease, opacity .2s ease;
  }
  .w22nav .t b{ flex:0 0 21px; font-size:11px; }
  /* Mặc định mục lục ĐÓNG — chỉ là một hàng chấm lặng lẽ. Rê chuột vào cả khối
     (hoặc tab vào bằng bàn phím) thì bung ĐỦ mọi tên một lượt. */
  .w22nav:hover .t,
  .w22nav:focus-within .t{ width:var(--w22nav-w); opacity:1; }
  .w22nav a:hover .d,
  .w22nav a:focus-visible .d{ background:var(--accent); transform:scale(1.25); }
  .w22nav a:hover .t{ color:var(--accent-ink); }
  .w22nav a:active{ background:none; }
}

/* Phần đang xem: chấm to hơn và coral — ở bản cột chấm thì dấu hiệu này hiện kể
   cả khi đang đóng, để liếc qua là biết đang ở đâu. */
.w22nav a[aria-current="true"] .d{ background:var(--accent); transform:scale(1.5); }
.w22nav a[aria-current="true"] .t{ color:var(--ink); font-weight:600; }
.w22nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; border-radius:6px; }

@media (prefers-reduced-motion:reduce){
  .w22nav, .w22nav .d, .w22nav .t, .w22nav-bar i,
  .w22nav-fab, .w22nav-scrim{ transition:none; }
}