/* ---------------------------------------------------------------------------
   Thanh tiện ích ở đáy slide đầu trang chủ.

   Hai trạng thái, cùng một khối HTML:
   - Thường: dãy nút nằm ngang, vắt lên mép dưới slide.
   - Đã ghim (.is-docked): cột dọc bám mép phải màn hình, chỉ còn biểu tượng, rê
     chuột vào mới bung chữ ra.

   Đổi dạng chứ không giữ nguyên thanh ngang: để nguyên thì cuộn xuống là mất
   những việc người ta hay cần làm nhất, mà ghim nguyên thanh ngang lại chiếm
   mất một dải màn hình suốt cả trang.
   --------------------------------------------------------------------------- */

/* Thẻ bọc ở lại đúng chỗ trong dòng chảy kể cả lúc thanh đã ghim: nó là mốc để
   JavaScript biết đã cuộn qua khỏi slide hay chưa.

   height: 0 nên nó không chiếm chỗ - cả thanh nằm hẳn TRÊN slide chứ không đẩy
   phần dưới xuống. */
.nv-actbar-wrap {
  position: relative;
  z-index: 5;
  height: 0;
}

/* Kéo lên đúng bằng chiều cao của chính nó cộng 24px, nên cả thanh nằm gọn trong
   slide, cách mép dưới slide 24px.

   Dùng translateY(-100%) chứ không phải margin-top âm một số cố định: chiều cao
   thanh đổi theo số nút, theo cỡ chữ và theo bề ngang màn hình - viết số cố định
   thì màn nào khác là thanh lại thò ra hoặc chìm vào. -100% luôn đúng bằng chính
   nó. */
.nv-actbar {
  transform: translateY(calc(-100% - 24px));
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 14px;
  /* Nền trắng mờ để nhìn xuyên thấy ảnh slide phía sau. Đổi lại thì phải làm nhoè
     mạnh hơn (blur 16px): nền càng trong, ảnh phía sau càng lộ chi tiết, chữ đặt
     lên trên rất khó đọc - phần nhoè là thứ giữ cho chữ vẫn rõ.

     backdrop-filter là phần thêm; trình duyệt cũ không hỗ trợ thì chỉ còn lớp
     trắng 55% - vẫn đọc được, chỉ kém nét hơn. Vì thế không hạ xuống thấp hơn
     nữa, không thì chỗ không hỗ trợ là chữ chìm hẳn vào ảnh. */
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px rgba(10, 25, 40, .18);
}

/* Chừa chỗ cho thanh ở đáy slide - nhưng chừa ĐỀU hai đầu.

   Chỉ đệm phía dưới thì cụm chữ bị đẩy lên, nằm cao hơn tâm slide một đoạn đúng
   bằng nửa phần đệm, nhìn lệch hẳn lên trên. Đệm đều hai đầu thì vùng chứa chữ
   vẫn co lại nhường chỗ cho thanh, mà tâm của nó vẫn trùng tâm slide - chữ nằm
   đúng giữa. */
body.nv-has-actbar .nv-hero-overlay {
  padding-top: 130px;
  padding-bottom: 130px;
}

.nv-actbar-item {
  flex: 1 1 0;
  /* min-width: 0 để nhãn dài không kéo ô rộng ra rồi đẩy vỡ hàng. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 10px;
  /* Màu chữ đổi được trong quản trị (Trang chủ → Thanh tiện ích). Đặt ở đây chứ
     không đặt thẳng lên nhãn: như thế trạng thái rê chuột và dạng ghim bên dưới
     vẫn tự lo màu của chúng, chỉ màu lúc bình thường là đổi theo thiết lập. */
  color: var(--nv-actbar-color, #17242f);
  text-align: center;
  transition: background-color .22s ease, color .22s ease;
}

.nv-actbar-item:hover {
  background: rgba(var(--nv-primary-rgb), .1);
  color: var(--nv-primary-deep);
  text-decoration: none;
}

.nv-actbar-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--nv-primary);
  font-size: 19px;
  box-shadow: 0 5px 14px rgba(10, 25, 40, .12);
  transition: transform .25s ease;
}

.nv-actbar-item:hover .nv-actbar-ico {
  transform: translateY(-2px);
}

.nv-actbar-ico img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.nv-actbar-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

/* --- Đã ghim: cột dọc bám mép phải --- */

.nv-actbar.is-docked {
  position: fixed;
  top: 50%;
  right: 0;
  left: auto;
  transform: translateY(-50%);
  z-index: 1020;
  width: auto;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 8px 8px 8px 0;
  border-radius: 16px 0 0 16px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 12px 34px rgba(10, 25, 40, .2);
}

