/* Gập khối dài ở điện thoại (13/10/2026, Đợt 2 trang trong).
 * Máy sinh bọc ruột khối bằng [data-gap] và đặt ngay sau nó một nút [data-gap-nut].
 * Máy tính (>720): không gập, nút ẩn. Điện thoại: ruột cao quá --gap-h thì cắt, mờ dần ở đáy,
 * nút "Xem đủ phần này" mở trọn; gap-khoi.js gỡ cắt ở khối vốn đã ngắn để khỏi bày nút thừa.
 * Cắt bằng CSS ngay từ lượt vẽ đầu (không chờ JS) để trang không nhảy. */
.gap-khoi__nut { display: none; }
@media (max-width: 720px) {
  [data-gap] { --gap-h: 480px; position: relative; }
  /* --gap-cat do gap-khoi.js đặt (mép dưới phần tử con cuối còn trọn trong --gap-h); khối không có mép
   * hợp lệ thì cắt ở trần và mờ đáy như cũ. */
  [data-gap]:not(.gap-mo):not(.gap-ngan) {
    max-height: var(--gap-cat, var(--gap-h)); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, var(--color-deep-navy) calc(100% - 64px), transparent);
    mask-image: linear-gradient(to bottom, var(--color-deep-navy) calc(100% - 64px), transparent);
  }
  /* gap-khoi.js cắt gọn ở mép phần tử con (gap-mep): không lớp mờ, chỉ một đường mảnh báo còn tiếp */
  [data-gap].gap-mep:not(.gap-mo):not(.gap-ngan) { -webkit-mask-image: none; mask-image: none; }
  [data-gap].gap-mep:not(.gap-mo):not(.gap-ngan)::after { content: ""; position: absolute; left: var(--gap-le, 0); right: var(--gap-phai, 0); bottom: 0; border-bottom: 1px dashed var(--border-strong); pointer-events: none; }
  /* Nút phụ nhẹ: lặp nhiều lần trên một trang nên không được nặng hơn nút kêu gọi chính. */
  .gap-khoi__nut {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    width: fit-content; min-height: 44px; margin: var(--space-2) auto 0; padding: 0 var(--space-4);
    font: 600 15px/1.2 var(--font-sans); color: var(--color-bordeaux);
    background: transparent; border: 0; border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .gap-khoi__nut:focus-visible { outline: 2px solid var(--color-signal-red); outline-offset: 2px; }
  .gap-khoi__nut i { transition: transform var(--dur-base) var(--ease-out); }
  .gap-khoi__nut[aria-expanded="true"] i { transform: rotate(180deg); }
  .gap-khoi__nut[hidden] { display: none; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .gap-khoi__nut i { transition: none; }
}

/* Dải nhảy tới các khối của trang dài (chỉ điện thoại). Worker chèn sau hero trang ngành
 * (`nav.toi-khoi > .container.toi-khoi__in > a[href="#id"]`). Một hàng vuốt ngang, không dính. */
.toi-khoi { display: none; }
@media (max-width: 720px) {
  .toi-khoi { display: block; padding: var(--space-4) 0; background: var(--surface-page); border-bottom: 1px solid var(--hairline); }
  /* mép phải mờ dần: thẻ cuối bị khuất trông như còn vuốt được, không như bị xén */
  .toi-khoi__in {
    display: flex; flex-wrap: nowrap; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, var(--color-deep-navy) calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, var(--color-deep-navy) calc(100% - 40px), transparent);
  }
  .toi-khoi__in > a:last-child { margin-right: var(--space-8); }
  .toi-khoi__in::-webkit-scrollbar { display: none; }
  .toi-khoi a {
    flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card);
    color: var(--text-primary); font: 500 14px/1.2 var(--font-sans); text-decoration: none; white-space: nowrap;
  }
  .toi-khoi a:active { border-color: var(--color-bordeaux); color: var(--color-bordeaux); }
}