.characters-selector-controls {
    position: relative;
    width: 100%;
    height: 0;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3.6458333333vw;
    height: 5vw;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.prev-btn {
    left: 13vw;
    top: -2vw;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAABACAYAAABlR0UdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIzNDZFNjUyMDNDQjExRjBCQzA1QTMwQ0I1Mzg3OTBEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIzNDZFNjUzMDNDQjExRjBCQzA1QTMwQ0I1Mzg3OTBEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjM0NkU2NTAwM0NCMTFGMEJDMDVBMzBDQjUzODc5MEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjM0NkU2NTEwM0NCMTFGMEJDMDVBMzBDQjUzODc5MEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6QN6MxAAAEUUlEQVR42tSaWUgVURjH56otaLS4FpXYvlyLsgKLSPOtzB4qfYq2l0owSCh7qQeDMIiCooKiFQoqwqACH6KCioo2zYwWSg3D3LId1HL6n/puTdPMnOXeuffOB78Hr+d88+fMd7/zne9cn67rmgctJsaDovuCXq8Jjwfdv5bcI4J9IA18+xMrHhE9GrT8E+QeED4NvP7v2xnlovPAc6B7Sfgc0GSMay8IZzE9CLywTeQREDWU8/8+YAm44bgDhVn0KpDDGVMMroEvToPiwiS4PzgAxnKE+0ESqOZ6ZLWKy4wDj0A38HPGHgMzRPy6HSqF4D7l4t2gzmFsAXgHaoQ8u7TKfcAe/a81gATOnEowW/QZbsR4OjgDsg2flYCvDnMWgI+cN+LqiueDdv1fuyAw7xJYCnyizwqV4FhQDn6YRH8G6Zy5meAumCTzzLgQbSinwXyL/5WDN5z5y8FN0Cj11CBXOgc069b2GMRx5seAWlAo+2zVdMhq5DJwxWYLZ9XcevCd4yeHxr6SFaASKmxnOwHyHcYcAbcEfOVT3q6XViH5imaCRt3Z2kCSoL8HYItKmMqsOMvL10E/zrjNoEPA32A6RzYo9SckxpYIiGal6HFBf7PAE9DqpvBksJQzpoe+kKIdpingIWh2U/gKgdXmFVFmm0gnnHYV4VYxPgZkmT5bx/HTSJuNjGWAU6AzFMIn0+kjVdJPid2h1sFGgLcCuZ4bKn5F0RfARck5C2nF14JEpS2Q8iI7mbTo8mZVRLEcfhScBWMtcnCxycdLgVrdsjpUFc1sEzmaDjrAGtMBoorqmU6wjMbWWfgpUq1VfIo1i26Y77Px4+P8zawrmFBpVQyVkabVSKZQOed2qAQrvlKh1igA38AukKhSq5g/UI33RQoPf2rzRpSKrDpqNpo3oB3UzLGzfeCqZC5nDc3hVGR9V41xHqUCq14huWqHwEqQorLiorXKSYFvfintvKL2DEygAs61IosVQucFuqwHJVJrLYXkMLfr8X0Cqz6POrIidg9kKpQY0sLvgLkC7YaddC7l2Qe6kMpwW7hGDUz2ei87jEkBFYL+rlFxN8Ttw3IA1iorAz02GaYXzBHwk0f9l6xgNyBZch0aQjXR2BAKGDv1T6dXbrapYCNnfi+FHesgxIezBWdsem6nEOEVYSFpeobqRuIH2Eq3CsaeygCwlzOXtSjaaPPyhXvFjbAT0W3Tyhdw5iwAx8HAcPfHra5S9hqE14N4gauU7HCHilVzaAMoAp9ok9nGmcM6YIuFG7FReF0olNN9YfpNFkt1+7Xfd/S5Dm06P72lcvrCR/xKnB0wVoNjJMzO2EHmPd2LOt8sROBXcGma6dc+Ft011hk7rDnc50dCuGh7jpW8VZEOFVlrorJ3vNeEB+r/kXY1TLSGitFYEVdtzkReEM7ql1Ga6ZdwXhAeEJ9qzEZeER6wBI1+heE14RrdRXV5UTiz2J8CDADBnP4Ooh3gdgAAAABJRU5ErkJggg==) no-repeat center center;
    background-size: cover
}

