/* ============================================================
   Nút liên hệ nổi — Phú Sơn
   ============================================================
   Tự chứa hoàn toàn: không dùng biến CSS hay class nào của theme, vì plugin phải
   chạy đúng kể cả khi đổi sang theme khác. Các giá trị thay đổi theo cài đặt được
   bơm vào bằng biến CSS trên .psfc (xem PSFC_Render::assets).

   Mọi selector đều bắt đầu bằng .psfc để không đụng CSS của theme. */

.psfc {
  --psfc-size: 48px;
  --psfc-gap: 10px;
  --psfc-offset: 24px;
  --psfc-cta-bg: #012348;
  --psfc-cta-color: #ffffff;
  --psfc-default-bg: #012348;
  --psfc-icon-color: #ffffff;
  --psfc-top-bg: #2f7ec4;

  position: fixed;
  bottom: var(--psfc-offset);
  z-index: 9990; /* Dưới modal/lightbox của theme (thường 10000+) để không che popup. */
  display: flex;
  align-items: center;
}

.psfc--right { right: 12px; }
.psfc--left  { left: 12px; }

.psfc__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--psfc-gap);
}

/* --- Thẻ chữ dọc --- */
.psfc__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--psfc-size);
  padding: 18px 0;
  border-radius: 999px;
  background: var(--psfc-cta-bg);
  color: var(--psfc-cta-color);
  box-shadow: 0 4px 14px rgba(1, 35, 72, 0.28);
  text-decoration: none;
}
.psfc__cta:hover { color: var(--psfc-cta-color); opacity: 0.92; }

/* writing-mode + rotate(180deg): chữ chạy từ DƯỚI lên như ảnh thiết kế.
   Chỉ dùng writing-mode thì chữ chạy từ trên xuống. */
.psfc__cta-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

/* --- Danh sách nút --- */
.psfc__list {
  display: flex;
  flex-direction: column;
  gap: var(--psfc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.psfc__item { margin: 0; padding: 0; list-style: none; }
.psfc__item::before, .psfc__item::marker { display: none; content: none; }

.psfc__btn,
.psfc__top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--psfc-size);
  height: var(--psfc-size);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--psfc-bg, var(--psfc-default-bg));
  color: var(--psfc-icon-color);
  box-shadow: 0 4px 14px rgba(1, 35, 72, 0.28);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.psfc__btn:hover,
.psfc__top:hover {
  transform: translateY(-2px);
  color: var(--psfc-icon-color);
  box-shadow: 0 7px 20px rgba(1, 35, 72, 0.34);
}
.psfc__btn:focus-visible,
.psfc__top:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(1, 35, 72, 0.55);
}

.psfc__icon { display: flex; align-items: center; justify-content: center; }
.psfc__icon img { width: 24px; height: 24px; object-fit: contain; display: block; }
.psfc-icon { display: block; }

/* Logo chữ (Zalo) — xem ghi chú trong class-psfc-icons.php. */
.psfc__wordmark {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-family: Arial, Helvetica, sans-serif;
}

/* --- Nhãn hiện khi rê chuột --- */
.psfc__tip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 11px;
  border-radius: 4px;
  background: #012348;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  box-shadow: 0 3px 12px rgba(1, 35, 72, 0.25);
}
.psfc--right .psfc__tip { right: calc(100% + 10px); }
.psfc--left  .psfc__tip { left: calc(100% + 10px); }
.psfc__btn:hover .psfc__tip,
.psfc__btn:focus-visible .psfc__tip { opacity: 1; visibility: visible; }

/* --- Nút lên đầu trang --- */
.psfc__top {
  background: var(--psfc-top-bg);
  gap: 1px;
}
.psfc__top-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
/* Chưa cuộn đủ ngưỡng: thu nhỏ và mờ đi thay vì display:none, để lúc hiện ra có
   chuyển động chứ không nhảy giật cả cụm nút. */
.psfc__top--idle {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.6);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

/* --- Nút gộp trên điện thoại --- */
/* Mặc định (khổ máy tính) KHÔNG có gì thay đổi: nút gộp ẩn đi, danh sách kênh hiện
   như cũ. Toàn bộ phần gộp chỉ sống trong @media bên dưới. */
.psfc__toggle { display: none; }
.psfc__icon--open { display: none; }

