/*
  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;
}
/*
  Trả thẻ `<ul>` về mặc định của khối, không giữ mặc định của trình duyệt
  (task 03/11 mục 10).

  Kiểu 1 và kiểu 2 đều có luật này (`.social-contact-box ul`), riêng kiểu 3
  thiếu. Mà mỗi kiểu chỉ nạp ĐÚNG file CSS của mình (`button-social-{style}.css`),
  nên kiểu 3 không hề thừa hưởng luật của hai kiểu kia.

  Hậu quả đo được trên máy chủ thật: `<ul>` giữ nguyên `padding-inline-start:
  40px` mặc định, nên khối rộng 96px trong khi nút bên trong chỉ 36px — thừa
  đúng 40px. Khách mô tả là nút "bị mập quá, không giống web mẫu". Phần thừa
  nằm hẳn một bên nên icon cũng lệch khỏi tâm khối.

  Thêm cả `list-style: none` (nếu không thì có dấu chấm tròn của danh sách) và
  gỡ `margin` dọc 16px mặc định.
*/
.social-contact-style3 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
  Hai mẩu bo góc lõm nối khối vào mép màn hình.

  `width` phải bằng ĐÚNG bề ngang của khối (task 06/11 mục 3).

  Trước đây ghi cứng 60px trong khi khối chỉ rộng 56px, nên mỗi mẩu thừa ra 4px
  về phía trong. Phần thừa đó là một dải thẳng cùng màu nền, nhìn ra thành hai
  VỆT NGANG mảnh ở trên và dưới khối — đúng chỗ khách chỉ.

  Khó thấy vì cùng màu với khối: chỉ lộ khi nền trang sáng hơn, và chỉ dày 4px.
  Dùng 100% để luôn khớp, kể cả khi số icon đổi làm khối rộng/hẹp đi.
*/
.social-contact-style3:before,
.social-contact-style3:after {
  content: "";
  position: absolute;
  height: 30px;
  width: 100%;
  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 */