:root {
  --video-shadow: 0 10px 34px rgba(15, 42, 91, .08)
}

.video-page {
  background: #f8fafd
}

.video-hero {
  padding: 24px 0 36px;
  background: linear-gradient(135deg, #f2f6ff, #fbfdff);
  border-bottom: 1px solid var(--line)
}

.video-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.video-hero-row>div>span {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue2);
  letter-spacing: .1em;
  text-transform: uppercase
}

.video-hero h1 {
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 800;
  color: var(--blue);
  margin: 8px 0
}

.video-hero p {
  color: var(--muted);
  margin: 0
}

.video-hero-icon {
  font-size: 88px;
  color: #d9e6fa;
  margin-right: 6%
}

.video-category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 20px;
  padding-bottom: 7px;
  scrollbar-width: none
}

.video-category-tabs::-webkit-scrollbar {
  display: none
}

.video-category-tabs button {
  flex: 0 0 auto;
  height: 41px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: #566279;
  font-size: 12px;
  font-weight: 650
}

.video-category-tabs button.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff
}

.watch-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--video-shadow)
}

.main-video-frame {
  position: relative;
  aspect-ratio: 16/9;
  background: #05070b
}

.main-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0
}

.watch-info {
  padding: 24px
}

.video-category-label {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 4px;
  background: #edf3ff;
  color: var(--blue);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase
}

.watch-info h1 {
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.5;
  color: #17233f;
  font-weight: 800;
  margin: 11px 0
}

.watch-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line)
}

.watch-meta>div {
  display: flex;
  flex-wrap: wrap;
  gap: 14px
}

.watch-meta>div:first-child span {
  font-size: 12px;
  color: #7e899d
}

.video-actions button {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  color: #59657a;
  padding: 0 11px;
  font-size: 12px;
}

.video-actions button.active {
  background: #edf4ff;
  color: var(--blue);
  border-color: #d2e1fa
}

.watch-info>p {
  font-size: 14px;
  line-height: 1.7;
  color: #657187;
  max-height: 42px;
  overflow: hidden;
  margin: 16px 0 5px
}

.watch-info.description-expanded>p {
  max-height: none
}

.description-toggle {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  padding: 0
}

.video-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
  font-size: 12px;
}

.video-tags :is(a, span) {
  padding: 5px 8px;
  border-radius: 13px;
  background: #f1f4f8;
  color: #59657b
}

/* Cổng thật: "Video xem nhiều" dùng <button> thay <a href="#"> (đổi video không điều hướng trang,
   tránh bug preventDefault không ăn trên <a> trong component InteractiveServer) — reset về nhìn
   giống link kế thừa font/màu từ <h3> cha, đúng ý đồ mockup dùng <a>. */
.video-side-card h3 button {
  all: unset;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.video-side-card h3 button:hover {
  color: var(--blue);
  text-decoration: underline
}

.video-playlist {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--video-shadow)
}

.playlist-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px;
  border-bottom: 1px solid var(--line)
}

.playlist-head h2 {
  font-size: 15px;
  color: var(--blue);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0
}

.playlist-head span {
  font-size: 11px;
  color: #8993a6
}

.playlist-autoplay {
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 7px
}

.playlist-autoplay>i {
  width: 31px;
  height: 17px;
  border-radius: 9px;
  background: #c7ced9;
  position: relative
}

.playlist-autoplay>i:after {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
  transition: .2s
}

.playlist-autoplay.active>i {
  background: var(--blue)
}

.playlist-autoplay.active>i:after {
  left: 16px
}

.playlist-items {
  max-height: 665px;
  overflow-y: auto
}

.playlist-item {
  width: 100%;
  display: grid;
  grid-template-columns: 25px 120px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 11px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff
}

.playlist-item:hover,
.playlist-item.active {
  background: #f1f6ff
}

.playlist-index {
  font-size: 10px;
  color: #8993a5;
  text-align: center
}

.playlist-item.active .playlist-index {
  color: var(--blue)
}

.playlist-thumb {
  position: relative;
  height: 73px;
  border-radius: 7px;
  overflow: hidden
}

.playlist-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.playlist-thumb em {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 4px;
  border-radius: 3px;
  background: #000c;
  color: #fff;
  font-size: 7px;
  font-style: normal
}

.playlist-info {
  display: grid;
  gap: 6px
}

.playlist-info strong {
  font-size: 14px;
  line-height: 1.5;
  color: #344057
}

.playlist-info small {
  font-size: 12px;
  color: #8b95a7
}

.video-side-card {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff
}

.video-side-card h2 {
  font-size: 14px;
  color: var(--blue);
  font-weight: 800;
  text-transform: uppercase;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--line)
}

.video-side-card article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 11px 0
}

.video-side-card article+article {
  border-top: 1px dashed var(--line)
}

.video-side-card article>span {
  font-size: 24px;
  font-weight: 800;
  color: #c9d5e9
}

.video-side-card h3 {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 4px
}

.video-side-card small {
  font-size: 12px;
  color: #8b95a6
}

.comments-section {
  margin-top: 25px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--video-shadow)
}

