/**
 * Giaodien1 Player Skin
 * Based on Netflix Skin, customized for giaodien1 theme
 * Accent color: #286fff (matching giaodien1 theme)
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap");

:root {
  --gd1-accent: #286fff;
  --gd1-accent-hover: #4d89ff;
  --gd1-white: #f7f7f7;
  --gd1-black: #0a0a0a;
  --gd1-dark: #141414;
}

/* ===== Base Reset ===== */
html,
body {
  margin: 0;
  padding: 0;
  background: var(--gd1-black);
  font-family: "Inter", -apple-system, sans-serif;
}

/* ===== JWPlayer Container ===== */
.jwplayer {
  border-radius: 0 !important;
}

/* ===== Title ===== */
.jwplayer .jw-title-primary {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  color: var(--gd1-white);
  margin: 3rem 0 0 2rem;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.jwplayer .jw-title-secondary {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  color: var(--gd1-white);
  margin: -4rem 0 0 2rem;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  opacity: 0.8;
}

/* ===== Controls Background ===== */
.jwplayer .jw-controls::after {
  background: none;
}

.jwplayer.jw-state-paused .jw-controls,
.jwplayer.jw-state-complete .jw-controls,
.jwplayer.jw-state-buffering .jw-controls {
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

/* ===== Display (Center Icons) ===== */
.jwplayer .jw-display {
  padding-bottom: 4rem;
}

.jwplayer .jw-display-icon-container {
  transition: transform 0.25s ease;
}

.jwplayer .jw-display-icon-container:hover {
  transform: scale(1.15);
}

/* ===== Control Bar ===== */
.jwplayer .jw-controlbar {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  padding: 0 10px 8px;
}

/* ===== Button Colors ===== */
.jwplayer .jw-controlbar .jw-button-color {
  color: var(--gd1-white);
  transition: color 0.2s ease;
}

.jwplayer .jw-controlbar .jw-button-color:hover {
  color: var(--gd1-accent);
}

/* ===== Slider Time (Progress Bar) ===== */
.jwplayer .jw-slider-time .jw-rail {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.jwplayer .jw-slider-time .jw-buffer {
  background-color: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
}

.jwplayer .jw-slider-time .jw-progress {
  background-color: var(--gd1-accent);
  border-radius: 3px;
}

.jwplayer .jw-slider-time .jw-knob {
  background-color: var(--gd1-accent);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(40, 111, 255, 0.5);
}

.jw-slider-horizontal .jw-rail,
.jw-slider-horizontal .jw-buffer,
.jw-slider-horizontal .jw-progress {
  height: 4px;
}

.jwplayer .jw-slider-time:hover .jw-rail,
.jwplayer .jw-slider-time:hover .jw-buffer,
.jwplayer .jw-slider-time:hover .jw-progress {
  height: 6px;
}

/* ===== Time Tooltip ===== */
.jwplayer .jw-time-tip {
  border-radius: 4px;
  background-color: var(--gd1-dark);
}

.jwplayer .jw-time-tip .jw-text {
  color: var(--gd1-white);
  background-color: var(--gd1-dark);
  border-radius: 4px;
}

.jwplayer .jw-time-thumb {
  border-radius: 4px 4px 0 0 !important;
}

/* ===== Volume Slider ===== */
.jwplayer .jw-slider-volume .jw-rail {
  background-color: rgba(255, 255, 255, 0.2);
  width: 3px;
}

.jwplayer .jw-slider-volume .jw-progress {
  background-color: var(--gd1-accent);
  width: 3px;
}

.jwplayer .jw-slider-volume .jw-knob {
  background-color: var(--gd1-accent);
}

.jwplayer .jw-volume-tip {
  margin-bottom: -3rem;
}

/* ===== Text Elements ===== */
.jwplayer .jw-text {
  color: var(--gd1-white);
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.jwplayer .jw-controlbar .jw-text-elapsed,
.jwplayer .jw-controlbar .jw-text-duration {
  font-size: 13px;
}

/* ===== Settings Menu ===== */
.jwplayer .jw-settings-menu {
  background-color: var(--gd1-dark);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.jwplayer .jw-settings-topbar {
  border-radius: 8px 8px 0 0;
  background-color: rgba(255, 255, 255, 0.05);
}

.jwplayer .jw-settings-menu .jw-settings-content-item {
  transition: background 0.2s ease;
}

.jwplayer .jw-settings-menu .jw-settings-content-item:hover {
  background-color: rgba(40, 111, 255, 0.15);
}

.jwplayer .jw-settings-menu .jw-settings-item-active {
  color: var(--gd1-accent);
}

/* ===== Tooltips ===== */
.jwplayer .jw-tooltip {
  box-shadow: none;
}

.jwplayer .jw-tooltip.jw-open {
  border-radius: 4px;
}

.jwplayer .jw-tooltip .jw-text {
  background-color: var(--gd1-dark);
  border-radius: 4px;
  color: var(--gd1-white);
}

/* ===== Hide Default Buffer Icon ===== */
.jw-svg-icon-buffer {
  display: none !important;
}

/* ===== Custom Loader Animation ===== */
#custom-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  /* KhĂ´ng che control bar phĂ­a dÆ°á»›i */
  background: transparent;
  z-index: 100;
  /* Thấp hơn controls */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  /* Cho phĂ©p click xuyĂªn qua */
}

.loader {
  --main-size: 5em;
  --text-color: #ffffff;
  --shine-color: #ffffff40;
  --shadow-color: #aaaaaa;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  user-select: none;
  position: relative;
  font-size: var(--main-size);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-color);
  width: 7.3em;
  height: 1em;
  filter: drop-shadow(0 0 0.05em var(--shine-color));
}

.loader .text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

.loader .text:nth-child(1) {
  clip-path: polygon(0% 0%, 11.11% 0%, 11.11% 100%, 0% 100%);
  font-size: calc(var(--main-size) / 20);
  margin-left: -2.1em;
  opacity: 0.6;
}

.loader .text:nth-child(2) {
  clip-path: polygon(11.11% 0%, 22.22% 0%, 22.22% 100%, 11.11% 100%);
  font-size: calc(var(--main-size) / 16);
  margin-left: -0.98em;
  opacity: 0.7;
}

.loader .text:nth-child(3) {
  clip-path: polygon(22.22% 0%, 33.33% 0%, 33.33% 100%, 22.22% 100%);
  font-size: calc(var(--main-size) / 13);
  margin-left: -0.33em;
  opacity: 0.8;
}

.loader .text:nth-child(4) {
  clip-path: polygon(33.33% 0%, 44.44% 0%, 44.44% 100%, 33.33% 100%);
  font-size: calc(var(--main-size) / 11);
  margin-left: -0.05em;
  opacity: 0.9;
}

.loader .text:nth-child(5) {
  clip-path: polygon(44.44% 0%, 55.55% 0%, 55.55% 100%, 44.44% 100%);
  font-size: calc(var(--main-size) / 10);
  margin-left: 0em;
  opacity: 1;
}

.loader .text:nth-child(6) {
  clip-path: polygon(55.55% 0%, 66.66% 0%, 66.66% 100%, 55.55% 100%);
  font-size: calc(var(--main-size) / 11);
  margin-left: 0.05em;
  opacity: 0.9;
}

.loader .text:nth-child(7) {
  clip-path: polygon(66.66% 0%, 77.77% 0%, 77.77% 100%, 66.66% 100%);
  font-size: calc(var(--main-size) / 13);
  margin-left: 0.33em;
  opacity: 0.8;
}

.loader .text:nth-child(8) {
  clip-path: polygon(77.77% 0%, 88.88% 0%, 88.88% 100%, 77.77% 100%);
  font-size: calc(var(--main-size) / 16);
  margin-left: 0.98em;
  opacity: 0.7;
}

.loader .text:nth-child(9) {
  clip-path: polygon(88.88% 0%, 100% 0%, 100% 100%, 88.88% 100%);
  font-size: calc(var(--main-size) / 20);
  margin-left: 2.1em;
  opacity: 0.6;
}

.loader .text span {
  animation:
    scrolling 2s cubic-bezier(0.1, 0.6, 0.9, 0.4) infinite,
    shadow 2s cubic-bezier(0.1, 0.6, 0.9, 0.4) infinite;
}

.loader .text:nth-child(1) span {
  background: linear-gradient(to right, var(--text-color) 4%, var(--shadow-color) 7%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.loader .text:nth-child(2) span {
  background: linear-gradient(to right, var(--text-color) 9%, var(--shadow-color) 13%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.loader .text:nth-child(3) span {
  background: linear-gradient(to right, var(--text-color) 15%, var(--shadow-color) 18%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.loader .text:nth-child(4) span {
  background: linear-gradient(to right, var(--text-color) 20%, var(--shadow-color) 23%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.loader .text:nth-child(6) span {
  background: linear-gradient(to right, var(--shadow-color) 29%, var(--text-color) 32%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.loader .text:nth-child(7) span {
  background: linear-gradient(to right, var(--shadow-color) 34%, var(--text-color) 37%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.loader .text:nth-child(8) span {
  background: linear-gradient(to right, var(--shadow-color) 39%, var(--text-color) 42%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.loader .text:nth-child(9) span {
  background: linear-gradient(to right, var(--shadow-color) 45%, var(--text-color) 48%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.loader .line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 0.05em;
  width: calc(var(--main-size) / 2);
  margin-top: 0.9em;
  border-radius: 0.05em;
}

.loader .line::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--text-color);
  opacity: 0.3;
}

.loader .line::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--text-color);
  border-radius: 0.05em;
  transform: translateX(-90%);
  animation: wobble 2s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite;
}

@keyframes wobble {
  0% {
    transform: translateX(-90%);
  }

  50% {
    transform: translateX(90%);
  }

  100% {
    transform: translateX(-90%);
  }
}

@keyframes scrolling {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes shadow {
  0% {
    background-position: -98% 0;
  }

  100% {
    background-position: 102% 0;
  }
}

/* ===== Custom SVG Icons (SVGAwesome Classic) ===== */

/* Play Icon */
.jw-state-paused .jw-svg-icon-play path,
.jw-state-idle .jw-svg-icon-play path {
  display: none;
}

.jw-state-paused .jw-svg-icon-play,
.jw-state-idle .jw-svg-icon-play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22552%22 height=%22588%22 viewBox=%2218 -290 552 588%22%3E%3Cpath d=%22M560 4c0-25-9-50-28-68-28-28-84-77-168-126s-155-72-193-83c-26-7-52-2-73 10-21 13-39 33-45 58C43-167 28-93 28 4c0 92 11 161 19 199 6 29 25 53 49 67 23 13 50 18 77 10 39-10 109-34 191-82 84-49 141-98 169-126 18-18 27-43 27-68z%22 fill=%22%23ffffff%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

.jw-icon-playback:hover .jw-svg-icon-play,
.jw-display-icon-container:hover .jw-svg-icon-play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22552%22 height=%22588%22 viewBox=%2218 -290 552 588%22%3E%3Cpath d=%22M560 4c0-25-9-50-28-68-28-28-84-77-168-126s-155-72-193-83c-26-7-52-2-73 10-21 13-39 33-45 58C43-167 28-93 28 4c0 92 11 161 19 199 6 29 25 53 49 67 23 13 50 18 77 10 39-10 109-34 191-82 84-49 141-98 169-126 18-18 27-43 27-68z%22 fill=%22%23286fff%22/%3E%3C/svg%3E");
}

/* Pause Icon */
.jw-svg-icon-pause path {
  display: none;
}

.jw-svg-icon-pause {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22559%22 height=%22524%22 viewBox=%221 -258 559 524%22%3E%3Cpath d=%22M80-240c18-7 39-8 60-8s42 1 60 8c20 9 33 25 40 46 7 19 10 44 11 75 3 81 3 165 0 246-1 31-4 56-11 75-7 21-20 37-40 46-18 7-39 8-60 8s-42-1-60-8c-21-8-36-22-46-43-9-20-14-46-16-77-7-82-7-167 0-248 2-31 7-57 16-77 10-21 25-35 46-43zm340-8c-21 0-42 1-59 8-21 9-33 25-41 46-7 19-9 44-11 75-3 81-3 165 0 246 2 31 4 56 11 75 8 21 20 37 41 46 17 7 38 8 59 8s42-1 61-8c20-8 35-22 45-43 9-20 14-46 17-77 7-82 7-167 0-248-3-31-8-57-17-77-10-21-25-35-45-43-19-7-40-8-61-8z%22 fill=%22%23ffffff%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}

.jw-icon-playback:hover .jw-svg-icon-pause,
.jw-display-icon-container:hover .jw-svg-icon-pause {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22559%22 height=%22524%22 viewBox=%221 -258 559 524%22%3E%3Cpath d=%22M80-240c18-7 39-8 60-8s42 1 60 8c20 9 33 25 40 46 7 19 10 44 11 75 3 81 3 165 0 246-1 31-4 56-11 75-7 21-20 37-40 46-18 7-39 8-60 8s-42-1-60-8c-21-8-36-22-46-43-9-20-14-46-16-77-7-82-7-167 0-248 2-31 7-57 16-77 10-21 25-35 46-43zm340-8c-21 0-42 1-59 8-21 9-33 25-41 46-7 19-9 44-11 75-3 81-3 165 0 246 2 31 4 56 11 75 8 21 20 37 41 46 17 7 38 8 59 8s42-1 61-8c20-8 35-22 45-43 9-20 14-46 17-77 7-82 7-167 0-248-3-31-8-57-17-77-10-21-25-35-45-43-19-7-40-8-61-8z%22 fill=%22%23286fff%22/%3E%3C/svg%3E");
}

/* Settings (Gear) Icon */
.jw-svg-icon-settings path {
  display: none;
}

.jw-svg-icon-settings {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 -314 610 636'%3E%3Cpath d='M147 179c26 24 56 42 91 52l14 81h112l15-81c34-10 65-28 91-52l77 28 56-97-62-53c3-17 5-35 5-53s-2-36-5-52l62-53-56-97-77 27c-26-24-57-42-91-52l-15-81H252l-14 81c-35 10-66 29-91 52l-78-27-56 97 63 53c-4 16-6 34-6 52s2 36 6 53l-63 53 56 97 78-28zM262-82c-31 16-52 49-52 86 0 54 44 98 98 98s98-44 98-98c0-37-21-70-52-86-10-6-14-19-8-29 5-10 18-14 28-8 44 23 74 70 74 123 0 77-62 140-140 140-77 0-140-63-140-140 0-53 30-100 74-123 11-6 23-2 29 8 5 10 1 23-9 29z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.jw-icon-settings:hover .jw-svg-icon-settings {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 -314 610 636'%3E%3Cpath d='M147 179c26 24 56 42 91 52l14 81h112l15-81c34-10 65-28 91-52l77 28 56-97-62-53c3-17 5-35 5-53s-2-36-5-52l62-53-56-97-77 27c-26-24-57-42-91-52l-15-81H252l-14 81c-35 10-66 29-91 52l-78-27-56 97 63 53c-4 16-6 34-6 52s2 36 6 53l-63 53 56 97 78-28zM262-82c-31 16-52 49-52 86 0 54 44 98 98 98s98-44 98-98c0-37-21-70-52-86-10-6-14-19-8-29 5-10 18-14 28-8 44 23 74 70 74 123 0 77-62 140-140 140-77 0-140-63-140-140 0-53 30-100 74-123 11-6 23-2 29 8 5 10 1 23-9 29z' fill='%23286fff'/%3E%3C/svg%3E");
}

/* Fullscreen (Expand) Icon */
.jw-svg-icon-fullscreen-on path {
  display: none;
}

.jw-svg-icon-fullscreen-on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -309 586 586'%3E%3Cpath d='m348-299 25 1 144 6h9l19 19 19 19v9l6 144 1 25h-81c1-7 4-44 9-112L366-36l-17 19-60-60 19-17 152-133c-67 6-105 8-112 9v-81zM116 195c68-5 105-8 112-9v81l-25-1-144-6h-9l-19-19c-9-9-15-15-18-19l-1-9L6 69 5 44h81c-1 7-3 45-9 112L210 4l17-19 60 60-19 17-152 133z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.jw-icon-fullscreen:hover .jw-svg-icon-fullscreen-on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -309 586 586'%3E%3Cpath d='m348-299 25 1 144 6h9l19 19 19 19v9l6 144 1 25h-81c1-7 4-44 9-112L366-36l-17 19-60-60 19-17 152-133c-67 6-105 8-112 9v-81zM116 195c68-5 105-8 112-9v81l-25-1-144-6h-9l-19-19c-9-9-15-15-18-19l-1-9L6 69 5 44h81c-1 7-3 45-9 112L210 4l17-19 60 60-19 17-152 133z' fill='%23286fff'/%3E%3C/svg%3E");
}

/* Exit Fullscreen Icon */
.jw-svg-icon-fullscreen-off path {
  display: none;
}

.jw-svg-icon-fullscreen-off {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.jw-icon-fullscreen:hover .jw-svg-icon-fullscreen-off {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z' fill='%23286fff'/%3E%3C/svg%3E");
}

/* Volume Icons */
.jw-svg-icon-volume-50 path,
.jw-svg-icon-volume-100 path {
  display: none;
}

.jw-svg-icon-volume-50,
.jw-svg-icon-volume-100 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -260 596 524'%3E%3Cpath d='M250-250c-15 0-29 6-40 17l-86 86c-4 3-8 5-13 5H72c-40 0-72 32-72 72V74c0 40 32 72 72 72h39c5 0 10 2 13 5l86 87c11 10 25 16 40 16 31 0 56-25 56-56v-392c0-31-25-56-56-56zm20 56v356c0 11-9 20-20 20-6 0-11-2-14-6l-87-86c-10-10-24-16-38-16H72c-20 0-36-16-36-36V-70c0-20 16-36 36-36h39c14 0 28-6 38-16l87-86c3-4 9-6 14-6 11 0 20 9 20 20zm80 1c17-36 60-50 96-33 77 39 130 118 130 210v36c0 92-53 171-130 210-36 17-79 3-96-33-6-10-8-22-8-33v-33c-1-27 14-53 40-66 25-12 43-35 48-63-5-27-23-50-48-63-25-12-39-37-40-63v-36c0-11 2-22 8-33zm48 290c-17 9-25 31-16 48 9 18 30 25 48 16 65-32 110-99 110-177s-45-145-110-177c-18-9-39-2-48 16s-2 39 16 48c42 21 70 64 70 113s-28 92-70 113z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.jw-icon-volume:hover .jw-svg-icon-volume-50,
.jw-icon-volume:hover .jw-svg-icon-volume-100 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -260 596 524'%3E%3Cpath d='M250-250c-15 0-29 6-40 17l-86 86c-4 3-8 5-13 5H72c-40 0-72 32-72 72V74c0 40 32 72 72 72h39c5 0 10 2 13 5l86 87c11 10 25 16 40 16 31 0 56-25 56-56v-392c0-31-25-56-56-56zm20 56v356c0 11-9 20-20 20-6 0-11-2-14-6l-87-86c-10-10-24-16-38-16H72c-20 0-36-16-36-36V-70c0-20 16-36 36-36h39c14 0 28-6 38-16l87-86c3-4 9-6 14-6 11 0 20 9 20 20zm80 1c17-36 60-50 96-33 77 39 130 118 130 210v36c0 92-53 171-130 210-36 17-79 3-96-33-6-10-8-22-8-33v-33c-1-27 14-53 40-66 25-12 43-35 48-63-5-27-23-50-48-63-25-12-39-37-40-63v-36c0-11 2-22 8-33zm48 290c-17 9-25 31-16 48 9 18 30 25 48 16 65-32 110-99 110-177s-45-145-110-177c-18-9-39-2-48 16s-2 39 16 48c42 21 70 64 70 113s-28 92-70 113z' fill='%23286fff'/%3E%3C/svg%3E");
}

/* Mute Icon */
.jw-svg-icon-volume-0 path {
  display: none;
}

.jw-svg-icon-volume-0 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zM425 167l55 55 55-55c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-55 55 55 55c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-55-55-55 55c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l55-55-55-55c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.jw-icon-volume:hover .jw-svg-icon-volume-0 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zM425 167l55 55 55-55c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-55 55 55 55c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-55-55-55 55c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l55-55-55-55c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z' fill='%23286fff'/%3E%3C/svg%3E");
}

/* PIP Icon */
.jw-svg-icon-pip-on path,
.jw-svg-icon-pip-off path {
  display: none;
}

.jw-svg-icon-pip-on,
.jw-svg-icon-pip-off {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M64 64V352H576V64H64zM0 64C0 28.7 28.7 0 64 0H576c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM128 448c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H160c-17.7 0-32-14.3-32-32zM352 160c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H384c-17.7 0-32-14.3-32-32V160z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.jw-icon-pip:hover .jw-svg-icon-pip-on,
.jw-icon-pip:hover .jw-svg-icon-pip-off {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M64 64V352H576V64H64zM0 64C0 28.7 28.7 0 64 0H576c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM128 448c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H160c-17.7 0-32-14.3-32-32zM352 160c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H384c-17.7 0-32-14.3-32-32V160z' fill='%23286fff'/%3E%3C/svg%3E");
}

/* Rewind 10s Icon */
.jw-svg-icon-rewind path {
  display: none;
}

.jw-svg-icon-rewind {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.jw-icon-rewind:hover .jw-svg-icon-rewind {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z' fill='%23286fff'/%3E%3C/svg%3E");
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .jwplayer .jw-title-primary {
    margin: 2rem 0 0 1.5rem;
    font-size: 1rem;
  }

  .jwplayer .jw-title-secondary {
    margin: -2.5rem 0 0 1.5rem;
    font-size: 0.75rem;
  }

  /* Thu nhỏ nĂºt play/pause giữa mĂ n hình */
  .jwplayer .jw-display-icon-container {
    width: 60px !important;
    height: 60px !important;
  }

  /* Thu nhỏ loader trĂªn mobile */
  .loader {
    --main-size: 2.5em;
  }
}