.tv-layout {
  display: flex;
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;
  gap: 96px;
  width: 80%;
}

.tv-sidebar {
  flex: 0 0 27%;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.tv-sidebar-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 32px;
  position: static;
}

.tv-sidebar-head p {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-400);
  color: var(--color-light-gray);
  margin-bottom: 20px;
}

.tv-sidebar-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.youtube-banner .button,
.category-banner .button {
  display: flex;
  width: auto;
  background: #f2f2f2;
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-400);
  color: var(--color-light-gray);
  text-decoration: none;
  justify-content: flex-start;
  padding: 16px 24px;
  gap: 8px;
  border-radius: 200px;
  align-items: center;
  transition: background 0.2s ease;
}

.youtube-banner .button:hover,
.category-banner .button:hover {
  background: #e0e0e0;
  color: var(--color-black);
  font-weight: var(--font-weight-400);
}

.youtube-banner .button .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23666666' d='M336 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l121.4 0L212.7 276.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6 480 176c0 8.8 7.2 16 16 16s16-7.2 16-16l0-160c0-8.8-7.2-16-16-16L336 0zM64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-144c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 144c0 17.7-14.3 32-32 32L64 480c-17.7 0-32-14.3-32-32L32 96c0-17.7 14.3-32 32-32l144 0c8.8 0 16-7.2 16-16s-7.2-16-16-16L64 32z'/%3E%3C/svg%3E");
}

.category-banner .button .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23666666' stroke='%23666666' stroke-width='12' d='M40 64c-4.4 0-8 3.6-8 8l0 48c0 4.4 3.6 8 8 8l48 0c4.4 0 8-3.6 8-8l0-48c0-4.4-3.6-8-8-8L40 64zM16 72c0-13.3 10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 48c0 13.3-10.7 24-24 24l-48 0c-13.3 0-24-10.7-24-24l0-48zM176 88l320 0c4.4 0 8 3.6 8 8s-3.6 8-8 8l-320 0c-4.4 0-8-3.6-8-8s3.6-8 8-8zm0 160l320 0c4.4 0 8 3.6 8 8s-3.6 8-8 8l-320 0c-4.4 0-8-3.6-8-8s3.6-8 8-8zm0 160l320 0c4.4 0 8 3.6 8 8s-3.6 8-8 8l-320 0c-4.4 0-8-3.6-8-8s3.6-8 8-8zM88 224l-48 0c-4.4 0-8 3.6-8 8l0 48c0 4.4 3.6 8 8 8l48 0c4.4 0 8-3.6 8-8l0-48c0-4.4-3.6-8-8-8zM40 208l48 0c13.3 0 24 10.7 24 24l0 48c0 13.3-10.7 24-24 24l-48 0c-13.3 0-24-10.7-24-24l0-48c0-13.3 10.7-24 24-24zm0 176c-4.4 0-8 3.6-8 8l0 48c0 4.4 3.6 8 8 8l48 0c4.4 0 8-3.6 8-8l0-48c0-4.4-3.6-8-8-8l-48 0zm-24 8c0-13.3 10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 48c0 13.3-10.7 24-24 24l-48 0c-13.3 0-24-10.7-24-24l0-48z'/%3E%3C/svg%3E");
}

.tv-fixed-clone {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 16px 20px 32px 20px;
  transition: transform 0.3s ease;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.tv-fixed-clone.hidden {
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
}

.tv-fixed-clone.visible {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  background-color: rgba(255, 255, 255, 0.9);
}


@media screen and (min-width: 961px) {
  .tv-sidebar {
    position: sticky;
    top: 100px;
  }
}

@media screen and (max-width: 960px) {
  .tv-layout {
    flex-direction: column;
    width: 90%;
  }
  .youtube-banner .button,
  .category-banner .button {
    justify-content: center;
  }
  .tv-content p {
    width: 100%;
  }
  .tv-fixed-clone .youtube-banner {
    flex: 0 0 60%;
  }
  .tv-fixed-clone .category-banner {
    flex: 0 0 40%;
  }
  .tv-fixed-clone .youtube-banner .button,
  .tv-fixed-clone .category-banner .button {
    font-size: var(--font-size-14);
    padding: 16px 8px;
  }
}