/* --- Responsive --- */
@media (max-width: 767px) {
  .psfc { --psfc-size: 44px; --psfc-gap: 8px; }
  .psfc--right { right: 8px; }
  .psfc--left { left: 8px; }

  /* Kênh chỉ dành cho máy tính (mạng xã hội…) — xem ô "Hiện trên điện thoại"
     ở trang cài đặt. */
  .psfc__item--nomobile { display: none; }

  /* Nút gộp: to hơn các nút kênh một chút để nhìn ra ngay đây là nút chính. */
  .psfc--collapse .psfc__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--psfc-default-bg);
    color: var(--psfc-icon-color);
    box-shadow: 0 6px 18px rgba(1, 35, 72, 0.32);
    cursor: pointer;
  }
  .psfc--collapse .psfc__toggle:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(1, 35, 72, 0.55);
  }

  /* Đóng: danh sách kênh thu về 0 và KHÔNG bắt sự kiện chạm nữa.
     visibility + pointer-events chứ không display:none để còn chuyển động được;
     display:none thì không có gì để nội suy, danh sách nhảy phịch ra. */
  .psfc--collapse .psfc__list {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Thu về max-height:0 mà để overflow mặc định thì các nút vẫn nằm
       nguyên chỗ cũ và TRÀN xuống dưới đáy màn hình — vô hình nhưng
       vẫn là vùng cuộn thừa ở vài trình duyệt. Cắt hẳn. */
    overflow: hidden;
    transform: translateY(8px);
    transition: max-height 0.24s ease, opacity 0.18s ease, transform 0.24s ease, visibility 0.24s;
  }
  .psfc--collapse.is-open .psfc__list {
    /* 60px mỗi nút (44 + gap 8, dư ra chút) × tối đa 8 kênh — đủ cho mọi cấu hình
       thực tế mà vẫn là một con số hữu hạn để chuyển động chạy được. */
    max-height: 480px;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  /* Đang mở thì icon điện thoại đổi thành dấu X. */
  .psfc--collapse.is-open .psfc__icon--closed { display: none; }
  .psfc--collapse.is-open .psfc__icon--open { display: flex; }
  /* Nhãn hover vô nghĩa trên cảm ứng và dễ kẹt lại sau khi chạm. */
  .psfc__tip { display: none; }

  /* --- Thẻ chữ dọc "LIÊN HỆ VỚI CHÚNG TÔI" ---------------------------------
     Vấn đề gốc: thẻ này cao gần 200px, ở khổ 375px nó nằm đè lên cột chữ suốt
     chiều cao màn hình — đo trên /panel-pu-pir-cach-nhiet-la-gi/ thấy nó cắt
     mất đuôi các dòng mô tả ("...trong nhà xưở|ng"). Trước đây xử bằng cách ẩn
     hẳn, nhưng thế là mất luôn dòng chữ nói rõ cụm nút này để làm gì.

     Cách hiện tại: thẻ chỉ hiện khi người dùng CHỦ ĐỘNG bấm mở cụm nút — lúc
     đó họ đang muốn liên hệ nên che một dải nội dung là chấp nhận được — và
     tự cuộn lại ngay khi họ cuộn trang tiếp (xem float-contact.js).

     Vì sao không display:none/flex mà dùng max-height: display không nội suy
     được nên thẻ sẽ nhảy phịch ra thay vì trượt lên cùng danh sách kênh. */
  .psfc__cta { display: none; }

  .psfc--collapse .psfc__cta {
    display: flex;
    width: var(--psfc-size);
    padding: 0;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: max-height 0.24s ease, padding 0.24s ease, opacity 0.18s ease,
      transform 0.24s ease, visibility 0.24s;
    transform: translateY(8px);
  }
  .psfc--collapse.is-open .psfc__cta {
    /* 320px là trần cho chuyển động chạy được, không phải chiều cao thật —
       thẻ tự cao theo độ dài chữ (khoảng 190px với "LIÊN HỆ VỚI CHÚNG TÔI"). */
    max-height: 320px;
    padding: 14px 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .psfc__cta-text { font-size: 12px; }
}
.psfc--hide-mobile { display: none; }
@media (min-width: 768px) {
  .psfc--hide-mobile { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .psfc__btn,
  .psfc__top,
  .psfc__list,
  .psfc__cta,
  .psfc__tip { transition: none; }
}