/* Nút liên hệ / hướng dẫn (18/10/2026). Nút Messenger nổi góc phải — biểu tượng Messenger gốc, mở Page facebook.com/thacnuoc6tvn.
   Điện thoại: đứng trên nút "Đặt sách" dính đáy; nút đó ẩn (đầu trang / đang ở form) thì hạ xuống sát đáy.
   Nhãn "Hỏi nhanh qua Messenger" hiện 1 lần sau 4 giây rồi thu lại; máy tính rê chuột thì hiện lại. */
.nut-tin { position: fixed; right: var(--k-4); bottom: calc(var(--k-3) + 56px + var(--k-3)); z-index: 11;
  display: flex; align-items: center; gap: var(--k-2); text-decoration: none;
  transition: bottom .35s cubic-bezier(.2,.8,.2,1); }
.nut-dinh-an ~ .nut-tin { bottom: var(--k-4); }
@media (min-width: 760px) { .nut-tin { right: var(--k-6); bottom: var(--k-6); } }

/* Biểu tượng Messenger chính hãng của Facebook (anh chọn 18/10 — khách nhận ra ngay), giữ nguyên màu gốc */
.nut-tin-tron { position: relative; width: 58px; height: 58px; display: grid; place-content: center; transition: scale .2s; }
.nut-tin-tron img { display: block; width: 58px; height: 58px; filter: drop-shadow(0 6px 12px color-mix(in oklch, var(--mau-nen-sau) 80%, transparent)); }
.nut-tin:hover .nut-tin-tron { scale: 1.06; }
.nut-tin:focus-visible { outline: none; }
.nut-tin:focus-visible .nut-tin-tron { box-shadow: var(--focus-vong); }

/* Nhãn: thẻ sáng bên trái nút, mặc định thu lại */
.nut-tin-chu { padding: 8px 14px; border-radius: var(--bo-tron); background: var(--o-nhap-nen); color: var(--o-nhap-chu);
  font-size: 0.8125rem; font-weight: 700; white-space: nowrap; box-shadow: var(--bong);
  opacity: 0; translate: 12px 0; pointer-events: none; transition: opacity .3s, translate .3s; }
@media (hover: hover) { .nut-tin:hover .nut-tin-chu, .nut-tin:focus-visible .nut-tin-chu { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* Vòng sóng lan nhẹ quanh nút, 2 lần mỗi 6 giây — gợi "có người trực" mà không nhấp nháy liên tục */
  .nut-tin-tron::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
    border: 2px solid #a033ff; /* tím của biểu tượng Messenger gốc */ animation: tin-song 6s ease-out 2s infinite; }
  .nut-tin-chu { animation: tin-chao 5s ease 4s 1 backwards; } /* backwards: chạy xong trả về trạng thái thu lại, rê chuột vẫn mở được */
  .nut-tin-tron { animation: tin-vao .5s cubic-bezier(.2,1.4,.4,1) 1s both; }
}
/* Dưới 6 tầng thác: nút dùng app + thẻ "Xem video hướng dẫn" (danh sách phát YouTube) đứng cạnh nhau */
.app-hanh-dong { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-3) var(--k-4); }
.huong-dan { display: inline-flex; align-items: center; gap: var(--k-3); padding: 6px 18px 6px 6px; min-height: 48px; border-radius: var(--bo-tron);
  text-decoration: none; color: var(--mau-chu); background: color-mix(in oklch, var(--the-nen) 55%, transparent); border: 1px solid var(--the-vien);
  transition: background .15s, border-color .15s; }
.huong-dan:hover { background: var(--the-nen); border-color: var(--mau-nhan-dam); }
.huong-dan:focus-visible { outline: none; box-shadow: var(--focus-vong); }
.huong-dan-play { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; background: var(--nut-nen); color: var(--nut-chu); }
.huong-dan-play svg { width: 18px; height: 18px; fill: currentColor; translate: 1px 0; }
.huong-dan-chu { display: flex; flex-direction: column; line-height: 1.25; }
.huong-dan-chu b { font-size: 0.9375rem; }
.huong-dan-chu small { font-size: 0.75rem; color: var(--mau-chu-phu); }
@media (max-width: 479px) { .app-hanh-dong > * { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: no-preference) { .huong-dan:hover .huong-dan-play { animation: tin-vao .4s cubic-bezier(.2,1.4,.4,1); } }

@keyframes tin-song { 0% { opacity: .8; scale: 1; } 30%, 100% { opacity: 0; scale: 1.6; } }
@keyframes tin-chao { 0% { opacity: 0; translate: 12px 0; } 10%, 85% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 12px 0; } }
@keyframes tin-vao { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }