/* ==========================================================================
   Nút liên hệ nổi
   Bọc dưới `.c-floating` vì CSS Modules băm tên class còn CSS thuần thì không.
   ========================================================================== */

.c-floating .floatingContainer {
  position: fixed;
  right: var(--space-5);
  /* `env(safe-area-inset-bottom)` chừa chỗ cho vạch cử chỉ ở đáy màn hình iPhone
     — không có nó thì nút dưới cùng nằm đúng vào vùng vuốt của hệ điều hành và
     người dùng bấm mãi không trúng. */
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-floating);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.c-floating .actionBtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 52px: vượt ngưỡng chạm 44pt của Apple và 48dp của Material. */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--surface);
  border: 2px solid var(--brand);
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.c-floating .actionBtn:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: var(--shadow-lg);
}

.c-floating .actionBtn:active {
  transform: translateY(0) scale(0.97);
}

.c-floating .icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Bản cũ có hai rule `.zalo`/`.messenger` chỉ đặt lại đúng `background-color:
   #fff` — cùng giá trị nền mặc định của nút. Không có tác dụng gì nên bỏ; màu
   của hai nút vốn nằm trong chính ảnh biểu tượng. */

@media (max-width: 768px) {
  .c-floating .floatingContainer {
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    gap: var(--space-2);
  }

  .c-floating .actionBtn {
    width: 48px;
    height: 48px;
  }
}