/*
  Màu mặc định của kiểu 3 (task 13/09 mục 7).

  Trước đây mọi chỗ đều viết `var(--social-contact-style3-bg)` KHÔNG kèm giá trị
  lùi, mà máy chủ lại chưa bao giờ phát ra biến này — nên cả khối hiện ra không
  nền, icon không màu. Đây là lỗi câm: CSS vẫn hợp lệ, `var()` thiếu thì trả về
  rỗng chứ không báo gì.

  Khai báo ở đây để khối luôn có màu ngay cả khi cửa hàng chưa chọn gì. Khách
  chọn màu thì máy chủ ghi đè hai biến này trong thuộc tính `style` của chính
  khối, nên luật inline thắng.

  Màu lấy theo bản gốc: đỏ tươi, icon trắng.
*/
.social-contact-style3 {
  --social-contact-style3-bg: #ee0033;
  --social-contact-style3-color: #ffffff;

  position: fixed;
  z-index: 21;
  display: var(--social-pc-display);
  justify-content: center;
  align-items: center;
  background-color: var(--social-contact-style3-bg);
  transform: translateY(-50%);
  flex-direction: column;
  padding: 10px;
}
.social-contact-style3:before,
.social-contact-style3:after {
  content: "";
  position: absolute;
  height: 30px;
  width: 60px;
  pointer-events: none;
}
.social-contact-style3 .social-contact-item {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--social-contact-style3-bg);
  position: relative;
  color: var(--social-contact-style3-color);
  font-size: 30px;
  margin: 5px 0;
}
.social-contact-style3 .social-contact-item svg {
  fill: var(--social-contact-style3-color);
}
.social-contact-style3 .social-contact-item.phone-box {
  animation: play0 1.5s ease infinite;
}
@media (min-width: 601px) {
  .social-contact-style3.social-bottomLeft {
    left: 0;
    bottom: var(--social-pc-vertical);
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    animation-name: fadeInLeft;
  }
  .social-contact-style3.social-bottomLeft:before,
  .social-contact-style3.social-topLeft:before,
  .social-contact-style3.social-bottomLeft:before,
  .social-contact-style3.social-topLeft:before {
    top: -30px;
    left: 0px;
    border-radius: 0 0 0 50px;
    box-shadow: -30px 0 0 0 var(--social-contact-style3-bg);
  }
  .social-contact-style3.social-bottomLeft:after,
  .social-contact-style3.social-topLeft:after,
  .social-contact-style3.social-bottomLeft:after,
  .social-contact-style3.social-topLeft:after {
    bottom: -30px;
    left: 0px;
    border-radius: 50px 0 0 0;
    box-shadow: -30px 0 0 0 var(--social-contact-style3-bg);
  }
  .social-contact-style3.social-bottomRight {
    right: 0;
    bottom: var(--social-pc-vertical);
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    animation-name: fadeInRight;
  }
  .social-contact-style3.social-bottomRight:before,
  .social-contact-style3.social-topRight:before,
  .social-contact-style3.social-bottomRight:before,
  .social-contact-style3.social-topRight:before {
    top: -30px;
    right: 0px;
    border-radius: 0 0 50px 0;
    box-shadow: 30px 0 0 0 var(--social-contact-style3-bg);
  }
  .social-contact-style3.social-bottomRight:after,
  .social-contact-style3.social-topRight:after,
  .social-contact-style3.social-bottomRight:after,
  .social-contact-style3.social-topRight:after {
    bottom: -30px;
    right: 0px;
    border-radius: 0 50px 0px 0;
    box-shadow: 30px 0 0 0 var(--social-contact-style3-bg);
  }
  .social-contact-style3.social-topLeft {
    left: 0;
    top: var(--social-pc-vertical);
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    animation-name: fadeInLeft;
  }
  .social-contact-style3.social-topRight {
    right: 0;
    top: var(--social-pc-vertical);
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    animation-name: fadeInRight;
  }
}
@media (max-width: 600px) {
  .social-contact-style3 {
    display: var(--social-mb-display) !important;
  }
  .social-contact-style3.social-mb-bottomLeft {
    left: 0;
    bottom: var(--social-mb-vertical);
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    animation-name: fadeInLeft;
  }
  .social-contact-style3.social-mb-bottomRight {
    right: 0;
    bottom: var(--social-mb-vertical);
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    animation-name: fadeInRight;
  }
  .social-contact-style3.social-mb-topLeft {
    left: 0;
    top: var(--social-mb-vertical);
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    animation-name: fadeInLeft;
  }
  .social-contact-style3.social-mb-topRight {
    right: 0;
    top: var(--social-mb-vertical);
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    animation-name: fadeInRight;
  }
  .social-contact-style3.social-mb-bottomLeft:before,
  .social-contact-style3.social-mb-topLeft:before,
  .social-contact-style3.social-mb-bottomLeft:before,
  .social-contact-style3.social-mb-topLeft:before {
    top: -30px;
    left: 0px;
    border-radius: 0 0 0 50px;
    box-shadow: -30px 0 0 0 var(--social-contact-style3-bg);
  }
  .social-contact-style3.social-mb-bottomLeft:after,
  .social-contact-style3.social-mb-topLeft:after,
  .social-contact-style3.social-mb-bottomLeft:after,
  .social-contact-style3.social-mb-topLeft:after {
    bottom: -30px;
    left: 0px;
    border-radius: 50px 0 0 0;
    box-shadow: -30px 0 0 0 var(--social-contact-style3-bg);
  }
  .social-contact-style3.social-mb-bottomRight:before,
  .social-contact-style3.social-mb-topRight:before,
  .social-contact-style3.social-mb-bottomRight:before,
  .social-contact-style3.social-mb-topRight:before {
    top: -30px;
    right: 0px;
    border-radius: 0 0 50px 0;
    box-shadow: 30px 0 0 0 var(--social-contact-style3-bg);
  }
  .social-contact-style3.social-mb-bottomRight:after,
  .social-contact-style3.social-mb-topRight:after,
  .social-contact-style3.social-mb-bottomRight:after,
  .social-contact-style3.social-mb-topRight:after {
    bottom: -30px;
    right: 0px;
    border-radius: 0 50px 0px 0;
    box-shadow: 30px 0 0 0 var(--social-contact-style3-bg);
  }
}
@keyframes play0 {
  0% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
}