/* Ở dạng cột chỉ còn biểu tượng; chữ bung ra khi rê chuột. */
.nv-actbar.is-docked .nv-actbar-item {
  position: relative;
  flex: 0 0 auto;
  flex-direction: row;
  gap: 0;
  padding: 4px;
  border-radius: 12px 0 0 12px;
  text-align: left;
}

/* Nhỏ hơn hẳn dạng ngang: ở đây nó ngồi cạnh nội dung suốt cả trang, to bằng
   dạng ngang là chiếm mất một dải màn hình và át cả thứ người ta đang đọc. */
.nv-actbar.is-docked .nv-actbar-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 19px;
  box-shadow: none;
  background: rgba(var(--nv-primary-rgb), .1);
}

.nv-actbar.is-docked .nv-actbar-ico img {
  width: 26px;
  height: 26px;
}

/* Chữ bung ra thành một thẻ nổi bên TRÁI biểu tượng.

   Định vị tuyệt đối chứ không nằm trong dòng chảy: nằm trong dòng thì bề ngang
   cả cột phải rộng bằng nhãn dài nhất, mà mỗi lúc chỉ một nhãn hiện - còn lại
   là một mảng trắng trống trơn kéo dài ra tận mép màn hình. Tuyệt đối thì cột
   giữ đúng bề ngang một biểu tượng.

   Nhãn vẫn nằm trong thẻ <a> nên bấm vào chữ cũng đi được, và rê chuột lên chữ
   vẫn tính là đang rê vào nút (:hover truyền lên cha theo cây DOM). */
.nv-actbar.is-docked .nv-actbar-label {
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--nv-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(10, 25, 40, .22);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.nv-actbar.is-docked .nv-actbar-item:hover .nv-actbar-label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.nv-actbar.is-docked .nv-actbar-item:hover {
  background: var(--nv-primary);
  color: #fff;
}

.nv-actbar.is-docked .nv-actbar-item:hover .nv-actbar-ico {
  background: rgba(255, 255, 255, .22);
  color: #fff;
  transform: none;
}

@media (max-width: 991px) {
  /* Trên điện thoại thanh KHÔNG đè lên slide nữa mà nằm hẳn bên dưới.

     Lý do là số đo, không phải sở thích: màn 500×780 thì slide cao 577px, thanh
     cao 210px (sáu nút xếp hai hàng) còn cụm chữ cao 317px - cộng lại đã vượt
     chiều cao slide, đè kiểu gì cũng chồng lên nhau. Đẩy chữ lên cho đủ chỗ thì
     dòng đầu trôi mất khỏi mép trên. */
  /* Thanh không đè lên slide nữa thì đừng chừa chỗ cho nó. Phải gỡ CẢ HAI đầu:
     gỡ mỗi đệm dưới thì còn trơ đệm trên, cụm chữ bị đẩy xuống đúng một nửa chỗ
     đệm đó (đo được lệch 65px dưới tâm). */
  body.nv-has-actbar .nv-hero-overlay {
    padding-top: 0;
    padding-bottom: 0;
  }

  .nv-actbar-wrap {
    height: auto;
  }

  .nv-actbar {
    transform: none;
    margin-top: 14px;
    padding: 12px 8px;
    border-radius: 14px;
  }

  /* Ba nút một hàng: sáu nút dàn ngang trên điện thoại thì chữ nát hết.

     Phải trừ đi phần gap, không thì 3 × 33.3333% cộng hai khe 4px vượt quá một
     hàng và nút thứ ba rơi xuống - thành ra hai nút một hàng, thừa hẳn một mảng
     trống bên phải. */
  .nv-actbar-item {
    flex: 0 0 calc(33.3333% - 6px);
    gap: 8px;
    padding: 10px 4px;
  }

  .nv-actbar-ico {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .nv-actbar-ico img {
    width: 24px;
    height: 24px;
  }

  .nv-actbar-label {
    font-size: 12px;
  }

  /* Dạng ghim trên điện thoại: nhỏ lại và bỏ phần bung chữ - màn hẹp mà bung ra
     220px là che gần nửa màn. Chạm vào là đi thẳng tới trang. */
  .nv-actbar.is-docked .nv-actbar-item {
    flex: 0 0 auto;
  }

  /* Màn hẹp giữ cỡ nhỏ: ở đó thanh dọc ngồi ngay cạnh nội dung, to lên là che. */
  .nv-actbar.is-docked .nv-actbar-ico {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .nv-actbar.is-docked .nv-actbar-item:hover .nv-actbar-label {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nv-actbar-item,
  .nv-actbar-ico,
  .nv-actbar.is-docked .nv-actbar-label {
    transition: none;
  }
}