.comments-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px
}

.comments-heading h2 {
  font-size: 17px;
  color: var(--blue);
  font-weight: 800;
  margin: 0
}

.comments-heading h2 span {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 20px;
  border-radius: 10px;
  background: #edf3ff;
  font-size: 9px
}

.comments-heading select {
  height: 35px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 9px;
  background: #fff;
  color: #606c81;
  font-size: 12px;
}

.comment-form {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px
}

.comment-avatar,
.user-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 750
}

.comment-avatar {
  width: 42px;
  height: 42px;
  background: #e9eef6;
  color: #8b97aa;
  font-size: 19px
}

.comment-form textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  outline: 0;
  font-size: 12px;
}

.comment-form textarea:focus {
  border-color: var(--blue2)
}

.comment-form-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px
}

.comment-form-bottom>span {
  font-size: 10px;
  color: #9099aa
}

.comment-form-bottom button {
  height: 34px;
  border: 0;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 12px;
}

.cancel-comment {
  background: #f1f3f6;
  color: #667187
}

.comment-form-bottom button[type=submit] {
  background: var(--blue);
  color: #fff
}

.comment-login-note {
  margin: 15px 0;
  padding: 10px 13px;
  border-radius: 7px;
  background: #f6f8fb;
  color: #778297;
  font-size: 13px;
}

.comment-login-note i {
  color: #15966b
}

.comment-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line)
}

.user-avatar {
  width: 42px;
  height: 42px;
  color: #fff;
  font-size: 11px
}

.avatar-blue {
  background: #2d70cf
}

.avatar-green {
  background: #1a9b70
}

.avatar-purple {
  background: #7949cc
}

.avatar-official {
  background: var(--blue);
  font-size: 17px
}

.comment-user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px
}

.comment-user strong {
  font-size: 12px;
}

.comment-user span {
  font-size: 11px;
  color: #929baa
}

.comment-user em {
  font-size: 7px;
  font-style: normal;
  padding: 3px 6px;
  border-radius: 8px;
  background: #edf3ff;
  color: var(--blue)
}

.comment-content>p,
.comment-replies p {
  font-size: 15px;
  line-height: 1.65;
  color: #4e5a70;
  margin: 7px 0
}

.comment-tools {
  display: flex;
  gap: 15px
}

.comment-tools button {
  border: 0;
  background: transparent;
  color: #758095;
  font-size: 11px;
  padding: 0
}

.comment-tools button.active {
  color: var(--blue)
}

.reply-form {
  display: none;
  margin-top: 10px;
  height: 37px
}

.reply-form input {
  height: 100%;
  width: calc(100% - 55px);
  border: 1px solid var(--line);
  border-radius: 6px 0 0 6px;
  padding: 0 9px;
  font-size: 11px;
}

.reply-form button {
  height: 100%;
  width: 55px;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: var(--blue);
  color: #fff;
  font-size: 9px
}

.comment-replies {
  margin-top: 13px;
  padding-left: 14px;
  border-left: 2px solid #e2e8f1
}

.comment-replies article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px
}

.comment-replies .user-avatar {
  width: 34px;
  height: 34px
}

.new-comment {
  animation: newComment .5s ease
}

@keyframes newComment {
  from {
    opacity: 0;
    transform: translateY(-10px)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.load-comments {
  display: block;
  margin: 15px auto 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--blue);
  padding: 8px 14px;
  font-size: 12px;
}

.load-comments:disabled {
  color: #8a94a5
}

@media(max-width:1199px) {
  .playlist-items {
    max-height: 500px
  }
}

@media(max-width:767px) {
  .video-hero {
    padding: 16px 0 25px
  }
  .video-hero-icon {
    display: none
  }
  .video-hero h1 {
    font-size: 24px
  }
  .video-hero p {
    font-size: 11px
  }
  .video-content.section {
    padding-top: 18px
  }
  .video-category-tabs {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px
  }
  .watch-info {
    padding: 16px
  }
  .watch-info h1 {
    font-size: 18px
  }
  .watch-meta {
    align-items: flex-start;
    flex-direction: column
  }
  .video-actions button span {
    display: none
  }
  .playlist-item {
    grid-template-columns: 22px 105px 1fr
  }
  .playlist-thumb {
    height: 65px
  }
  .comments-section {
    padding: 16px
  }
  .comment-form,
  .comment-item {
    grid-template-columns: 35px 1fr
  }
  .comment-avatar,
  .user-avatar {
    width: 35px;
    height: 35px
  }
  .comment-form textarea {
    min-height: 78px
  }
  .comment-login-note {
    line-height: 1.5
  }
  .comment-content>p {
    font-size: 10px
  }
}

@media print {
  header,
  .smart-search,
  .footer,
  .backtop,
  .video-modal,
  .video-hero,
  .video-category-tabs,
  .video-playlist,
  .video-side-card,
  .comments-section {
    display: none !important
  }
  .video-content {
    padding: 0
  }
  .watch-card {
    border: 0;
    box-shadow: none
  }
  .main-video-frame {
    display: none
  }
}