/*
  Logo do cửa hàng tự tải lên, thay cho icon mặc định (task 13/09 mục 7).

  Kích thước theo `em` chứ không theo `px`: ba kiểu nút có cỡ khác nhau (50px ở
  kiểu 1, 36px ở kiểu 3), mà `font-size` của nút đã phản ánh đúng cỡ đó. Dùng
  `em` thì logo tự co giãn theo từng kiểu, không phải viết ba luật riêng.

  `object-fit: contain` để logo chữ nhật không bị méo; `border-radius: 50%` cho
  logo vuông ăn khớp với nút tròn.
*/
.social-contact-logo {
  width: 1em;
  height: 1em;
  object-fit: contain;
  border-radius: 50%;
  vertical-align: middle;
}

/*
  Icon SVG dựng sẵn của hệ thống, hiện dùng cho Zalo (task 30/10 mục 1).

  Khác với `.social-contact-logo` (logo do cửa hàng tự tải lên): file này là
  logo thương hiệu có sẵn, đã vuông và đã canh giữa, nên KHÔNG bo tròn góc — bo
  tròn sẽ cắt mất bốn góc của chữ Zalo.

  Font Awesome Free không có glyph Zalo, nên đây là đường duy nhất để có logo
  Zalo thật thay vì chữ cái "Z".
*/
.social-contact-icon-svg {
  /*
    Cỡ ĐẶT CỨNG theo px, không dùng `em`.

    Bản trước để `1em`, mà `font-size` của nút ở kiểu này là 20px trong khi luật
    `a img` của bản gốc để ảnh 30px — nên logo Zalo hiện ra nhỏ và mảnh hơn hẳn
    ba icon font bên cạnh. Nhìn thấy rõ trên máy chủ thật: nút Zalo nhạt hơn các
    nút còn lại.
  */
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: middle;
}

/*# sourceMappingURL=button-social-style3.css.map */