.next-btn {
    right: 13vw;
    top: -2vw;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAABCCAYAAADHTY8oAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQxRkQyQUJEMDNDQjExRjA4MDVEQjA3MEZBNDM5OTYwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQxRkQyQUJFMDNDQjExRjA4MDVEQjA3MEZBNDM5OTYwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDFGRDJBQkIwM0NCMTFGMDgwNURCMDcwRkE0Mzk5NjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDFGRDJBQkMwM0NCMTFGMDgwNURCMDcwRkE0Mzk5NjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4+nh6VAAAEMklEQVR42tSaW2wMYRTHZ+26tRRR4hoksm6JUCSlSLwUUYIiEbdI3CNaXjRxeSAuiURcHvBASJpIhfbBg0QkLkGIUpq6E/eg7re26WrH/9TZWNPd+b5vZmd25p/8Hjp7vtmz35w53/nO14Cu6wFN03TNh2rBjgf96jypAbT1q/OkWpBhuOYb50nfQQ/Q0o/Ok16DsB9+QKIQuQdGg1Z+dJ4yUDmY5kfnSTWgEsz1o/OkR+AnGOtH50nnwSTQWWDXzYvO08yXgc0Cu75go5vrhOwX3eYfMdXE5hroA86ALq54j8JMlhHgLGhjYtMZVIPXIFvh3pZQecR3wE1QaGLzCawHPcElsBYEvDDzxGhQDjqY2ATARf2fykDHVM886S6oAqvN5gOsAhH+ezq4AYaleuZpVvNBFWglsN2p/69asCyZM29l0CBwHcwV2KWBZ3pzFYP0VIQN6QW4DBYL7Ki8WBPn+jxOqwPdDpsoszkldpOwLdPj6weY5/bMk56Cd2CWhO0aXuCMageKwQHQ2skV1qhnnPenSNi+AltMPl/BYdjPrbAhisAXEJKwJZs7urnoXtPdCBvSc960Z0nY/gYrBf2hjqAUzHc6bEjVvFkZKWl/FRwW2FApsc4N59+CW2CAwpgi8EFgMxyMctr5j7zTCiuMiRZuIi2VuVmgaZm1phDIAcd4IyIrCo0LYLxgA7QENMZcewIqkpVtiP4gYmHcYFCvq+kXyE1WtmkDFvATKFAMQeoL7Vb8vjTejubanXkKt/OGmdkbxy4THAElICxZuIlUE30CVp0fGuemdVwmZ4HPYDHYE/P5OTCBP8vn++Tp1tT0A9zsCDfEZLhkbA0DdsLmgmE29pmEzYkkh81EO2GjcRdhK9+wEAQVx2+347hd591OlTXGVBmyEXMhbnG8UY7VvzV8S7uLlB3nO/HKel9x3ELB6koqYRyrbTK5KHukMIaatbsk7A45XZh151r+ocKYHRJ9zAru8zjqfFcwlE9QZDSG41gTNKykywY7zlO8t21W6SV+uQ8IFqevYCZvyqUzhtWXdQj3XyIS9gX8lBKJnt4c3tg7vgGn+qUSrJaw7c09mkQ6CFq71e5TbTqVOtV0shI2VFdnc9/mncA2D8xI0G2mhtUDt9t9yWi0tktFo5WyxWCQDk4JbDcZ9rZ1YDn3ZX6moj+fAY6CDYqF11MwLNknI6oDsv16rEMvN/0vwknwzcRuERdeEe5+zeQFKKUHalmKR5k5XjnKDPIM7ucXz6zwquCW3RWvnIDTSV57cNrEhnL/SzBZoh/pWthQTt7GIWFm18PpMDEi06ucyi/oJc1jEoVNmM+OPOe4yPk0LmOPax5VorChMmAc1+v1fnOe6pfHkhsNTznfC7z3uuPxnM/giq9R84FinafNdK3mI0WdD8a0oH2jaK/cd46T/ggwAO8pysa7uI/TAAAAAElFTkSuQmCC) no-repeat center center;
    background-size: cover
}

.nav-btn.active::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(0px 0px 4px #fff) contrast(1.2);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.prev-btn.active::before {
    background-image: url('/Home/assets/prev-icon.png');
}

.next-btn.active::before {
    background-image: url('/Home/assets/next-icon.png');
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background: #000;
}

.video-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .video-inner iframe {
        width: 100%;
        height: 100%;
        transform: scale(1.2); /* tăng số lên nếu cần crop nhiều hơn */
        transform-origin: center;
        border: 0;
    }
@media (max-width: 1024px) {
    
    .prev-btn {
        left: 4vw;
        top: -2.5vw;
    }

    .next-btn {
        right: 4vw;
        top: -2.5vw;
    }
}