/* Garante que o corpo da página ocupe toda a tela */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Fundo preto para o player */
}

/* O "Padding Hack" para manter a proporção 9:16 */
.video-container {
    /* Centraliza o container na tela */
    margin: 0 auto; 
    
    /* Largura máxima para garantir que não fique GIGANTE em desktops */
    max-width: 450px; 
    
    /* TRUQUE: O padding-top define a altura baseada na largura (100% de largura * 16/9 = 177.77%) */
    padding-top: 177.77%; 
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Garante que o player Video.js ocupe todo o container */
.video-container .video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important; 
    height: 100% !important;
}

/* Para garantir que o vídeo ocupe o espaço correto dentro do player */
.vjs-tech {
    object-fit: contain; /* Garante que o vídeo se ajuste sem cortar */
}